/* 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; } }

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

body { color: #000022; }

.card-navBG { background: #000022; border-bottom: 1px solid #4F6093; }

.explore-close { background:  #000022; border-bottom: 1px solid transparent; }
.explore-link { background-color: #1A1A39; border-bottom: 1px solid #4F6093;}
.explore-link-external { background-color: #fff; }

.hh-content { width: 40%; }
.hh-welcomeBG { background: rgba(0,51,102, .75); height: 100% }
.hh-welcome { transform: none; }
.hh-welcome img { height: auto; max-width: 100%; width: auto }
.hhw-image { align-self: center; margin: 0 0 30px; transform: none; width: auto; }
.hhw-text { text-align: center; }
.hhw-text h1 { margin-left: auto; margin-right: auto; max-width: 500px; width: 100%; }

/* Animation */
@-webkit-keyframes fadeInLeft {
	from {
		opacity:0;
		-webkit-transform: translatex(-25px);
		-moz-transform: translatex(-25px);
		-o-transform: translatex(-25px);
		transform: translatex(-25px);
	}
	to {
		opacity:1;
		-webkit-transform: translatex(-20px);
		-moz-transform: translatex(-20px);
		-o-transform: translatex(-20px);
		transform: translatex(-20px);
	}
}

@-moz-keyframes fadeInLeft {
	from {
		opacity:0;
		-webkit-transform: translatex(-25px);
		-moz-transform: translatex(-25px);
		-o-transform: translatex(-25px);
		transform: translatex(-25px);
	}
	to {
		opacity:1;
		-webkit-transform: translatex(-20px);
		-moz-transform: translatex(-20px);
		-o-transform: translatex(-20px);
		transform: translatex(-20px);
	}
}

@keyframes fadeInLeft {
	from {
		opacity:0;
		-webkit-transform: translatex(-25px);
		-moz-transform: translatex(-25px);
		-o-transform: translatex(-25px);
		transform: translatex(-25px);
	}
	to {
		opacity:1;
		-webkit-transform: translatex(-20px);
		-moz-transform: translatex(-20px);
		-o-transform: translatex(-20px);
		transform: translatex(-20px);
	}
}

.in-left {
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 2s;
	-o-animation-duration:1s;
	animation-delay: 1.8s;
	margin-left: 45px;
}

@-webkit-keyframes fadeInTop {
	from {
		opacity:0;
		-webkit-transform: translatey(15px);
		-moz-transform: translatey(15px);
		-o-transform: translatey(15px);
		transform: translatey(15px);
	}
	to {
		opacity:1;
		-webkit-transform: translatey(0);
		-moz-transform: translatey(0);
		-o-transform: translatey(0);
		transform: translatey(0);
	}
}

@-moz-keyframes fadeInTop {
	from {
		opacity:0;
		-webkit-transform: translatey(15px);
		-moz-transform: translatey(15px);
		-o-transform: translatey(15px);
		transform: translatey(15px);
	}
	to {
		opacity:1; 
		-webkit-transform: translatey(0);
		-moz-transform: translatey(0);
		-o-transform: translatey(0);
		transform: translatey(0);
	}
}

@keyframes fadeInTop {
	from {
		opacity:0;
		-webkit-transform: translatey(15px);
		-moz-transform: translatey(15px);
		-o-transform: translatey(15px);
		transform: translatey(15px);
	}
	to {
		opacity:1;
		-webkit-transform: translatey(0);
		-moz-transform: translatey(0);
		-o-transform: translatey(0);
		transform: translatey(0);
	}
}

.in-top {
	-webkit-animation-name: fadeInTop;
	-moz-animation-name: fadeInTop;
	-o-animation-name: fadeInTop;
	animation-name: fadeInTop;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 2s;
	-o-animation-duration:1s;
	animation-delay: 2s;
	margin-left: 45px;
	display: none;
}

.hhw-stamp-card { align-items: center; display: flex; justify-content: center; margin-bottom: 30px; position: relative; }
.hhw-stamp { height: 100%; max-height: 310px; text-align: center; max-width: 333px; width: 100%; }
.hhw-stamp svg { display: block; }
.hhw-card { max-width: 165px; position: absolute; width: 100% }

.acc-head { color: #003366; }

.benefit-category { border: 1px solid #003366; border-left: 3px solid #003366; }
.bc-head { background-color: #003366; }
.bc-desc { color: #000022; }

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

.fb-head {  background-color: #003366; }

.greyBG { background: #003366; }
.blueBG { background: #757679; }
.greyDarkBg { background: #757679; }
.btn { background: #757679; border-color: #FFFFFF; }
.btn:hover { border-color: #757679; color: #757679; }

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

.amex-offersBG { background-color: #003366; }
.amex-offersBG .btn { background-color: #003366; border-color: #fff; }
.amex-offersBG .btn:hover { background:#fff;  color: #003366; }
.amex-offers  { background-image: url(../img/ribbon-white10.svg); }

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

.enroll-flag { background: #2D1B46; }

.sc-items { border-color: #003366; }

.mr-item { background-color: #003366; }
.mr-item p a { color: #fff; }

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

/* index.html */
.home-heroBG { background-image:url(../deltablue/img/home-hero.jpg?v=2); }
.not-a-member, .not-a-member .btn { background:  #000022;}
.not-a-member .btn:hover { background: #fff; border-color: #000022; color: #000022; }

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

/* accelerator images on earn-rewards-points.html */
.acc2xMiles { background-image:url(../deltablue/img/rewards-2xMiles.jpg?v=1); }
.acc2xDinning { background-image:url(../deltablue/img/rewards-2xDining.jpg?v=1); }
.acc1xEverythingElse { background-image:url(../deltablue/img/rewards-1xEverythingElse.jpg?v=1); }
.ai-img { background-image: url(../deltablue/img/rewards-1xEverythingElse.jpg?v=1); }

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

/* Card material banner discover-your-benefits.html */
.card-material { background-color: #003366; background-image: url(../deltablue/img/card-plastic.jpg?v=1); background-repeat: no-repeat; background-position: 1px 1px; background-size: contain; margin-bottom: var(--sectionBottom); outline: 1px solid #fff; outline-offset: -3px; padding: 40px 20px 40px 285px; } 
.card-material h2 { color: #FFFFFF; font-size: calc(2rem * .625); font-weight: 500; line-height: 1.2; margin: .8em 0; }
.card-material p { color: #FFFFFF; font-size: calc(1.6rem * .625); max-width: 770px; width: 100%; }

/* send-and-split on set-up-and-payments.html */
.send-and-split { align-items: flex-start; border: 0; display: grid; gap: 100px; grid-template-columns: repeat(2, 1fr); justify-content: space-between; padding-block: 60px; }
.send-and-split--holder { background-size: cover; grid-column-start: 2; grid-row-start: 1; max-width: 590px; padding: 0; position: relative; width: 100%; }
.send-and-split--img { background-image: url(../deltablue/img/setup-sendAndSplit.jpg?v=1); background-repeat: no-repeat; background-size: cover; border: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 80%; }
.send-and-split--content { background-color: #fff; grid-column-start: 1; grid-row-start: 1; margin-left: auto; max-width: 515px; padding: 40px 30px; position: relative; width: 100%; z-index: 1; }
.send-and-split--content p { font-size: calc(1.4rem * .625); }
.send-and-split .label { background-color: #2D1B46; color: #fff; display: inline-block; font-size: calc(1.4rem * .625); font-style: normal; font-weight: var(--font-weight-medium); margin-bottom: 15px; padding: 10px 20px; text-align: center; text-transform: uppercase; }
.send-and-split--headline { color: #2D1B46; font-size: calc(3rem * .625); }
.send-and-split--container { padding: 25px 0; }
.send-and-split--container:not(:last-child) { border-bottom: 1px solid rgba(51, 51, 51, 0.15); }
.send-and-split--container:last-child { padding-bottom: 0; }
.send-and-split--title { color: #2D1B46; font-weight: 500; margin-bottom: 15px; }
.send-and-split--container p:not(:last-child) { margin-bottom: 1em; }

.icon-split { background-image: url(../img/icon-split-dark-blue.svg); }
.icon-send { background-image: url(../img/icon-send-dark-blue.svg); }
.sas-img { background-image:url(../deltablue/img/setup-sendAndSplit.jpg?v=1) }

.no-padding { padding: 0; }
.margin-bottom { margin-bottom: var(--sectionBottom); }

@media all and (min-width: 1280px) {
	.hhw-image, .hhw-stamp-card { min-height: 311px; }
}

@media all and (max-width: 1279px) {
	.hh-content { width: 60%; }
	.hhw-image { width: 230px; }
	.hhw-text h1 { margin-top: 0; }
	.hhw-stamp-card { margin-bottom: 20px; margin-left: auto; margin-right: auto; max-width: 226px; }
	.in-left { margin-top: 15px; }
	.experience-delta-text { padding: 60px 60px 60px 0; }
}

@media all and (max-width: 1024px) {
	.send-and-split { display: block; margin-bottom: 40px; }
	.send-and-split--holder {  margin: 0 auto; max-width: 600px; width: 100%; }
	.send-and-split--content { margin: -150px auto 0; max-width: 575px; padding: 25px 20px; width: 90%; }
}

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

@media all and (min-width: 751px) {
	.hh-content { left: 0; top: 0; }
	.hh-welcome { flex-direction: column; height: 100%; justify-content: center; width: 100%; }
}

@media all and (max-width: 750px) {
	.home-heroBG { background-image: url(../deltablue/img/home-hero-mobile.jpg?v=1); }
	.hh-content { width: 100%; }
	.hh-welcomeBG { height: 140px; }
	.hh-welcome { align-items: center; flex-direction: row-reverse; height: 100%; }
	.hhw-image { margin: 0; width: 195px; }
	.hhw-text { margin-right: 15px; margin-top: 0; text-align: left; }
	.in-left { display: none; }
	.in-top { display: block; }
	.hhw-stamp-card { height: calc(100% - 20px); margin-bottom: 10px; margin-top: 10px; }
	.hhw-stamp { height: 100%; }
}

@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(../deltablue/img/benefits-tripsAndTravel.jpg?v=1); }
	.ob-forTheExperience { background-image:url(../deltablue/img/benefits-forTheExperience.jpg?v=1); }
	.ob-forASafeJourney { background-image:url(../deltablue/img/benefits-forASafeJourney.jpg?v=1); }
	.ob-forEverydaySecurity { background-image:url(../deltablue/img/benefits-forEverydaySecurity.jpg?v=1); }
	.card-material { background-size: 50%; padding: 40% 40px 40px; }

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

@media all and (max-width: 500px) {
	.hhw-stamp-card { flex-shrink: 0; width: 30%; }
	.hhw-text { width: 70%; }
}