/* General
------------------------------------------------------------*/
* { box-sizing: border-box; margin: auto; padding: 0; }
html { text-rendering: optimizeLegibility }
body {
    background-color: #fff;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-family: 'Fira Sans Condensed', 'Roboto Condensed', sans-serif;
    font-weight: 400;
}
main { width: 100%; }
header, nav, section, footer { padding: 1rem; }
article { padding: 1.25rem 0; }
p { padding: .5rem 0; }

.gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}
.gallery-item {
    margin: .25rem .25%;
    width: 24.5%;
}
.gallery-icon { cursor: pointer; }
.gallery-item, .gallery-icon img { height: 200px; width: 100%; }

.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}

.flex, .flex-vertical {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.dashicons { vertical-align: text-bottom; }
.focus  {
    background-color: #fff !important;
    border-color: #6a6c65 !important;
}

.form-secret {
    opacity: 0;
    position: fixed;
        left: 0;
        bottom: 0;
    -webkit-transform: translateY(130%);
    transform: translateY(130%);
    transition-timing-function: ease-in;
    transition: 0.2s;
    z-index: 10;
}
.make-visible {
    opacity: 1;
    transition: 0.25s;
    transition-timing-function: ease-out;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

/* Layout
------------------------------------------------------------*/
#promotion-wrapper {
    height: 36px;
    width: 100%;
}
#promotion {
    background-color: #fff;
    background-image: -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px);
    background-image: -moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px);
    background-image: -o-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px);
    background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    color: #6a6c65;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 100;
}
#promotion a { color: #6a6c65; }
#promotion a:hover { text-decoration: none; }
#topbar {
    position: relative;
    width: 100%;
}
#reserve { z-index: 10; }
#languages, .menu-header-container { position: fixed; }
.menu-header-container {
    background: #fff;
    border-color: #6a6c65;
    border-style: solid;
    border-width: 0 0 .5rem;
    padding: .25rem 2rem;
        top: 70px;
    text-align: right;
    width: 100%;
    z-index: 5;
}
#page-header .menu-header-container {
    top: 109px;
    vertical-align: middle;
}
.menu-header-container::after, #reserve { position: fixed; top: 152px; }
#page-header .menu-header-container::after, #not-frontpage #reserve { top: 192px; }
#page-header-frontpage, #availability, main, #page-footer { position: relative; }


/* Typography
------------------------------------------------------------*/
h1 {
    color: #6a6c65;
    margin: 0;
}
#site-title-frontpage {
    font-size: 0;
    height: 0;
    visibility: hidden;
    width: 0;
}
h2, h3, #languages, .menu-item {
    font-family: 'Bubbler One', 'Source Sans Pro', sans-serif;
    font-weight: 400;
}
h2, h3 {
    color: #6a6c65;
    padding: 2rem;
    text-align: center;
}
h2 {
    display: block;
    font-size: 2.5rem;
}
h3, h4 { font-size: 2rem; }
h4 { color: #222; }
h5 {
    font-size: 1rem;
    font-weight: 300;
}
h6 {
    display: block;
    font-size: .9rem;
}
#notice { text-align: center; }
.note {
    color: #6a6c65;
    font-family: "Bubbler One", "Source Sans Pro", sans-serif;
    font-size: .85rem;
}

/* Navigation
------------------------------------------------------------*/
.menu-header-container::after {
    background-color: #6a6c65;
    content: '';
    height: .25rem;
        right: 0; left: 0;
}
.menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.menu-header { text-align: center; }
.menu-item {
    display: inline-block;
    list-style: none;
    font-size: .9rem;
    margin: auto;
    text-align: center;
}
.menu-item a {
    border-color: transparent;
    border-style: solid;
    border-width: 3px 0 0;
    color: #447f8d;
    display: block;
    margin: 1rem auto;
    padding: .5rem;
    text-decoration: none;
    -webkit-transition: all .4s;
    transition: all .4s;
}
.menu-item a:hover { border-color: #447f8d; }


/* Header
------------------------------------------------------------*/
#languages {
    background-color: #447f8d;
    color: #fff;
    font-size: .85rem;
    padding: .5rem 1rem;
    text-align: right;
    width: 100%;
    z-index: 5;
}
#languages a {
    border-bottom: 1px dotted transparent;
    color: #fff;
    display: inline-block;
    margin: 0 4px;
    text-decoration: none;
    -webkit-transition: all .3s;
    transition: all .3s;
}
#languages a:hover { border-bottom-color: #fff; }
#not-frontpage #languages { position: fixed; }
#reserve a {
    background-color: #6a6c65;
    border-color: #6a6c65;
    border-style: solid;
    border-width: 0 .25rem .25rem 0;
    border-radius: 0 0 1.5rem 0;
    color: #fff;
    display: block;
    font-size: .9rem;
    font-weight: 300;
    padding: 10px 25px 10px;
    text-decoration: none;
    -webkit-transition: all .3s;
    transition: all .3s;
}
#reserve a:hover {
    background-color: #fff;
    border-color: #6a6c65;
    color: #6a6c65;
}

#page-header-frontpage { margin-top: -36px; }
#page-header-frontpage {
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 4rem;
    width: 100%;
    z-index: 0;
}
#page-header-frontpage .hr {
    border-bottom-color: #fff;
    margin: 2rem auto;
    width: 7rem;
}
#logo-frontpage, #logo-frontpage img { margin-top: 146px; max-width: 500px; }
#logo-frontpage {
    margin: 1rem auto 2rem;
    opacity: .725;
    text-align: right;
}
#logo-frontpage img {
    height: 100%;
    width: 100%;
}
#logo-frontpage figcaption { color: #fff; }
#motto {
    color: #fff;
    opacity: .7;
    padding-top: 0;
}
.hr { 
    border-bottom: .25rem solid #6a6c65;
    opacity: .7;
}
#awards {
    background-color: #fff;
    box-shadow: .25rem .25rem .25rem .25rem rgba(34, 34, 34, 0.4);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 1rem;
    width: 100%;
}
#awards a {
    display: block;
    margin: 1rem 1.5%;
    width: 37.5%;
}
#awards img {
    padding: .25rem;
    width: 100%;
}

#page-header {
    background-color: #fff;
    padding: 0;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 5;
}

#page-header #logo { margin-top: 34px; }
#logo {
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
}
#logo img {
    height: 38px;
    position: relative;
    vertical-align: middle;
    width: 38px;
}
#site-title {
    display: inline-block;
    padding: .5rem 0;
    vertical-align: middle;
}
#promo-stripe {
    margin: 3rem 0 0;
    width: 100%;
}
#availability {
    background-color: #6a6c65;
    border-width: 1rem 0;
    border-style: double;
    border-color: #fff;
    color: #fff;
    padding: 1rem;
    width: 100%;
}
#availability-title { text-align: center; }
#availability-form input {
    border: 0 none;
    margin: 1rem auto;
    padding: 1rem;
    width: 30%;
}
#availability-form input[type='submit'] {
    background-color: #6a6c65;
    color: #fff;
    font-weight: 300;
}
#engagement {
    background-color: #eee;
    color: #6a6c65;
    text-align: center;
    width: 100%;
}
#engagement p { margin-right: 2.5rem; }
#engagement p a,
#engagement p button {
    background-color: #fff;
    border: 0 none;
    border-radius: 50%;
    color: #6a6c65;
    display: inline-block;
    margin: 1rem;
    padding: 1rem;
    text-decoration: none;
}
#promos { list-style: none; }
#promos li {margin: .5rem 0; }
#promos a { color: #447f8d; text-decoration: none; }
#newsletter-wrapper {
    font-size: .7rem;
    max-width: 320px;
    width: 100%;
    z-index: 105;
}
#newsletter-wrapper input[type="checkbox"] { margin:5px; }

/* Content
------------------------------------------------------------*/
#panorama {
    border-color: #447f8d;
    border-style: solid;
    border-width: 2rem 2rem 2rem 0;
}
#panorama:hover { opacity: 1; }
#panorama img {
    opacity: .9;
    width: 100%;
}
.indoors {
    border-bottom: 2rem solid #6a6c65;
    border-left: 2rem solid #6a6c65;
    padding-bottom: 2rem;
    width: 100%;
}
.indoors header {
    cursor: pointer;
    text-align: center;
}
.indoors-title {
    color: #222;
    font-size: 2rem;
    font-weight: 700;
    height: 100%;
    text-decoration: none;
    text-shadow: 0 0 5px #fff;
}
.indoors img {
    margin: .5rem auto;
    max-width: 175px;
    width: 75%;
}
#indoors-rooms { border-top: 2rem solid #6a6c65; }

#landscape {
    background-color: #eee;
    margin: 4rem auto 1rem;
    padding-bottom: 2rem;
}
#landscape figure { margin: auto; }
#landscape img {
    border-color: #6a6c65;
    border-style: double;
    border-width: .25rem;
    height: 100%;
    margin: .5rem auto;
    max-width: 250px;
    width: 100%;
}

#location { padding: 0; }
#map {
    max-height: 500px;
    width: 100%;
}
#card {
    background-color: #eee;
    padding: 2rem;
    width: 100%;
}
#card p { margin: .25rem 0 .25rem 25px; }
#social a {
    border-bottom: 1px dotted #6a6c65;
    color: #6a6c65;
    display: inline-block;
    text-decoration: none;
}
.contact {
    background-color: #6a6c65;
    color: #fff;
    display: block;
    margin: 1rem 0;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    max-width: 300px;
}

#content-header {
    background-color: #6a6c65;
    background-position: center center;
    background-size:cover;
    box-shadow: 0 0 .5rem 0 #000 inset;
    margin-top: 160px;
    position:relative;
    z-index: -5;
}
#content-header-title {
 	background-color: #fff;
 	background-color: rgba( 255, 255, 255, .85 );
 	word-break: break-all;
 	color: #6a6c65;
 	letter-spacing: 3px;
 	margin: 3rem auto;
	text-transform: uppercase;
    z-index:0;
}
#content-header img { height: 100%; width: 100%; }

#room-type-selector { background-color: #eee; }
.noUi-base { cursor: pointer; }
.noUi-handle { cursor: grab; }
.noUi-active { cursor: grabbing; }
#room-type-description { margin-top: 0; }
.room-type-details {
    background-color: #f6f6f6;
    border: .25rem solid transparent;
    border-radius: 3px;
    margin: 1rem;
    padding: 1rem;
    position: relative;
}
.room-type-details header {
    border-bottom: .5rem solid #6a6c65;
    margin: 1rem 0;
    padding: 0 0 1rem;
}
.room-type-details li,
.room-type-details li span {
    list-style: none;
    padding-left: 1.25rem;
    text-indent: -1.25rem;
}
.room-type-details li { margin: .5rem 1rem; }
.room-type-details li::before {
    color: #98ca97;
    content: "\f147";
	font-family: "dashicons";
	margin-right: .25rem;
	vertical-align: middle;
}
.room-type-details ul ul li { margin: .25rem 1rem; }
.room-type-details ul ul li::before {
    visibility: hidden;
}
.room-type-details ul ul li,
.room-type-details li span {
    display: block;
    font-size: .9rem;
    font-style: italic;
    font-weight: 300;
}
.room-type-details footer {
    position: relative;
    bottom: 0;
}
#double-rooms, #family-rooms, #maisonettes { width: 220px; }
#all-awards img {
    border-radius: 2rem 2rem 2rem 0;
    margin: 1rem auto;
    opacity: .95;
}
.legal-container {
    max-width: 1000px;
    text-align: left;
}

/* Footer
------------------------------------------------------------*/
#page-footer {
    border-top: 1rem solid #447f8d;
    margin: 1rem auto;
    text-align: center;
    width: 100%;
}
#powered-by {
    background-color: #6a6c65;
    border: 3px double #fff;
    border-radius: .5rem;
    color: #fff;
    margin: .5rem auto;
    padding: .5rem;
    text-decoration: none;
}
#copyright {
    margin: .5rem auto;
    padding: .5rem;
}