/* General */
a { color: #0066cc; text-decoration: none; }
a:hover { color: #000066; }
a.button { display: inline-block; margin: 0 .5em 0 0; padding: 0 1.5em; height: 3em; line-height: 3em; font-weight: 700; color: #FFF; background: #0066cc; }
a.button:hover { color: #000066; background: #ffcc33; }
aside { display: block; box-sizing: border-box; }
aside p { width: 95%; }
body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'hero-new', sans-serif; font-size: 100%; line-height: 2em; color: #333; }
div { display: block; width: 100%; box-sizing: border-box; }
em { color: #333; }
fieldset { display: block; margin: 0; padding: 0; border: 0; }
footer { display: block; width: 100%; box-sizing: border-box; }
form { display: block; margin: 0; padding: 0; width: 100%; box-sizing: border-box; }
header { display: block; width: 100%; box-sizing: border-box; }
hr { display: block; margin: 2em 0; padding: 0; width: 100%; height: 0; border: 0; border-top: 1px dotted #ccc; background: none; }
h1 { margin: 0 0 .34em; padding: 0; font-size: 2.5em; font-weight: 300; line-height: 1.125em; } /* 40px */
h2 { margin: .55em 0; padding: 0; font-size: 2em; font-weight: 400; line-height: 1.125em; }  /* 32px */
h3 { margin: .75em 0; padding: 0; font-size: 1.5em; font-weight: 400; line-height: 1.25em; color: #666; }  /* 24px */
h4 { margin: .75em 0; padding: 0; font-size: 1.25em; font-weight: 400; line-height: 1.375em; }  /* 20px */
h5 { margin: 1em 0; padding: 0; font-size: 1.125em; font-weight: 400; line-height: 1.375em; color: #666; }  /* 18px */
h6 { margin: 1em 0; padding: 0; font-size: 1.0625em; font-weight: 700; line-height: 1.5em; }  /* 17px */
html { width: 100%; height: 100%; }
img { display: block; width: 100%; height: auto; border: 0; }
img.cover { margin: 2em 0; max-width: 66%; }
input { font-family: 'hero-new', sans-serif; font-size: 1em; font-style: italic; color: #333; outline: 0; }
mark { padding: 0 .25em; background: #ffcc33; }
nav { display: block; width: 100%; box-sizing: border-box; }
p { margin: 0 0 1.34em; width: 89%; }
section { display: block; width: 100%; box-sizing: border-box; }
select { font-family: 'hero-new', sans-serif; font-size: 1em; font-style: italic; color: #333; outline: 0; }
small { font-size: .625rem; }
small sup { font-size: 1em; }
svg { display: block; width: 100%; height: auto; }
sup { font-size: .75em; line-height: 1em; }
textarea { font-family: 'hero-new', sans-serif; font-size: 1em; font-style: italic; color: #333; outline: 0; }
time { display: block; font-size: .813em; color: #999; line-height: 1.5em; }
ul { margin: 1em 0; padding: 0; list-style: disc inside;}
ul li { margin: .375em 0; }

/* Structure: Base */
div.root { display: flex; flex-flow: column nowrap; height: 100%; }
div.main { position: relative; z-index: 1; flex-grow: 1; margin: 3em auto; max-width: 80em; }
.navbar { flex-shrink: 0; }
.hidden { display: none !important; }

/* Structure: Section */
.section { position: relative; display: flex; flex-flow: row nowrap; margin: 3em 0 0; }
.section .heading { margin: 0 0 .75em; padding: 1rem 0 0; border-top: 2px solid #333; }
.section .heading.sub { margin-top: 1.5em; }
.section .content { flex-grow: 1; margin: 0 0 2em; }
.section .content.limit { flex-grow: 0; flex-basis: 66%; }
/*
.section .content .inner { width: 89%; } */
.section .content .inner h1 { display: block; padding: 1rem 0; width: 100%; overflow: hidden; font-size: 1.75em; border-top: 2px solid #333; }
.section .content .inner figure { float: left; margin: 0 2em 2em 0; width: 50%; }
.section aside { flex-shrink: 0; flex-basis: 34%; padding-left: 1.5em; margin: 0 0 1em; }
.section aside .heading { margin-bottom: 1.625em; color: #ffcc33; border-color: #ffcc33; }
.section aside .heading.alert { color: #990033; border-color: #990033; }
.section aside .neutral { color: #ccc; border-top-color: #ccc; }

/* Navbar */
.navbar { position: relative; z-index: 10; padding: 1.5em 6em; background: linear-gradient(to right, #000066, #0066cc); }
.navbar.top { padding-top: 3em; padding-bottom: 3em; }
.navbar.top::after { position: absolute; bottom: 0; left: 50%; z-index: 11; display: block; width: 26em; height: 6em; content: ""; background: url(../images/header.bg.png) no-repeat left bottom; background-size: contain; }
.navbar .flex { position: relative; z-index: 100; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; height: 100%; }
.navbar .logo { display: inline-block; width: auto; }
.navbar .logo a { display: block; height: 2em; }
.navbar.btm .logo a { height: 1.5em; }
.navbar.btm .logo small { display: block; margin: .8em 0 0; line-height: 1em; color: #6699cc; }
.navbar .logo svg { width: auto; height: 100%; }
.navbar .logo .svg { fill: #FFF; }
.navbar nav { width: auto; }
.navbar nav ul { display: inline-block; margin: 0; list-style: none; vertical-align: middle; }
.navbar nav ul li { display: inline-block; margin: 0 0 0 .25em; }
.navbar nav ul.links { margin-right: .75em; font-size: .813em; }
.navbar nav ul.links li { margin-left: 1em; }
.navbar nav ul.links a { color: #FFF; }
.navbar nav ul.links a.current,
.navbar nav ul.links a:hover { color: #ffcc33; }
.navbar nav ul.actions li { width: 2em; height: 2em; vertical-align: middle; }
.navbar nav ul.actions li a.icon { display: block; padding: .5em; background: #999; }
.navbar nav ul.actions li .svg { fill: #FFF; }
.navbar nav ul.actions li:hover a.icon { background: #ffcc33; }
.navbar nav ul.actions li.current a.icon { cursor: default; background: #000066; }
.navbar nav ul.actions li:hover .svg { fill: #000066; }
.navbar nav ul.actions li.current .svg { fill: #ffcc33; }

/* Navbar: Lang */
.navbar nav li.lang { position: relative; z-index: 110; }
.navbar nav li.lang a.current { cursor: default; }
.navbar nav li.lang img { box-sizing: border-box; border: 1px solid #FFF; }
.navbar nav li.lang::after { position: absolute; top: 1.5em; left: 0; z-index: 112; display: none; width: 100%; height: 1em; overflow: hidden; content: ""; background: #000066 url(../images/icon.arrow.lang.png) no-repeat center top; }
.navbar.btm nav li.lang::after { top: auto; bottom: 1.5em; background-image: url(../images/icon.arrow.lang.inv.png) }
.navbar nav li.lang ul.options { position: absolute; top: 2.5em; left: 0; z-index: 111; display: none; }
.navbar.btm nav li.lang ul.options { top: auto; bottom: 2.5em; }
.navbar nav li.lang ul.options li { display: block; margin: 0; }
.navbar nav li.lang ul.options li a.icon { background: #FFF; }
.navbar nav li.lang:hover::after { display: block; }
.navbar nav li.lang:hover a.current { background: #000066 !important; }
.navbar nav li.lang:hover ul.options { display: block; box-shadow: 0 0 .25em rgba(0, 0, 0, .21); }
.navbar nav li.lang ul.options li:hover a.icon { background: #ffcc33; }

/* Pagebar */
.pagebar { display: flex; flex-flow: row nowrap; line-height: 3em; text-align: center; background: #f8f8f8; }
.pagebar a { flex-basis: 20%; padding: 0 1em; box-sizing: border-box; color: #999; white-space: nowrap; }
.pagebar a:hover { color: #000066; }
.pagebar a.current { color: #FFF !important; cursor: default; background: #ffcc33; }

/* Searchbar */
.searchbar { display: flex; flex-flow: row nowrap; align-items: center; padding: .5em; width: 100%; background: #f8f8f8; }
.searchbar .field { position: relative; z-index: 1; flex-shrink: 0; margin: 0 .5em 0 0; padding: 0 3em 0 .75em; width: 20em; border: 1px solid #ccc; background: #FFF; }
.searchbar .field input { display: block; margin: 0; padding: 0; width: 100%; height: 3em; line-height: 3em; border: 0; }
.searchbar .field .clear { position: absolute; top: 50%; left: .25em; z-index: 2; display: none; margin-top: -8px; width: 16px; height: 16px; overflow: hidden; background: url(../images/icon.clear.svg) no-repeat; }
.searchbar .field .action { position: absolute; top: 0; right: 0; z-index: 3; display: block; width: 3em; height: 3em; overflow: hidden; background: #CCC no-repeat; background-size: contain; }
.searchbar .field.date .action { background-image: url(../images/icon.date.svg); }
.searchbar .field.guests .action { background-image: url(../images/icon.guests.svg); }
.searchbar .field.fill { border-color: #ffcc33; }
.searchbar .field.fill input { color: #ffcc33; }
.searchbar .field.fill .action { background-color: #ffcc33; }
.searchbar .select { padding: 0; list-style: none; }
.searchbar .select > li { position: relative; margin: 0; }
.searchbar .select .handle { display: block; padding: 0 3em 0 .75em; line-height: 3em; box-sizing: border-box; color: #666; font-style: italic; cursor: default; }
.searchbar .select .icon { position: absolute; top: 0; right: 0; z-index: 11; display: flex; justify-content: center; align-items: center; width: 3em; height: 3em; overflow: hidden; cursor: pointer; }
.searchbar .select .icon svg { display: block; width: 1.5em; height: 1.5em; }
.searchbar .select .icon .path { fill: #CCC; }
.searchbar .select ul { display: none; position: absolute; top: 3.25em; left: -1px; z-index: 10; margin: 0; padding: 0 1px; width: 100%; list-style: none; box-shadow: 0 0 .5em rgba(0, 0, 0, .13); background: #FFF; }
.searchbar .select ul li { margin: 1px 0; padding: .75em; font-size: .875em; line-height: 1.5em; color: #666; cursor: pointer; border-top: 1px dotted #ccc; }
.searchbar .select ul li:first-child { border: 0; }
.searchbar .select ul li:hover { color: #000066; border-color: #000066; background: #ffcc33; }
.searchbar .select.fill .handle { color: #ffcc33; }
.searchbar .select.fill .icon .path { fill: #ffcc33; }
.searchbar .select.active { border-color: #0066cc; }
.searchbar .select.active .handle { color: #0066cc; }
.searchbar .select.active .icon .path { fill: #0066cc; }
.searchbar .date.active { color: #0066cc; border-color: #0066cc; }
.searchbar .date.active input { color: #0066cc; }
.searchbar .date.active .action { background-color: #0066cc; }
.searchbar .date.valued { color: #ffcc33; border-color: #ffcc33; }
.searchbar .date.valued input { color: #ffcc33; }
.searchbar .date.valued .action { background-color: #ffcc33; }
.searchbar .date input { cursor: default; color: #666; }
.searchbar .submit { padding: 0; width: auto; border: 0; }
.searchbar .submit input { padding: 0 1em; font-style: normal; color: #FFF; cursor: pointer; background: #666; }
.searchbar .submit input:hover { color: #000066; background: #ffcc33; }
.searchbar .reset { flex-grow: 1; padding-right: 1em; font-size: .813em; text-align: right; line-height: normal; }
.searchbar .reset a { color: #990033; }
.searchbar .reset svg { display: inline-block; margin-top: -2px; width: 16px; height: auto; vertical-align: middle; }
.searchbar .reset .path { fill: #990033; }
.searchbar .reset a:hover { color: #cc0033; }
.searchbar .reset a:hover .path { fill: #cc0033; }

/* List: Accessibility */
ul.accessibility { margin: 0; padding: 0; list-style: none; }
ul.accessibility li { position: relative; z-index: 1; display: block; margin: 0 0 1.25em; padding: 0 0 0 2.5em; min-height: 1.5em; font-style: italic; color: #666; line-height: 1.5em; }
ul.accessibility li::after { position: absolute; top: 0; left: 0; z-index: 2; display: block; width: 1.5em; height: 1.5em; content: ""; border: 2px solid #666; background: url(../images/icon.check.svg) no-repeat center center; background-size: 1.5em; }

/* List: Amenities */
ul.amenities { display: flex; flex-flow: row wrap; margin: 0; padding: 0; list-style: none; }
ul.amenities li { margin: 0; padding: 0 1em 1em 0; width: 25%; box-sizing: border-box; }
ul.amenities li span { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 1.5em; height: 100%; box-sizing: border-box; font-size: .813em; line-height: 1.25em; color: #000066; background: #f8f8f8; }
ul.amenities li span:hover { background-color: #fffaeb; }
ul.amenities li img { display: inline-block; margin: 0 0 .5em; width: 3em; }

/* List: Articles */
ul.articles { display: flex; flex-flow: row wrap; margin: 0 0 0 -1.5em; padding: 0; list-style: none; }
ul.articles li { flex-basis: 33.3%; margin: 0; padding: 0 0 0 1.5em; box-sizing: border-box; line-height: normal; }
ul.articles h3 { margin: 0; }
ul.articles h3 a { color: #666; }
ul.articles h3 a:hover { color: #000066; }
ul.articles span.caption { display: block; margin: 1em 0 .25em; font-size: .813em; color: #333; }
ul.articles .poster { display: flex; height: 10em; overflow: hidden; }
ul.articles .poster img { align-self: center; }

/* List: bookings */
ul.bookings { margin: 0; padding: 0; list-style: none; }
ul.bookings li { display: flex; flex-flow: row nowrap; margin: 0 0 2em; padding: 0 0 1.5em; border-bottom: 1px dotted #CCC; }
ul.bookings li:last-child { margin: 0; padding: 0; border: 0; }
ul.bookings .poster { flex-shrink: 0; flex-basis: 34%; }
ul.bookings .data { flex-grow: 1; margin: 0; padding: 0 0 0 2em; line-height: 1.5em; }
ul.bookings .data dd { margin: 0; padding: 0; }
ul.bookings .data dt { margin: .25em 0; font-size: 1.5em; font-weight: 400; line-height: 1.25em; color: #666; }
ul.bookings .data .duration { font-size: .813em; color: #333; }
ul.bookings .data .duration span { color: #999; }
ul.bookings .data .price { margin: .75em 0; font-size: 2em; font-weight: 700; line-height: 1rem; }
ul.bookings .data .price small { font-weight: normal; }

/* List: Options */
ul.check { display: flex; flex-flow: row nowrap; margin: 0; padding: 0; list-style: none; }
ul.check li { position: relative; z-index: 1; margin: 0 1em 0 0; padding-left: 3.5em; overflow: hidden; }
ul.check input { position: absolute; top: 0; left: -3em; z-index: 1; display: block; margin: 0; padding: 0; width: 3em; height: 3em; }
ul.check input::after { position: absolute; top: 0; left: 3em; z-index: 2; display: block; width: 3em; height: 3em; box-sizing: border-box; content: ""; border: 2px solid #ccc; background-repeat: no-repeat; background-size: contain; background-position: center center; }
ul.check.radio input::after { border-radius: 1.5em; }
ul.check.radio input:checked::after { border-color: #666; background-image: url(../images/icon.check.svg); }

/* List: Rating */
ul.rating { display: flex; flex-flow: row nowrap; align-items: center; margin: 0; padding: 0; list-style: none; }
ul.rating li { margin: 0 .5em 0 0; height: 1.5em; line-height: 1.5em; }
ul.rating.field li { margin: 0; padding-right: .5em; cursor: pointer; }
ul.rating svg { width: auto; height: 100%; }
ul.rating .path { fill: #ccc; }
ul.rating .current .path,
ul.rating .hover .path { fill: #ffcc33; }
ul.rating .location { margin-left: .5em; font-size: .813em; }
ul.rating .location a { color: #333; }
ul.rating .location a:hover { color: #000066; }

/* List: Results */
ul.results { display: flex; flex-flow: row wrap; margin: 0 0 0 -1.5em; padding: 0; list-style: none; }
ul.results > li { margin: 0; padding: 0 0 2em 1.5em; width: 33.3%; box-sizing: border-box; }

/* List: Reviews */
ul.reviews { margin: 0; padding: 0; list-style: none; }
ul.reviews > li { display: flex; flex-flow: row nowrap; margin: 0 0 2em; padding: 0 0 1.5em; border-bottom: 1px dotted #CCC; }
ul.reviews > li:last-child { margin: 0; padding: 0; border: 0; }
ul.reviews .property { flex-shrink: 0; flex-basis: 34%; line-height: normal; }
ul.reviews .data { padding: 0 0 0 2em; }
ul.reviews .data ul.rating { margin: .75em 0; }
ul.reviews .data ul.rating li { height: 1em; line-height: 1em; }
ul.reviews .data p { margin: 0; line-height: 1.375em; }
ul.reviews .data span.by { display: block; font-size: .813em; color: #999; line-height: 1.5em; }
aside ul.reviews > li { display: block; margin: 0 0 1.5em; padding: 0; border: 0; }
aside ul.reviews h5 { margin: 0 0 .75em; padding: .5em; background: #f8f8f8; }
aside ul.reviews h5 small { display: block; margin: 0 0 .25em; line-height: 1em; color: #990033; }
aside ul.reviews .data { padding: 0 .5em; line-height: 1.5em; }
aside ul.reviews .data p { font-size: .813em; }
aside ul.reviews .data ul.rating li { height: .75em; line-height: .75em; }

/* List: Toc */
ul.toc { margin: 0; font-size: .875em; line-height: 1.5em; list-style: none; }
ul.toc li { margin: .75em 0; }
ul.toc a.title { color: #999; }
ul.toc a.title:not(.current):hover { color: #000066; }
ul.toc a.current { color: #0066cc; cursor: default; }
aside#toc { position: relative; }

/* Content: Heading */
h1.heading { margin-top: 0; color: #666; }
h1.heading a { color: #ffcc33; }
h1.heading a:hover { color: #000066; }
h1.heading .small { font-size: .625em; }
h1.heading ul.rating { margin: 0 0 .5em .25em; font-size: 1rem; }
h1.heading ul.rating li { margin-right: .3em; height: .5em; line-height: .5em; }

/* Content: Address */
aside address { font-size: .813em; color: #999; }
aside address dl { margin: 0; padding: 0; font-style: normal; line-height: 1.5em; }
aside address dt { display: inline-block; color: #333; }
aside address dd { display: inline; margin: 0; }
aside address dd.clear { display: block; margin: 0 0 .5em; width: 100%; height: 0; overflow: hidden; }
aside address hr { margin: 1.34em 0; }

/* Content: Fieldset */
fieldset .row { display: flex; flex-flow: row nowrap; margin: 0 0 1em; line-height: 3em; color: #666; }
fieldset .field { flex-grow: 1; }
fieldset .error .field { position: relative; z-index: 1; }
fieldset .error .field .note { position: absolute; top: 50%; left: 100%; z-index: 2; display: block; padding-left: 30px; margin: -12px 0 0 -12px; height: 24px; font-size: .813em; color: #990033; line-height: 24px; white-space: nowrap; background: #fff url(../images/icon.error.svg) no-repeat left center; }
fieldset .submit { padding-left: 34%; }
fieldset label.label { flex-shrink: 0; flex-basis: 34%; font-size: .813em; }
fieldset .required label.label { position: relative; z-index: 1; padding-left: 1.5em; box-sizing: border-box; }
fieldset .required label.label::after { position: absolute; top: 1.78em; left: 0; z-index: 2; display: block; margin-top: -8px; width: 16px; height: 16px; content: ""; background: url(../images/icon.required.svg) no-repeat; }
fieldset input[type=email],
fieldset input[type=number],
fieldset input[type=password],
fieldset input[type=text],
fieldset select { display: block; margin: 0; padding: 0 .75em; width: 100%; height: 3em; box-sizing: border-box; line-height: 3em; color: #333; border: 1px solid #666; background: #FFF; }
fieldset input[type=number] { padding-right: 0; }
fieldset textarea { display: block; margin: 0; padding: .75em; width: 100%; height: 10em; resize: none; box-sizing: border-box; line-height: 1.5em; color: #333; border: 1px solid #666; background: #FFF; }
fieldset input[type=email]:focus,
fieldset input[type=number]:focus,
fieldset input[type=password]:focus,
fieldset input[type=text]:focus,
fieldset textarea:focus { color: #0066cc; border: 1px solid #0066cc; }
fieldset input[type=email]:placeholder-shown,
fieldset input[type=number]:placeholder-shown,
fieldset input[type=password],
fieldset input[type=text]:placeholder-shown,
fieldset textarea:placeholder-shown { border: 1px solid #CCC; }
fieldset input[type=submit] { display: inline-block; margin: 0; padding: 0 1.5em; height: 3em; line-height: 3em; font-weight: 700; font-style: normal; color: #FFF; cursor: pointer; border: 0; background: #0066cc; }
fieldset input[type=submit]:hover { color: #000066; background: #ffcc33; }
fieldset .submit .note { display: inline-block; margin: 0 .5em; font-size: .813em; font-style: italic; color: #ffcc33; }
fieldset .submit .error { color: #cc0033; }
fieldset .submit a.note { font-style: normal; color: #0066cc; }
fieldset .submit a.note:hover { color: #000066; }
fieldset .date { position: relative; z-index: 100; }
fieldset .date input[type=text] { cursor: default; }
fieldset .date .action { position: absolute; top: 0; right: 0; z-index: 3; display: block; width: 3em; height: 3em; overflow: hidden; background: #CCC url(../images/icon.date.svg) no-repeat; background-size: contain; }
fieldset .date.active input[type=text] { color: #0066cc; border-color: #0066cc; }
fieldset .date.active .action { background-color: #0066cc; }
fieldset .date.fill .action { background-color: #333; }

/* Content: Property list */
.property { position: relative; }
.property .poster { position: relative; display: flex; flex-flow: row nowrap; margin: 0 0 .75em; height: 11em; overflow: hidden; }
.property .poster img { align-self: center; }
.property .poster .available { position: absolute; top: 0; right: 0; z-index: 10; padding: .25em 3.25em .25em .625em; width: auto; font-size: .75em; line-height: 2em; color: #FFF; background: #0066cc; }
.property .poster .available::after { position: absolute; top: 0; right: 0; z-index: 11; display: block; width: 2.5em; height: 2.5em; content: ""; background: #000066 url(../images/icon.success.svg) no-repeat center center; background-size: 55%; }
.property .location { font-size: .813em; color: #333; line-height: normal; }
.property ul.rating { margin: .75em 0 0; }
.property ul.rating li { margin-right: .3em; height: .5em; line-height: .5em; }
.property h2,
.property h3 { margin: 0; width: 95%; }
.property h2 a,
.property h3 a { color: #666; }
.property a:hover { color: #000066; }
.property.featured { margin: 0 0 2em; }
.property.featured .poster { height: 32em; }
.property.aside .poster { margin: 0; }
.property.aside .title { margin: 0 0 1em; padding: .5em; background: #f8f8f8; }

/* Content: Property details */
.prop .content { margin-bottom: 0; }
.prop .hero { display: flex; flex-flow: row wrap; }
.prop .hero.border { border-top: 2px solid #333; }
.prop .hero .poster { flex-basis: 66%; margin: 0 !important; max-height: 32em; overflow: hidden; }
.prop .hero .poster img { min-height: 32em; align-self: center; }
.prop .hero .book { display: flex; flex-flow: column; flex-shrink: 0; flex-basis: 34%; }
.prop .hero .book .c2a { position: relative; z-index: 1; display: block; flex-shrink: 0; padding: 0 1em; width: 100%; height: 3.5em; overflow: hidden; box-sizing: border-box; font-size: 1.125em; font-weight: 700; color: #FFF; line-height: 3.5em; background: #0066cc; }
.prop .hero .book .c2a::after { position: absolute; top: 0; right: 0; z-index: 2; display: block; width: 3.5em; height: 3.5em; content: ""; background: #000066 url(../images/icon.success.svg) no-repeat center center; background-size: 1.5em; }
.prop .hero .book .c2a:hover { color: #000066; background: #ffcc33; }
.prop .hero .book .c2a:hover::after { background-color: #000066; }
.prop .hero .book .map { align-self: stretch; margin: 0 !important; width: 100%; height: 100% !important; }
.prop .hero .book .info { align-self: stretch; padding: .75em 3em 1em 1em; width: 100%; height: 100%; font-size: 1.125em; line-height: 2.25em; color: #666; background: #f8f8f8; }
.prop .hero .outer-book { padding: 1em; width: 100%; line-height: normal; color: #666; background: #f8f8f8; }
.prop .hero ul.arrangement { flex-basis: 100%; margin: .75em 0 0; padding: 0; list-style: none; font-size: 1.5em; color: #666; }
.prop .hero ul.arrangement li { display: inline-block; margin: 0 1em 0 0; }
.prop .hero ul.arrangement .focus { color: #333; }
.prop .hero ul.articles { margin-top: 1.5em; }
.prop div.location { display: flex; flex-flow: row nowrap; margin: 0 0 3em; }
.prop div.location .map { flex-basis: 66%; margin: 0 !important; }
.prop div.location .details { flex-basis: 33.3%; padding-left: 1.5em; }
.prop div.location .details .caption { margin: 0; font-size: .813em; color: #999; }
.prop .reviews { display: flex; flex-flow: row nowrap; margin: 0 0 0 -1.5em; }
.prop .reviews > li { display: block; flex-basis: 33.3%; margin: 0; padding: 0 0 0 1.5em !important; border: 0; }
.prop .gallery .flex { display: flex; flex-flow: row nowrap; margin: 0 0 1em; width: 100%; }
.prop .gallery .flex .photo { display: flex; flex-grow: 0; width: auto; align-items: center; }
.prop .gallery .flex .photo:first-child { padding-right: 1em; }
.prop .gallery .flex img { max-height: 30em; }

/* Content: Reserve */
.reserve ul.price { margin: 0 0 1.5em; padding: 0; list-style: none; }
.reserve ul.price li { display: flex; flex-flow: row nowrap; color: #999; }
.reserve ul.price .label { flex-basis: 50%; }
.reserve ul.price .value { flex-basis: 50%; line-height: normal; color: #333; text-align: right; }
.reserve ul.price .value.left { text-align: left; }
.reserve ul.price .duration .label { font-weight: 700; }
.reserve ul.price .total { margin-top: 1em; padding-top: 1em; font-size: 1.125em; font-weight: 700; border-top: 1px dotted #ccc; }
.reserve ul.price .total .value { font-size: 1.5em; }
.reserve ul.price .sep { margin: 1em 0; height: 0; overflow: hidden; border-top: 1px dotted #ccc; }
.reserve .c2a { position: relative; z-index: 1; display: block; padding: 0 1em; width: 100%; height: 3.5em; overflow: hidden; box-sizing: border-box; font-size: 1.125em; font-weight: 700; color: #FFF; line-height: 3.5em; background: #0066cc; }
.reserve .c2a::after { position: absolute; top: 0; right: 0; z-index: 2; display: block; width: 3.5em; height: 3.5em; content: ""; background: #000066 url(../images/icon.success.svg) no-repeat center center; background-size: 1.5em; }
.reserve .c2a:hover { color: #000066; background: #ffcc33; }
.reserve .c2aa:hover::after { background-color: #000066; }
.reserve .hint { font-size: .875em; line-height: normal; color: #999; }

/* Content: Various */
.map { display: block; margin: 0; padding: 0; width: 100%; height: 30em; border: 0; }
.load { font-size: .813em; text-align: center; color: #CCC; }
.load a { color: #CCC; }
.load svg { display: block; margin: -.5em auto 0; width: 32px; height: 32px; }
.load .path { fill: #CCC; }
.load a:hover { color: #ffcc33; }
.load a:hover .path { fill: #ffcc33; }

/* Content: Index */
div.index { position: relative; z-index: 1; display: block; }
div.index .content { margin: 0; }
div.index .navbar.top { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; background: none; }
div.index .navbar.top::after { display: none; }
div.index .hero { display: flex; justify-content: center; align-items: center; padding: 1.5em; height: 100%; box-sizing: border-box; background-repeat: no-repeat; background-size: cover; background-position: center top; }
div.index .intro { padding: 1.5em; max-width: 40em; box-sizing: border-box; border-top: 2px solid #0066cc; background: #FFF; }
div.index .intro h1 { color: #0066cc; }
div.index .intro div { margin: 0 0 1em; }
div.index article { display: flex; flex-flow: row nowrap; background: #f8f8f8; }
div.index article .poster { flex-basis: 50%; box-sizing: border-box; border-right: 4px solid #eaeaea; background: #FFF; }
div.index article .data { flex-basis: 50%; padding: 2em; box-sizing: border-box; }
div.index article .data h2 { width: 89%; color: #000066; }
div.index article .data .caption { position: relative; z-index: 1; display: block; margin: 0 0 1.5em; padding: 0 0 1.5em; width: 89%; font-size: 1.125em; font-style: italic; line-height: 1.5em; }
div.index article .data .caption::after { position: absolute; bottom: 0; left: 0; z-index: 2; display: block; width: 50%; height: 2px; content: ""; background: #000066; }

/* Content: Map */
#map { margin: 0 0 1em; width: 100%; height: 32em; font-size: 1em; }
#map.book { margin: 0; }

/* Addon: Datepicker */
.datepicker-inline { display: none; position: absolute; top: 3.25em; left: 0; width: 100%; }
.datepicker-inline .datepicker { padding: 0 1px; width: 100%; font-family: 'hero-new', sans-serif; border: 0; border-radius: 0; box-shadow: 0 0 .5em rgba(0, 0, 0, .13); }
.datepicker-inline .datepicker--nav-action,
.datepicker-inline .datepicker--nav-title,
.datepicker-inline .datepicker--cell { border-radius: 0; }
.datepicker-inline .datepicker--nav-action:hover,
.datepicker-inline .datepicker--nav-title:hover { background: #f8f8f8; }
.datepicker-inline .datepicker--cell:hover,
.datepicker-inline .-range-from-,
.datepicker-inline .-range-to-,
.datepicker-inline .-selected- { color: #000066 !important; background: #ffcc33 !important; }
.datepicker-inline .datepicker--content { box-sizing: border-box; }
.datepicker-inline .datepicker--day-name { color: #ffcc33; }
.datepicker-inline .-current- { color: #0066cc; border: 1px solid #0066cc; background: #FFF; }
.datepicker-inline .-in-range- { color: #000066 !important; background: #ffffcc !important; }
.datepicker-inline .datepicker--cell.-disabled- { color: #ccc !important; background: #f8f8f8 !important; }
.datepicker-inline .datepicker--cell.-other-month- { visibility: hidden; }

/* Media Queries */
@media screen and (max-width: 1472px){
  div.main { margin-top: 2em; margin-bottom: 2em; padding: 0 3em; }
  .navbar.btm { padding: 1.25em 3em; }
  .navbar.top { padding: 2em 3em; }
  .navbar.top::after { height: 5em; }
  .navbar .flex { margin: 0 auto; max-width: 1280px; }
}

@media screen and (max-width: 1024px){
  body { font-size: .938em; }
  h1 { font-size: 2.375em; } /* 38px */
  h2 { font-size: 1.875em; }  /* 30px */
  h3 { font-size: 1.4375em; }  /* 23px */
  h4 { font-size: 1.1875em; }  /* 19px */

  ul.reviews > li { display: block; }
  ul.reviews .property .poster { width: 50%; }
  ul.reviews .data { margin: 1em 0 0; padding: 0; }
  .prop ul.reviews .data { margin: 0; }
  ul.bookings .poster { display: none; }
  ul.bookings .data { padding: 0; }
  ul.bookings .data dt { font-size: 1.4375em; }
  ul.bookings .data .price { font-size: 1.875em; }
  .searchbar .field { width: 25%; }
  .prop .hero ul.arrangement,
  .reserve ul.price .total .value { font-size: 1.4375em; }
  div.index article .data { padding: 1em; }
}

@media screen and (max-width: 768px){
  div.main { padding: 0 2em; }
  .navbar.btm { padding: 1.125em 2em; }
  .navbar.btm .logo a { height: 1.375em; }
  .navbar.top { padding: 1.5em 2em; }
  .navbar.top::after { display: none; }
  .navbar.top .logo a { height: 1.875em; }
  .pagebar a { flex-basis: 100%; }
  .section aside { flex-basis: 40%; }
  .section .content.limit { flex-grow: 1; }
  fieldset .error .field .note { position: static; margin: .75em 0 0; padding-left: 24px; height: 20px; line-height: 20px; background-size: contain; }
  ul.reviews .property .poster { width: 66%; }
  .searchbar { flex-wrap: wrap; justify-content: space-between; }
  .searchbar .field { margin: 0 0 .5em; width: 32%; }
  .searchbar .reset { padding: 0; text-align: left; }
  .property.featured .poster { height: auto; }
  ul.results > li { width: 50%; }
  ul.amenities > li { padding: 0 1em 1em 0; width: 33.3%; height: 10em; }
  .prop div.location { display: block; margin-bottom: 2em; }
  .prop div.location .details { padding: 0; }
  div.index article { display: block; }
  /*
  .section .content .inner { width: 95%; }
*/
  .prop .gallery .flex { display: block; margin: 0; }
  .prop .gallery .flex .photo:first-child { padding-right: 0; }
  .prop .gallery .flex img { margin: 0 0 1em; max-height: none; }
}

@media screen and (max-width: 600px){
  div.main { padding: 0 1.5em; }
  body { font-size: .875em; }
  .navbar.btm .logo a { height: 1.25em; }
  .navbar.top { padding: 1.25em 1.5em; }
  .navbar.top .logo a { height: 1.75em; }
  .navbar .flex { flex-direction: column; justify-content: flex-start; align-items: flex-start; }
  .navbar.btm { padding: 1.125em 1.5em; }
  .navbar.btm .flex { flex-direction: column-reverse; }
  .navbar nav { display: flex; flex-flow: row-reverse nowrap; justify-content: flex-end; margin: .75em 0 0; }
  .navbar nav ul li { margin-right: .25em; margin-left: 0; }
  .navbar nav ul.links li { margin-left: 0; margin-right: 1em; }
  .navbar.btm nav { position: relative; z-index: 11; flex-direction: column; margin: 0 0 2em; padding: 0 0 .75em; width: 100%; border-bottom: 1px dotted #6699cc; }
  .navbar.btm nav ul.links { margin: 0 0 .75em; line-height: 1em; }
  .navbar.top nav ul.links { margin-right: 0; margin-left: .75em; }
  .pagebar { flex-direction: column; line-height: 2.5em; text-align: left; }
  .section { flex-direction: column; margin: 1em 0 0; }
  .section.reverse { flex-direction: column-reverse; }
  .section aside { flex-basis: 100%; padding: 0; }
  fieldset .row { display: block; line-height: 2em; }
  fieldset .field { flex-grow: 1; }
  fieldset .submit { padding-left: 0; }
  fieldset label.label { display: block; width: 100%; }
  fieldset .required label.label { padding-left: 1.25em; }
  fieldset .required label.label::after { top: 1.25em; margin-top: -6px; width: 12px; height: 12px; background-size: contain; }
  ul.check li { padding-left: 2.5em; }
  ul.check input { left: -2em; width: 2em; height: 2em; }
  ul.check input::after { left: 2em; width: 2em; height: 2em; }
  ul.check.radio input::after { border-radius: 1em; }
  .searchbar .field { width: 100%; }
  ul.results > li { width: 100%; }
  .property h2,
  .property h3 { width: 100%; }
  .prop .hero .poster,
  .prop .hero .book { flex-basis: 100%; }
  .prop .hero .map { display: none; }
  .prop .hero ul.arrangement { font-size: 1.3125em; }
  ul.amenities { margin: 0 0 1em; }
  ul.amenities > li { width: 50%; }
  ul.articles,
  .prop ul.reviews { flex-wrap: wrap; margin: 0; }
  ul.articles li { flex-basis: 100%; margin: 0 0 1.5em; padding: 0 !important; }
  .prop ul.reviews > li.data { flex-basis: 100%; margin: 0 0 1em; padding: 0 0 1em !important; border-bottom: 1px dotted #CCC; }
  .prop ul.reviews > li:last-child { margin: 0; padding: 0; border: 0; }
  img.cover { max-width: 100%; }
  .section .content .inner { width: 100%; }

  h1 { font-size: 2.1875em; } /* 35px */
  h2 { font-size: 1.75em; }  /* 28px */
  h3 { font-size: 1.3125em; }  /* 21px */
  h4 { font-size: 1.125em; }  /* 18px */
  h5 { font-size: 1.0625em; font-weight: 700; } /* 17px */
  h6 { font-weight: 400; }  /* 17px */
  .reserve ul.price .total .value,
  ul.bookings .data dt { font-size: 1.3125em; }
  ul.bookings .data .price { font-size: 1.75em; }
}