/* wth_cms_cruise-with-pointsmarriott.css -- Brand styles for CMS components */
/**
* [Table of Contents]
* Custom Properties (Variables)
* Global Styles
* Buttons
* Header
* Mega Menu
* Mobile Menu
* Footer
* Uncategorized
* Javascript Dependent Styles
* Media Queries
*/

/**
* [Custom Properties (Variables)]
*/

/******************************************************************************/
/* https://www.color-hex.com/color-names.html */
:root {
	/* Brand Palette -- if updating, copy changes to desktop_kk.css */
	--brand-black: #1c1c1c;
	--brand-coral: #ff9662;
	--brand-naturalgray: #d2d2d2;
	--brand-emperor: #4f4f4f;
	--brand-gray44: #707070;
	--brand-milano-red: #b12707;
	--brand-tabasco: #972e11;
	--brand-fieryorange: #B84C16;
	--brand-white: #fff;
	--brand-whitesmoke: #f3f3f3;
	--brand-springwood: #F9F6F4;

	/* Brand Fonts*/
	--brand-heading-font: 'Swiss721BT-Bold', sans-serif;
	--brand-body-font: 'Swiss721BT-Regular', sans-serif;

	/* site setup  */
	--WTH-site-max-width: 1472px;
	--brand-content-max-width: 1280px;

	/* WTH-site-header padding set in wth_cms.css. added here for reference or to edit at the brand level */
	--WTH-site-header__content-container-padding-bottom: 1rem;
	--WTH-site-header__content-container-padding-left: 1rem;
	--WTH-site-header__content-container-padding-right: 1rem;
	--WTH-site-header__content-container-padding-top: 1rem;

	/* Brand Tokens */
	/* https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676 */
	/* naming convention: brand-element-variant-property-category-state */
	/* Button */
	--brand-button-background-color: var(--brand-black);
	--brand-button-border-color: var(--brand-black);
	--brand-button-border-radius: 50px;
	--brand-button-border-style: solid;
	--brand-button-border-width: 2px;
	--brand-button-box-shadow: none;
	--brand-button-text-color: var(--brand-white);
	--brand-button-font-family: var(--brand-body-font);
	--brand-button-font-size: 1rem;
	--brand-button-font-weight: 400;
	--brand-button-padding-bottom: 0.55rem;
	--brand-button-padding-left: 2.5rem;
	--brand-button-padding-right: 2.5rem;
	--brand-button-padding-top: 0.55rem;
	--brand-button-text-transform: capitalize;
	--brand-button-animation-transition: none;

	/* Button: Hover/Focus */
	--brand-button-background-color-hover: var(--brand-emperor);
	--brand-button-border-color-hover: var(--brand-emperor);
	--brand-button-box-shadow-hover: none;
	--brand-button-text-color-hover: var(--brand-white);
	--brand-button-outline-hover: none;
	--brand-button-text-decoration-hover: none;

	/* Button: Active */
	--brand-button-background-color-active: var(--brand-emperor);
	--brand-button-text-color-active: var(--brand-white);
	--brand-button-text-decoration-active: none;
}

/******************************************************************************/

/**
* [Global Styles]
*/

/******************************************************************************/
header {}

header,
footer {}

header a.ui-link {}

/* reset link styles */
/******************************************************************************/

/**
* [Buttons]
*/

/******************************************************************************/
.wth4-mobile-menu-button {}

.wth4-button,
.wth4-button:visited,
.ui-page-theme-a .wth4-button,
.ui-page-theme-a .wth4-button:visited,
a.wth4-button,
a.wth4-button:visited {}

/* button states */
.wth4-button:hover,
.wth4-button:focus,
.wth4-button:focus-visible,
.ui-page-theme-a .wth4-button:hover,
.ui-page-theme-a .wth4-button:focus,
.ui-page-theme-a .wth4-button:focus-visible,
a.wth4-button:hover,
a.wth4-button:focus,
a.wth4-button:focus-visible {}

.wth4-button:active,
.ui-page-theme-a .wth4-button:active,
a.wth4-button:active {}

/* button sizes */
.wth4-button--small,
.ui-page-theme-a .wth4-button--small,
a.wth4-button--small {}

/* transparent */
.wth4-button--transparent,
.wth4-button--transparent:active,
.wth4-button--transparent:focus,
.wth4-button--transparent:hover,
.wth4-button--transparent:visited,
.ui-page-theme-a .wth4-button--transparent,
.ui-page-theme-a .wth4-button--transparent:active,
.ui-page-theme-a .wth4-button--transparent:focus,
.ui-page-theme-a .wth4-button--transparent:hover,
.ui-page-theme-a .wth4-button--transparent:visited,
a.wth4-button--transparent,
a.wth4-button--transparent:active,
a.wth4-button--transparent:focus,
a.wth4-button--transparent:hover,
a.wth4-button--transparent:visited {
	--color: var(--brand-black);
}

.wth4-button--transparent:active,
.wth4-button--transparent:focus,
.wth4-button--transparent:hover,
.ui-page-theme-a .wth4-button--transparent:active,
.ui-page-theme-a .wth4-button--transparent:focus,
.ui-page-theme-a .wth4-button--transparent:hover,
a.wth4-button--transparent:active,
a.wth4-button--transparent:focus,
a.wth4-button--transparent:hover {}

/* icon button */
.wth4-button--icon,
.wth4-button--icon:visited,
.ui-page-theme-a .wth4-button--icon,
.ui-page-theme-a .wth4-button--icon:visited,
a.wth4-button--icon,
a.wth4-button--icon:visited {}

/* mini mobile icon button */
/* chained selectors are to beat styles set in wth_cms_{brand}.css */
.wth4-button.wth4-button--icon-mini,
.wth4-button.wth4-button--icon-mini:visited,
.ui-page-theme-a .wth4-button.wth4-button--icon-mini,
.ui-page-theme-a .wth4-button.wth4-button--icon-mini:visited,
a.wth4-button.wth4-button--icon-mini,
a.wth4-button.wth4-button--icon-mini:visited {
	--color: var(--brand-white)
}


/* header-nav */
.wth4-header-nav-button,
.wth4-header-nav-button:visited,
a.wth4-header-nav-button,
a.wth4-header-nav-button:visited {
	--background: transparent;
	--color: var(--brand-white);
	--padding-bottom: 0.9rem;
	--padding-left: 1.25rem;
	--padding-right: 1.25rem;
	--padding-top: 0;
}

.wth4-header-nav-button:focus-visible,
.wth4-header-nav-button:focus,
.wth4-header-nav-button:hover,
a.wth4-header-nav-button:focus-visible,
a.wth4-header-nav-button:focus,
a.wth4-header-nav-button:hover {
	--background: transparent;
	--color: var(--brand-white);
	--text-decoration: underline;
	text-decoration-color: var(--brand-coral);
	text-decoration-thickness: 2px;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.5rem;
}

.js-button-top-nav--active,
.js-button-top-nav--active:focus,
.js-button-top-nav--active:hover,
.wth4-header-nav-button:active,
a.wth4-header-nav-button:active {
	--color: var(--brand-white);
	--text-decoration: underline;
	text-decoration-color: var(--brand-coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.5rem;
}

/* full-width */
.wth4-button--full-width-flex,
.ui-page-theme-a .wth4-button--full-width-flex,
a.wth4-button--full-width-flex {}

/******************************************************************************/

/**
* [Header]
*/

/******************************************************************************/
/* IMPORTANT: position of the mobile menu is based on the size
and position of the header element. Any changes to margin, padding,
etc. of the header element will affect the position mobile menu.
Be sure to test the mobile menu on all screen sizes after making changes.
*/
.wth4-site-header {
	--background-color: var(--brand-black);
	--color: var(--brand-white);
}

.wth4-site-banner {
	--background-color: var(--brand-white);
}


.wth4-site-banner__link-container {
	--padding-bottom: 0.75rem;
	--padding-top: 0.75rem;
}

.wth4-site-banner__link,
a.wth4-site-banner__link,
.ui-page-theme-a a.wth4-site-banner__link,
.wth4-site-banner__link:visited,
a.wth4-site-banner__link:visited,
.ui-page-theme-a a.wth4-site-banner__link:visited {
	--color: var(--brand-black);
	--font-size: 1rem;
}

.wth4-site-banner__countdown-container {}

.wth4-site-banner__countdown-text {}

.wth4-site-banner__countdown {}

/* .timer-unit-label doesn't fit naming convention because it targets an element in timer-promo.js */
.wth4-site-banner__countdown .timer-unit-label {}

.wth4-site-header__desktop-utility-links-container {
	--align-items: start;
}

/* used for mobile header */
.wth4-site-header__mobile-utility-links-container,
.wth4-utility-links-container {}

.wth4-utility-links-container__link,
a.wth4-utility-links-container__link,
.ui-page-theme-a .wth4-utility-links-container__link,
.wth4-utility-links-container__link:visited,
a.wth4-utility-links-container__link:visited,
.ui-page-theme-a .wth4-utility-links-container__link:visited {}

.wth4-utility-links-container__link:hover,
a.wth4-utility-links-container__link:hover,
.ui-page-theme-a .wth4-utility-links-container__link:hover {}

.wth4-utility-links-container__link:active,
a.wth4-utility-links-container__link:active,
.ui-page-theme-a .wth4-utility-links-container__link:active {}

.ui-page-theme-a .wth4-utility-links-container__link--partner-home,
.ui-page-theme-a .wth4-utility-links-container__link--partner-home:visited,
.wth4-utility-links-container__link--partner-home,
.wth4-utility-links-container__link--partner-home:visited,
a.wth4-utility-links-container__link--partner-home,
a.wth4-utility-links-container__link--partner-home:visited {
	--font-size: 0.875rem;
}

.ui-page-theme-a .wth4-utility-links-container__link--partner-home:focus-visible,
.ui-page-theme-a .wth4-utility-links-container__link--partner-home:focus,
.ui-page-theme-a .wth4-utility-links-container__link--partner-home:hover,
.wth4-utility-links-container__link--partner-home:focus-visible,
.wth4-utility-links-container__link--partner-home:focus,
.wth4-utility-links-container__link--partner-home:hover,
a.wth4-utility-links-container__link--partner-home:focus-visible,
a.wth4-utility-links-container__link--partner-home:focus,
a.wth4-utility-links-container__link--partner-home:hover {}

.ui-page-theme-a .wth4-utility-links-container__link--partner-home:active,
.wth4-utility-links-container__link--partner-home:active,
a.wth4-utility-links-container__link--partner-home:active {}

.wth4-utility-links-container__button-container {}

.wth4-site-header__partner-container {}

.wth4-site-header__partner-container-link-list {}

.wth4-site-header__partner-container-link,
.ui-page-theme-a .wth4-site-header__partner-container-link,
.wth4-site-header__partner-container-link:visited,
.ui-page-theme-a .wth4-site-header__partner-container-link:visited {}

.wth4-site-header__partner-container-link:hover,
.ui-page-theme-a .wth4-site-header__partner-container-link:hover {}

.wth4-site-header__partner-container-link:focus,
.ui-page-theme-a .wth4-site-header__partner-container-link:focus,
.wth4-site-header__partner-container-link:focus-visible,
.ui-page-theme-a .wth4-site-header__partner-container-link:focus-visible {}

.wth4-site-header__content-container {}

.wth4-site-header__desktop-content-container {}

.wth4-site-header__desktop-nav-container {
	--align-items: start;
	min-height: 84px;
}

.wth4-site-header__mobile-content-container {}

.wth4-site-header__mobile-partner-home-link-container {
	--border-color: var(--brand-coral);
	--padding-bottom: 0.6rem;
	--padding-top: 0.6rem;
}

.wth4-site-header__mobile-partner-home-link,
a.wth4-site-header__mobile-partner-home-link,
.ui-page-theme-a a.wth4-site-header__mobile-partner-home-link,
.wth4-site-header__mobile-partner-home-link:visited,
a.wth4-site-header__mobile-partner-home-link:visited,
.ui-page-theme-a a.wth4-site-header__mobile-partner-home-link:visited {}

.wth4-site-header__booking-header-content-container {}

.wth4-site-header__booking-header-link-list-container {}

/* Where the site logo and booking engine header home link are siblings */
.wth4-site-header__logo+.wth4-site-header__booking-header-link-list-container {}

.wth4-site-header__booking-header-logo-container {}

.wth4-site-header__logo {
	align-self: center;
}

.wth4-site-header__logo-link {}

.wth4-site-header__logo-image {
	--max-width: clamp(160px, 23vw, 254px);
}

.wth4-site-header__phone-container {
	--align-items: center;
	--font-size: 0.875rem;
}

.wth4-site-header__phone-container--label-after {}

.wth4-site-header__phone-icon {}

.ui-page-theme-a .wth4-site-header__phone-link,
.wth4-site-header__phone-link,
a.wth4-site-header__phone-link {
	--font-weight: 700;
	--font-size: 0.875rem;
}

.wth4-site-header__phone-label {
	--font-size: 0.875rem;
	--font-weight: 700;
}

.wth4-site-header__phone-link:hover,
.wth4-site-header__phone-link:focus,
.wth4-site-header__phone-link:focus-visible,
.ui-page-theme-a .wth4-site-header__phone-link:hover,
.ui-page-theme-a .wth4-site-header__phone-link:focus,
.ui-page-theme-a .wth4-site-header__phone-link:focus-visible,
a.wth4-site-header__phone-link:hover,
a.wth4-site-header__phone-link:focus,
a.wth4-site-header__phone-link:focus-visible {}

.wth4-site-header__phone-link:active,
.ui-page-theme-a .wth4-site-header__phone-link:active,
a.wth4-site-header__phone-link:active {}

.wth4-site-header__phone-label {}

.wth4-site-header__list,
.wth4-mobile-menu__list {}

/******************************************************************************/

/**
* [Mega Menu]
*/

/******************************************************************************/
/* chained selector to target outer container of nav where .mega-menu class is
improperly applied to both. */
div.wth4-mega-menu {
	align-self: end;
	margin-left: 3.4%;
}

.wth4-mega-menu-list-container {}

/*
This element houses the entire contents of the mega menu.
The direct children are the <li> elements that contain the top-level nav buttons.
Becareful when adding styles that may propage to other ancestor elements.
*/
.wth4-mega-menu__list {}

/* this element is the link list within the mega menu content panels */
.wth4-mega-menu__link-list {}

.wth4-mega-menu-link,
a.wth4-mega-menu-link {
	--color: var(--brand-black);
	--font-size: 0.875rem;
}

.wth4-mega-menu-link:hover,
a.wth4-mega-menu-link:hover,
.wth4-mega-menu-link:focus,
a.wth4-mega-menu-link:focus {
	--color: var(--brand-black);
	--opacity: 1;
	--text-decoration: underline;
}

.wth4-mega-menu__content-panel {}

.wth4-mega-menu__marketing-placement {
	--background-color: var(--brand-springwood);
	--border-radius: 16px;
	--color: var(--brand-black);
	--font-size: clamp(1rem, 2.5vw, 1.5rem);
	--font-weight: 400;
}

.wth4-mega-menu__marketing-placement-button-container {}

.wth4-mega-menu__category-heading {
	--color: var(--brand-black);
	--font-size: 1.125rem;
	--text-transform: capitalize;
}

.wth4-mega-menu__button-container {}

.wth4-mega-menu-top-level-nav-button {}

/******************************************************************************/

/**
* [Mobile Menu]
*/

/******************************************************************************/
.wth4-mobile-menu {}

.wth4-mobile-menu__content-container {}

.wth4-mobile-menu__category-heading {
	--color: var(--brand-black);
	--font-size: 1.125rem;
	--font-weight: normal;
	--text-transform: capitalize;
}

.wth4-mobile-menu__slider {}

.wth4-mobile-menu__back-button-panel {}

.wth4-mobile-menu__back-button-container {}

/******************************************************************************/

/**
* [Footer]
*/

/******************************************************************************/
/* Outer footer container */
.wth-footer-dotcms {}

/* Inner footer container */
.wth4-site-footer {
	--background-color: var(--brand-black);
}

.wth4-site-footer--booking-footer {}

.wth4-site-footer__partner-container {}

.wth4-site-footer__main-content-container {}

.wth4-site-footer__main-content {
	--max-width: var(--brand-content-max-width);
	--padding-bottom: 0rem;
	--padding-left: 1.25rem;
	--padding-right: 1.25rem;
	--padding-top: 2.5rem;
	justify-content: space-between;
}

/* See stack layout pattern */
.wth4-site-footer__link-group>*+* {
	--margin-top: 1.5rem;
}

/* See stack layout pattern */
.wth4-site-footer__list>*+* {
	--margin-top: 1rem;
}

.wth4-site-footer__heading {}

.wth4-site-footer__partner-content {}

.wth4-site-footer__legal-copy {
	--color: var(--brand-white);
	--font-size: 0.875rem;
}

.wth4-site-footer__list--inline {}

.wth4-site-footer__link-group-container,
.wth4-site-footer__link-groups-container {
	padding-bottom: 1rem;
}

.wth4-site-footer__link-groups-container--primary {}

.wth4-site-footer__link-groups-container--secondary {}

.wth4-site-footer__email-signup {}

.wth4-site-footer__list-heading {
	--color: var(--brand-white);
	--font-size: 1.125rem;
	--font-weight: bold;
	--text-transform: capitalize;
}

.wth4-site-footer__icon-group {}

.wth4-site-footer__email-signup {}

.wth4-site-footer__email-signup-heading {}

.wth4-site-footer__email-signup-copy {}

.wth4-site-footer__email-signup-link,
.wth4-site-footer__email-signup-link:visited,
a.wth4-site-footer__email-signup-link,
a.wth4-site-footer__email-signup-link:visited {}

.wth4-site-footer__email-signup-link:focus,
.wth4-site-footer__email-signup-link:hover,
a.wth4-site-footer__email-signup-link:focus,
a.wth4-site-footer__email-signup-link:hover {}

.wth4-site-footer__icon-group-link,
a.wth4-site-footer__icon-group-link,
.wth4-site-footer__icon-group-link:visited,
a.wth4-site-footer__icon-group-link:visited {}

.wth4-site-footer__icon-group-link:hover,
a.wth4-site-footer__icon-group-link:hover,
.wth4-site-footer__icon-group-link:focus,
a.wth4-site-footer__icon-group-link:focus {}

.wth4-site-footer__icon-group-link:active,
a.wth4-site-footer__icon-group-link:active {}

.wth4-site-footer__link,
a.wth4-site-footer__link,
.wth4-site-footer__link:visited,
a.wth4-site-footer__link:visited {
	--color: var(--brand-white);
}

.wth4-site-footer__link:hover,
a.wth4-site-footer__link:hover,
.wth4-site-footer__link:focus,
a.wth4-site-footer__link:focus {
	--color: var(--brand-white);
	--text-decoration-line: underline;
}

.wth4-site-footer__link:active,
a.wth4-site-footer__link:active {
	--color: var(--brand-white);
}

.wth4-site-footer__logo-container {
	background-color: var(--brand-white);
	padding-bottom: 2rem;
	padding-top: 0.5rem;
}

.wth4-site-footer__logo-image {
	--max-width: var(--brand-content-max-width);
	box-sizing: border-box;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.wth4-site-footer__feature-container {}

.wth4-site-footer__feature {}

.wth4-site-footer__feature-heading {}

.wth4-site-footer__feature-icon-list {}

.wth4-site-footer__feature-icon-list-item {}

.wth4-site-footer__feature-copy {}

.wth4-site-footer__feature-link,
a.wth4-site-footer__feature-link,
.ui-page-theme-a .wth4-site-footer__feature-link,
.wth4-site-footer__feature-link:visited,
a.wth4-site-footer__feature-link:visited,
.ui-page-theme-a .wth4-site-footer__feature-link:visited {}

.wth4-site-footer__feature-image {}

.wth4-site-footer__phone-container {}

.wth4-site-footer__phone-link,
.wth4-site-footer__phone-link:visited,
.ui-page-theme-a .wth4-site-footer__phone-link,
.ui-page-theme-a .wwth4-site-footer__phone-link:visited,
a.wth4-site-footer__phone-link,
a.wth4-site-footer__phone-link {}

.wth4-site-footer__phone-link:hover,
.wth4-site-footer__phone-link:focus,
.wth4-site-footer__phone-link:focus-visible,
.ui-page-theme-a .wth4-site-footer__phone-link:hover,
.ui-page-theme-a .wth4-site-footer__phone-link:focus,
.ui-page-theme-a .wth4-site-footer__phone-link:focus-visible,
a.wth4-site-footer__phone-link:hover,
a.wth4-site-footer__phone-link:focus,
a.wth4-site-footer__phone-link:focus-visible {}

.wth4-site-footer__phone-link:active,
.ui-page-theme-a .wth4-site-footer__phone-link:active,
a.wth4-site-footer__phone-link:active {}


/******************************************************************************/

/**
* [Uncategorized]
*/

/******************************************************************************/
.wth4-divider {
	--border-color: var(--brand-coral);
}

.wth4-vertical-divider {}

.wth4-svg-icon {}

.wth4-img-icon {}

.wth4-icon-link-container {}

/******************************************************************************/

/**
* [Javascript Dependent Styles]
*/

/******************************************************************************/

.js-mobile-menu {}

.js-mobile-menu--open {}

.js-slider {}

.js-slider--open {}

.js-slider--closed {}

.js-mobile-menu__back-button-panel {}

.js-mobile-menu__back-button-panel--open {}

.js-mega-menu__content-panel {}

.js-mega-menu__content-panel--open {}


/******************************************************************************/
/* Media Queries */

/******************************************************************************/
@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {

	.wth4-mega-menu__content-panel {
		/* Left offset is based on the position of #mega-menu, minus site logo width and margin */
		left: calc(var(--mega-menu-left-offset) - 254px - 50px);
	}

	.wth4-site-footer__main-content {
		display: flex !important;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.wth4-site-footer__legal-copy {
		flex-basis: 100%;
	}

}

@media (min-width: 1600px) {}