/**
 * Customer Portal banner — [portal-banner]
 * > 767px : desktop image, absolute top-right of the hero
 * 481–767 : desktop image, fixed popup docked 20px from the top, 20px sides
 * <= 480  : mobile image, fixed popup centred, 20px sides, 50% white backdrop
 */
.portal-banner[hidden] { display: none !important; }

#parallax-hero-container { position: relative; }

.portal-banner {
	position: absolute;
	top: 140px;
	right: 0;
	z-index: 20;
	width: min(47vw, 580px);
	line-height: 0;
}

.portal-banner__link { display: block; }

.portal-banner__img {
	display: block;
	width: 100%;
	height: auto;
}

.portal-banner__close {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 6px;
	margin: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
}

.portal-banner__close img {
	display: block;
	width: 24.5px;
	height: 24.5px;
}

.portal-banner__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 767px) {

	/* 481–767: floating popup docked near the top */
	.portal-banner {
		position: fixed;
		top: 20px;
		left: 20px;
		right: 20px;
		z-index: 1000;
		width: auto;
		max-width: 100vw;
	}

	.portal-banner__close {
		top: 2px;
		right: 2px;
	}

	.portal-banner__close img {
		width: 13.5px;
		height: 13.5px;
	}
}

@media (max-width: 480px) {

	/* <= 480: centred popup with a 50% white backdrop (spread shadow) */
	.portal-banner {
		top: 50%;
		transform: translateY(-50%);
		box-shadow: 0 0 0 100vmax rgba(255, 255, 255, 0.5);
	}
}