/* needed for Apply Now button */

html, body { overflow-x: visible; } /* overriding what's in dg.css, but not sure why it's there */
/*
.card-nav { padding-right: 115px; }
.explore-close { padding-right: 115px; }
.explore-links { right: 115px; max-width: 270px; }
*/
.nav-link-applyNow { position: absolute !important; right: 0; z-index: 6;height: 50px; display: flex; align-items: center; color: #fff; text-decoration: none; font-weight: 500;  }
@media (max-width: 1280px) {.nav-link-applyNow { right: 15px; } }

.blueBG:has(.join-now) { padding: 0; margin: 0; }

.join-now {
	text-align: center;
	padding: 12px 0 14px 0;
	position: relative;
	background: #00175A;
	color: #fff;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

	.join-now a { text-decoration: underline; color: #fff;}
	
	.join-now-close { color: #fff; position: absolute; width: 40px; height: 40px; border: none; cursor: pointer; right: 5px; top: 2px; background: none; font-size: 2em;}

	@media all and (max-width: 500px) {
		.join-now { font-size: .9em; text-align: left; padding: 1em 0 1em .7em; }
	}

/* ----------------- */

body { color: #333333; }

.hhw-text h1 { text-wrap: balance; }
.hhw-image {
	position: absolute;
	transform: translateY(-75px);

}
.hhw-text {
	margin-left: 380px;
	padding-bottom: 20px;
}

.hh-flourish { opacity: .4; }

.card-navBG { background: #104C97; border-bottom: 1px solid #5385BD; }

.explore-close { background: #104C97; border-bottom: 1px solid transparent; }
.explore-link { background-color: #2D5EA2; border-bottom: 1px solid #4f6093;}
.explore-links { display: none; }
.explore-links-open { display: block; }
.explore-link-external { background-color: #fff; }

.hh-welcomeBG { background: rgba(0,111,207, .7); height: fit-content; }

.hf-subhead { color: #AED5F4;}

.acc-head { color: #104C97; }

/* banner */
.banner { display: grid; grid-template-columns: 60fr 40fr; margin-bottom: var(--sectionBottom); overflow: hidden; position: relative; }
.banner-content { background-color: #00263a; color: #fff; padding: 30px 75px 30px 45px; }
.banner-content::after {  border-bottom: 175px solid transparent;  border-left: 35px solid #00263a; border-top: 155px solid transparent; content: ''; display: inline-block; height: 0; left: 60%; position: absolute; top: 50%; transform: translateY(-50%); width: 0; z-index: 1; }
.banner-content h2 { font-size: calc(2.5rem * .625); font-weight: 700; letter-spacing: -1px; line-height: 1.4; margin-bottom: 20px; }
.banner-content p { margin-bottom: 35px; } 
.banner-footer { align-items: center; display: grid; gap: 20px; grid-template-columns: repeat(2, auto); justify-content: space-between; }
.banner-footer p { margin-bottom: 0; }
.banner-footer .btn-white { background-color: #fff; border-radius: 3px; color: #00263a; font-size: calc(2rem * .625); font-weight: 700; margin: 0; padding: 0.45em 2.3em; text-align: center; text-transform: none; }
.banner-footer .btn-white:focus, .banner-footer .btn-white:hover { border-color: #fff; color: #00263a; }
.banner-image { background-image: url(../hiltonhonors/img/banner.jpg?v=0); background-position: center; background-repeat: no-repeat; background-size: cover; display: grid; justify-content: flex-end; padding: 20px; position: relative; }
.banner-image .location-label { background: none; bottom: 20px; color: #00263a; left: initial; padding: 0; right: 25px; }

.benefit-category { border: 1px solid #104C97; border-left: 3px solid #104C97; }
.bc-head { background-color: #104C97; }

.qs-icons { background-image: linear-gradient(#104C97,#104C97); }
/* .qs-icon { border: 3px solid #006FCF; background-image: url(../img/check-blue.svg); } */

.fb-head {  background-color: #104C97; }

.greyBG { background: #104C97; }

.sc-item svg path { fill: #00175A; }

.amex-offersBG { background-color: #104C97; }
.amex-offers  { background-image: url(../img/ribbon-white10.svg); }
.amex-offers .btn { background: #006FCF; }
.amex-offers .btn:hover { background: #FFFFFF; border-color: #006FCF; color: #006FCF; }

.tct-box h2, .tct-box h3 { color: #000022; }

.sc-items { border: 2px solid #104C97; }
.sc-item svg path { fill: #104C97; }

.mr-item { background-color: #00175A; }

.shop-and-dine { border: 2px solid #006FCF; }

/* small card in sticky nav - all four HTML pages */
.cn-card { background-image: url(../hiltonhonors/img/card-nav.png?v=2); }

/* index.html */
.home-heroBG { background-image:url(../hiltonhonors/img/home-hero.jpg?v=2); }
.not-a-member { background: #104C97; }

/* desktop-only left column image in MR section on earn-rewards-points.html */
.mi-img {  background-image: url(../hiltonhonors/img/rewards-MRHero.jpg?v=0); }

/* accelerator images on earn-rewards-points.html */
.acc7xHotels { background-image:url(../hiltonhonors/img/rewards-7xHotels.jpg?v=0); }
.acc5xGas { background-image:url(../hiltonhonors/img/rewards-5xGas.jpg?v=0); }
.acc5xDining { background-image:url(../hiltonhonors/img/rewards-5xDining.jpg?v=0); }
.acc3xEverythingElse { background-image:url(../hiltonhonors/img/rewards-3xEverythingElse.jpg?v=2); }
.ai-img { background-image: url(../hiltonhonors/img/rewards-1xEverythingElse.jpg?v=0); }

/* feature benefits on discover-your-benefits.html */
.fb-featured1 { background-image:url(../hiltonhonors/img/benefits-featured1.jpg?v=2)}
.fb-featured2 { background-image:url(../hiltonhonors/img/benefits-featured2.jpg?v=0)}

/* send-and-split on set-up-and-payments.html */
.send-and-split-text { background: #FFFFFF; color: #00175A; }
.icon-split { background-image: url(../img/icon-split-dark-blue.svg); }
.icon-send { background-image: url(../img/icon-send-dark-blue.svg); }
.mri-text .cta-text { background-image: url(../img/arrow.svg); color: #00175A; }
.sas-img { background-image:url(../hiltonhonors/img/setup-sendAndSplit.jpg?v=0) }

.btn { background: #104C97; }
.btn:hover { border-color: #104C97; color: #104C97; }

.the-app h2 { font-family: var(--font-secondary-amex); font-size: calc(3.3rem * .625); margin-bottom: 1em; font-weight: var(--font-weight-default); color: var(--color-white); }
.app-text h3 { font-weight: var(--font-weight-medium); margin-bottom: .5em; font-size: inherit; font-family: inherit; }

.ob-detail .ob-summary-heading {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;

	@media (max-width: 700px) {
		flex-direction: row;
		justify-content: space-between;
	}
}

.ob-detail[open] h3 {
	border-bottom: none;
}

.ob-detail-content {
	margin-bottom: 0;
	@media (max-width: 700px) {
		background: #f7f7f7;
		box-shadow: inset -4px -4px 0 var(--color-white), inset 4px 4px 0 var(--color-white);
		border-left: 1px solid #ebebeb;
		border-right: 1px solid #ebebeb;
		padding: 20px 20px 24px 20px;
	}
}

@media all and (max-width: 1000px) {

	.banner { grid-template-columns: repeat(1, 1fr); }
	.banner-content { padding: 20px ; }
	.banner-content::after { display: none; }
	.banner-footer { grid-template-columns: repeat(1, 1fr); }
	.banner-image { height: 300px; }

	.hhw-image {
		position: absolute;
		transform: translateY(-70px);
	}

	.hhw-text {
		margin-left: 300px;
		padding-bottom: 20px;
	}
}

@media all and (max-width: 850px) {
	.fb-head {  background-color: rgba(0,23,90,.8); }
}

@media all and (max-width: 750px) {
	.hhw-image {
		position: absolute;
		left: 50%;
		transform: translate(-50%, -110%);
	}

	.hh-welcome {
		transform: initial;
	}


	.hhw-text {
		margin-top: 0;
		margin-left: initial;
		padding-top: 15px;
		padding-bottom: 28px;
	}
}

@media all and (max-width: 700px) {
	/* discover-your-benefits.html mobile headers for other benefits - desktop versions are on page */
	.ob-tripsAndTravel { background-image:url(../hiltonhonors/img/benefits-tripsAndTravel.jpg?v=0); }
	.ob-forTheExperience { background-image:url(../hiltonhonors/img/benefits-forTheExperience.jpg?v=0); }
	.ob-forASafeJourney { background-image:url(../hiltonhonors/img/benefits-forASafeJourney.jpg?v=0); }
	.ob-forEverydaySecurity { background-image:url(../hiltonhonors/img/benefits-forEverydaySecurity.jpg?v=0); }

	.hh-flourish { opacity: .7; }
}