:root {
	--header-current-height: 76px;
}
/* Hotel header
------------------------------------------------*/


.hero{
    min-height: calc(100svh - 81px);
}
header {
	height: auto;
}
header::after {
	box-shadow: none;
}
header.scrolled {
	box-shadow: none;
}
.header-top {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	overflow: visible;
	height: 100%;
}
.header-top ul {
	height: 0;
	overflow: hidden;
	pointer-events: none;
}
.hotel-brand, .hotel-brand:visited, .hotel-brand:hover {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: white;
	text-transform: uppercase;
	margin: 0 auto;
	transition: 0.2s;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.002);
}
header.scrolled .hotel-brand, header.scrolled .hotel-brand:visited {
	background-color: rgba(0, 0, 0, 0);
}
.hotel-brand:focus-visible {
	outline: 1px solid var(--copperwood);
	outline-offset: 4px;
}
.hotel-brand p:first-child {
	font-weight: 600;
	font-size: 20px;
	margin: 0;
	line-height: 1;
}
.hotel-brand p:last-child {
	font-weight: 400;
	font-size: 10px;
	margin: 5px 0 0;
	line-height: 1;
}
.hotel-brand p:first-child, .hotel-brand p:only-child {
	font-weight: 600;
	font-size: 20px;
	margin: 0;
	line-height: 1;
}
img.hero-title {
	max-width: 400px;
}
@media (min-width: 1000px) {
	.sidebar-toggle {
		display: unset;
		pointer-events: auto;
	}
}
@media (max-width: 650px) {
	.header-top .logo, .header-top .logo img {
		display: none;
		pointer-events: none;
		width: 0;
	}
	.header-top {
		grid-template-columns: 130px auto 130px;
	}
	.hotel-brand p:last-child {
		font-size: 8px;
	}
	.hotel-brand p:first-child, .hotel-brand p:only-child {
		font-size: 18px;
	}
}
@media (max-width: 480px) {
	img.hero-title {
		max-width: 72%;
	}
}
@media (max-width: 470px) {
	.header-top {
		grid-template-columns: 70px 1fr 80px;
	}
	.hotel-brand p:last-child {
		font-size: 9px;
	}
	.hotel-brand p:first-child, .hotel-brand p:only-child {
		font-size: 17px;
	}
}
@media (max-width: 360px) {
	.header-top {
		grid-template-columns: 61px 1fr 61px;
	}
	.hotel-brand p:last-child {
		font-size: 8px;
	}
	.hotel-brand p:first-child, .hotel-brand p:only-child {
		font-size: 15px;
	}
	.header-buttons .btn {
		padding: 0 12px;
	}
}
/* Side-menu alterings*/
@media (min-width: 1100px) {
	.sidebar-toggle {
		display: flex;
		pointer-events: auto;
	}
}
/* Hotel bar menu (resides under hero element)
------------------------------------------------*/
.hotel-page-menu {
	height: 81px;
	width: 100%;
	padding: 15px 30px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid rgba(174, 109, 33, 0.30);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.63) 100%), #FBF4E8;
	position: sticky;
	top: var(--header-current-height);
	z-index: 14;
	/*turn off transition for distance to top, so that when we close the promo-bar, the menubar moves up immediately*/
	transition: box-shadow 0.2s, background 0.2s, top 0s, opacity 0.2s ease;
	overflow-x: auto;
	overflow-y: hidden;
}
/* menubar when overflowing */
.hotel-page-menu.overflow {
	justify-content: flex-start;
}
.hotel-menu .menu-item a:focus-visible, .sidebar-menu .menu-item a:focus-visible {
	border-bottom: 1px solid black;
	border-radius: 0;
}
.hotel-menu .menu-item, .sidebar-menu .menu-item {
	position: relative;
	overflow: hidden;
}
.hotel-menu .menu-item::before, .sidebar-menu .menu-item::before {
	position: absolute;
	content: "";
	bottom: 0;
	left: -110%;
	opacity: 0;
	width: 100%;
	height: 1px;
	background-color: var(--coffee-bean);
	transition: 0.2s;
}
.hotel-menu .menu-item:hover::before, .hotel-menu .menu-item.current-menu-item::before, .sidebar-menu .menu-item:hover::before, .sidebar-menu .menu-item.current-menu-item::before {
	left: 0;
	opacity: 1;
}
.hotel-menu {
	width: fit-content;
	display: flex;
	flex-direction: row;
	gap: 60px;
	justify-content: center;
	text-transform: uppercase;
}
.hotel-menu .menu-item a {
	color: var(--coffee-bean);
	font-size: 13px;
	padding: 5px 0;
}
.menu-item {
	width: fit-content;
	text-wrap: nowrap;
}
.hotel-menu .menu-item::before {
	background-color: var(--coffee-bean);
	pointer-events: none;
}
.hotel-page-menu.sticky {
	box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2);
	border-color: white;
}

.hotel-page-menu {
    visibility: hidden;
    opacity: 0;
}

html.header-height-ready .hotel-page-menu {
    visibility: visible;
    opacity: 1;
}


@media (max-width: 999px) {
	header.scrolled .header-top {
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}
	.hotel-menu {
		gap: 50px;
	}
}
@media (max-width: 650px) {
    .hero{
        min-height: calc(100svh - 60px);
    }
	.hotel-page-menu {
		height: 60px;
	}
	.hotel-menu {
		gap: 30px;
	}
}
/* for pages that do not have a hero image
----------------------------------------------------------------*/
header.no-hero{
    border-bottom: none;
}
header.scrolled.no-hero{
    border-bottom: none;
}
header.no-hero .logo {
	filter: brightness(0);
	transition: 0.2s;
}
header.no-hero .menu-item a, header.sticky .menu-item a {
	color: var(--coffee-bean);
}
header.no-hero .header-top, header.sticky .header-top {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
header.no-hero .hotel-brand,
header.no-hero .hotel-brand:hover{
	color: var(--coffee-bean);
}


header.no-hero {
	background: linear-gradient(to bottom, var(--old-lace), #fbf8ef);
}
header.no-hero::before, header.sticky::before {
	opacity: 0;
}
header.no-hero .sidebar-toggle .line, header.sticky .sidebar-toggle .line {
	background-color: var(--coffee-bean)
}
header.no-hero::after, header.scrolled::after {
	transform: none;
	background: linear-gradient(to bottom, var(--old-lace), #fbf8ef);
}
.hotel-page-menu.no-hero, .hotel-page-menu.sticky {
	background: linear-gradient(to bottom, #fbf8ef, white);
}
/*.hotel-page-menu.no-hero {*/
/*	border-bottom: none;*/
/*}*/
.about.no-hero {
	background: none;
	padding-top: 180px;
	transition: padding-top 0.22s;
}
.about.no-hero.closed-promo {
	padding-top: calc(180px - 47px);
}
header.no-hero.scrolled .header-top, header.sticky .header-top {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
header.no-hero.scrolled {
	box-shadow: none;
}
.sidebar-menu .menu-bar.visible li.menu-item.back a {
	color: var(--dusty-taupe);
}
.sidebar-menu .menu-bar.visible li.menu-item.copper a {
	color: var(--copperwood);
}