.panel-header {
	--text: var(--white);
	--text-alt: #151515;
	z-index: 15;
	position: relative;
	color: var(--text);
}

/* This class prevents the pelican from overlapping the search box on detail pages, while also allowing the pelican to display above the wave
when the search box is closed */
.panel-header.search-open {
	z-index: 16;
}

.panel-header.has-wave::before {
	content: "";
	position: absolute;
	width: 56%;
	height: 2px;
	left: 0;
	background-color: white;
	bottom: -2px;
	z-index: 11;
}

.panel-header .header-wave {
	position: absolute;
	width: 100%;
	z-index: 14;
	top: calc(52px + (45 - 52) * ((100vw - 320px) / (639 - 320)));
	background-image: url(/includes/public/assets/shared/wave-edge-mobile.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	height: calc(25px + (80 - 25) * ((100vw - 320px) / (1023 - 320)));
}


@media (min-width: 40em) {
	.panel-header {
		height: 80px;
	}
	.panel-header .header-wave {
		top: calc(65px + (55 - 65) * ((100vw - 640px) / (1023 - 640)));
	}
}

@media (min-width: 64em) {
	.panel-header {
		background-color: transparent;
		height: 136px;
		overflow-x: clip;
	}
	.panel-header .header-wave {
		z-index: 10;
		top: 136px;
		background-image: url(/includes/public/assets/shared/wave-edge-desktop.svg);
		height: calc(84px + (205 - 84) * ((100vw - 1025px) / (2543 - 1025)));
	}
}

.panel-header .secondary-nav-container {
	padding: 0 20px;
}

@media (min-width: 64em) {
	.panel-header .secondary-nav-container,
	.panel-header .primary-nav-container {
		display: flex;
	}
	.panel-header .primary-nav-container {
		gap: calc(12px + (30 - 12) * ((100vw - 1025px) / (1440 - 1025)));
	}
	.panel-header .secondary-nav-container {
		padding: unset;
		gap: calc(18px + (36 - 18) * ((100vw - 1025px) / (1440 - 1025)));
		margin-bottom: var(--space-3);
	}
}

@media (min-width: 1440px) {
	.panel-header .primary-nav-container {
		gap: 30px;
	}
	.panel-header .secondary-nav-container {
		gap: 36px;
	}
}

.panel-header .secondary-nav-container .contentRender_name_plugins_nav_secondary,
.panel-header .right-container .widgets > div:not(.contentRender_name_plugins_tripbuilder_counter){
	display: none;
}

@media (min-width: 64em) {
	.panel-header .secondary-nav-container .contentRender_name_plugins_nav_secondary,
	.panel-header .right-container .widgets > div:not(.contentRender_name_plugins_tripbuilder_counter){
		display: block;
	}
}

.panel-header .primary-content-container {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	padding: 0 0 0 18px;
}

@media (min-width: 64em) {
	.panel-header .primary-content-container {
		padding: 35px 54px 20px 20px;
		position: relative;
		z-index: 12;
	}
}

@media (min-width: 1440px) {
	.panel-header .primary-content-container {
		padding: 35px 105px 20px 47px;
	}
}

.panel-header .primary-content-container .contentRender_name_plugins_common_logo {
	padding-top: 8px;
	width: 90px;
}

@media (min-width: 64em) {
	.panel-header .primary-content-container .contentRender_name_plugins_common_logo,
	.panel-header .primary-content-container .contentRender_name_plugins_common_logo img {
		width: 100px;
	}

	.panel-header .primary-content-container .contentRender_name_plugins_common_logo {
		position: absolute;
		left: 15px;
	}
	
	
}

@media (min-width: 1250px) {
	.panel-header .primary-content-container .contentRender_name_plugins_common_logo,
	.panel-header .primary-content-container .contentRender_name_plugins_common_logo img {
		width: 213px;
		left: 50px;
	}

	.panel-header .primary-content-container .contentRender_name_plugins_common_logo {
		transition: transform 400ms ease, top 400ms ease, left 400ms ease;
		transform-origin: left center;
	}
	.panel-header.menu-open .primary-content-container .contentRender_name_plugins_common_logo,
	.panel-header.search-open .primary-content-container .contentRender_name_plugins_common_logo {
		transform: scale(0.71) translateY(-52px);
	}
}

.panel-header .right-container {
	display: flex;
	align-items: center;
}

@media (min-width: 64em) {
	.panel-header .right-container {
		flex-direction: column;
		align-items: flex-end;
		margin-left: auto;
	}
	.panel-header .right-container .widgets {
		display: flex;
		align-items: center;
		gap: 24px;
	}

	.panel-header .right-container .primary-nav-container .widgets {
		gap: 3px;
	}
}

/*Header Widgets*/
.panel-header .surf-link {
	display: inline-flex;
	color: var(--white);
	font-family: var(--font-display);
	font-size: var(--text-xs);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
}

@media (min-width: 375px) {
	.panel-header .surf-link {
		font-size: var(--text-sm);
	}
}

.panel-header .surf-link span::before {
	content: "";
	background-image: url(/includes/public/assets/shared/wave-alt.png);
	background-size: cover;
	position: relative;
	display: inline-block;
	width: 24px;
	height: 12px;
	margin-right: 8px;
	align-self: center;
}

@media (min-width: 64em) {
	.panel-header .surf-link {
		color: var(--text-alt);
		font-size: var(--text-sm);
	}
	.panel-header .surf-link span::before {
		background-image: url(/includes/public/assets/shared/wave.png);
		position: relative;
		width: 25px;
		margin-right: 8px;
		align-self: center;
	}
}

.panel-header .mobile-nav-container {
	position: absolute;
	z-index: 10;
	display: none;
	width: 100%;
}

.panel-header .mobile-nav-container.active {
	display: flex;
	justify-content: flex-end;
}

@media (min-width: 64em) {
	.panel-header .mobile-nav-container.active {
		display: none;
	}	
}

.panel-header .mobile-nav-container .mobile-nav {
	position: relative;
	width: 100%;
	background-color: #006f95;
	padding-top: var(--space-6);
	padding-bottom: var(--space-8);
}
.panel-header .mobile-nav-container .mobile-nav::before {
	content: "";
	position: absolute;
	width: 213px;
	height: 162px;
	background-image: url(/includes/public/assets/shared/menu-graphics/plan-your-visit.svg);
	background-position: bottom;
	background-size: cover;
	bottom: -65px;
	left: 29px;
	z-index: 1;
}
.panel-header .mobile-nav-container .mobile-nav::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 80px;
	background-image: url(/includes/public/assets/shared/backgrounds/bg-primary-nav.svg);
	background-position: bottom;
	background-size: cover;
	bottom: -80px;
}

@media (min-width: 40em) {
	.panel-header .mobile-nav-container .mobile-nav {
		padding-top: var(--space-10);
	}

	.panel-header .mobile-nav-container .mobile-nav::before {
		bottom: -56px;
		left: 44px;
	}
}

.panel-header .mobile-nav .widgets {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-auto-flow: dense;
	padding: 20px 22px;
	color: var(--text-alt);
}

.panel-header .mobile-nav .widgets > *:not(.search-cont) {
	align-self: center;
	justify-self: center;
}
.panel-header .mobile-nav .widgets > .contentRender_name_plugins_common_surf_link {
	justify-self: start;
}
.panel-header .mobile-nav .widgets > .contentRender_name_plugins_collections_template_custom_social_links {
	justify-self: end;
}

@media (min-width: 40em) {
	.panel-header .mobile-nav .widgets > *:not(.search-cont) {
		justify-self: center;
	}
}

.panel-header .mobile-nav .search-cont {
	margin-bottom: var(--space-8);
}

/*Header Button*/
.panel-header .header-button {
	background-color: var(--teal);
	color: var(--white);
	text-transform: uppercase;
	font-family: var(--font-display);
	border-radius: var(--rounded-full);
	font-size: 0.625rem;
	letter-spacing: var(--tracking-wide);
	padding: 8.5px 20px 6.5px;
	display: inline-block;
	margin-right: 8px;
}

@media (hover : hover) {
	.panel-header .header-button {
		transition: background-color 350ms ease-in-out;	
	}

	.panel-header .header-button:hover {
		background-color: var(--dark-red);
	}
}

/*Menu CTA*/
.panel-header .social-callout {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: var(--space-6) 55px;
	position: relative;
	width: 275px;
	height: 275px;
	border-radius: var(--rounded-circle);
	background-color: rgba(255,255,255,0.1);
	color: var(--white);
	margin: 0 auto;
}

.panel-header .social-callout::after {
	content: "";
	position: absolute;
	border: 3px solid rgba(255,255,255,0.1);
	border-radius: var(--rounded-circle);
	width: calc(100% + 30px);
	height: calc(100% + 30px);
	left: -15px;
	top: -15px;
	pointer-events: none;
}

.panel-header .social-callout .subtitle {
	color: inherit;
	font-size: var(--text-sm);
	text-transform: uppercase;
	font-weight: 700;
}

.panel-header .social-callout .hashtitle {
	font-size: var(--text-3xl);
}

.panel-header .social-callout .description {
	text-align: center;
	font-size: 0.875rem;
	font-family: var(--font-display);
	font-weight: 300;
	margin-bottom: var(--space-2);
}

@media (min-width: 64em) {
	.panel-header .menu-cta {
		padding: var(--space-20) calc(20px + (80 - 20) * ((100vw - 1025px) / (1440 - 1025)));
	}

	.panel-header .menu-cta .social-callout {
		width: calc(175px + (275 - 175) * ((100vw - 1025px) / (1440 - 1025)));
		height: calc(175px + (275 - 175) * ((100vw - 1025px) / (1440 - 1025)));
		padding: var(--space-6) calc(17px + (42 - 17) * ((100vw - 1025px) / (1440 - 1025)));
	}

	.panel-header .menu-cta .social-callout::after {
		border: 2px solid rgba(255,255,255,0.1);
		width: calc(100% + 28px);
		height: calc(100% + 28px);
		left: -14px;
		top: -14px;
		pointer-events: none;
	}

	.panel-header .menu-cta .social-callout .subtitle {
		font-size: calc(12px + (14 - 12) * ((100vw - 1025px) / (1440 - 1025)));
	}

	.panel-header .menu-cta .social-callout .hashtitle {
		font-size: calc(20px + (30 - 20) * ((100vw - 1025px) / (1440 - 1025)));
	}

	.panel-header .menu-cta .social-callout .description {
		font-size: 0.875rem;
	}
}

@media (min-width: 1440px) {
	.panel-header .menu-cta {
		padding: var(--space-20) 20px var(--space-20) 88px;
	}
	.panel-header .menu-cta .social-callout {
		width: 275px;
		height: 275px;
		padding: var(--space-6) 42px;
	}
	.panel-header .menu-cta .social-callout .hashtitle {
		font-size: var(--text-3xl);
	}
}

.header-fixed {display: none;}

@media (min-width: 64em) {
	.header-fixed .check-rates {
		background-color: var(--dark-blue);
   		padding: var(--space-5) var(--space-2);
		cursor: pointer;
	}

	.header-fixed .check-rates img{
		width: 33px;
		margin: 0 auto;
		pointer-events: none;
	}

	.header-fixed {
		display: block;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 14;
	}
}

@media (min-width: 1440px) {
	.header-fixed .check-rates img{
		width: 40px;
	}
}

/* Booking widget */
.panel-header .slide-rates {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 15;
	transform: translateX(100%);
	transition: transform ease-in 300ms;
}

@media (min-width: 64em) {
	.panel-header .slide-rates {
		position: fixed;
	}
}

.panel-header.show-rates .slide-rates {
	transform: translateX(0);
}
.panel-header.show-rates .header-fixed {
	z-index: 11;
}
.panel-header .slide-rates #aresWidget #aresHeader {
	display: none;
}
.panel-header .slide-rates {
	max-width: 516px;
}
.panel-header .slide-rates #aresWidget:before {
	display: none;
}
.panel-header .slide-rates #aresWidget {
	padding: 26px 33px 41px 38px;
	background-color: #333f48;
	background-image: none;
	border-radius: 0 0 0 22px;
}
.panel-header .slide-rates #aresWidget #aresTabs {
	margin-bottom: 9px;
}
.panel-header .slide-rates #aresWidget #hotels ul li.aresDates {
	grid-column: span 3;
}
.panel-header .slide-rates #aresWidget #hotels ul li.aresNumbers {
	grid-column: span 2;
}
.panel-header .slide-rates #aresWidget #hotels ul li.bookNowBtn {
	grid-column-start: 7;
	grid-row-start: 1;
	grid-row-end: 3;
	margin: 0;
	padding: 0;
	min-width: 65px;
}
.panel-header .slide-rates #aresWidget #hotels ul {
	gap: 7px;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}
.panel-header .slide-rates #aresWidget #hotels ul li.bookNowBtn input {
	outline: none;
	border-radius: 6px;
	height: 100%;
	text-transform: uppercase;
	font-size: .6875rem;
	padding: 0 8px;
	white-space: normal;
	font-weight: 700;
	line-height: var(--leading-tight);
	width: 100%;
	padding-top: 19px;
}
.panel-header .slide-rates #aresWidget #hotels ul li.bookNowBtn:after {
	transform: translateX(-50%);
	top: calc(50% - 19px);
	left: 50%;
	height: 15px;
	width: 25px;
}
.panel-header .slide-rates #aresWidget #aresTabs li a {
	font-size: var(--text-base);
}
.panel-header .slide-rates .close-rates {
	position: absolute;
	right: 34px;
	top: 12px;
	z-index: 1;
	background: transparent;
	color: #fff;
	border-radius: 50%;
	border: 1px solid rgb(255 255 255 / 20%);
	width: 36px;
	height: 36px;
	font-size: var(--text-sm);
}
.panel-header .slide-rates .close-rates i {
	pointer-events: none;
}

@media (max-width: 460px) {
	.panel-header .slide-rates #aresWidget {
		padding: var(--space-6) var(--space-2);
	}
	.panel-header .slide-rates #aresWidget #hotels ul li.bookNowBtn {
		min-width: 60px;
	}
	.panel-header #aresWidget #hotels ul li.aresDates input {
		font-size: 0.8rem;
	}
	.panel-header #aresWidget #hotels ul li.aresDates:after {
		height: 14px;
		width: 10px;
		background-size: contain;
		background-repeat: no-repeat;
		top: 18px;
		right: 7px;
	}
	.panel-header #aresWidget #hotels ul li select {
		text-indent: 12px;
		font-size: .8rem;
	}
	.panel-header .slide-rates #aresWidget #aresTabs li a {
		font-size: .875rem;
	}
	.panel-header .slide-rates .close-rates {
		right: 9px;
		width: 32px;
		height: 32px;
	}
}