.site-banner {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	padding-left: var(--padding-container);
	padding-right: var(--padding-container);
	--bg-container: 64px;
}

.site-banner::before {
	position: absolute;
	top: 0;
	left: var(--bg-container);
	z-index: 1;
	width: calc(100% - (var(--bg-container) * 2));
	pointer-events: none;
}

.site-banner > * {
	position: relative;
	z-index: 2;
}

.site-banner .content-banner {
	width: 100%;
	margin-bottom: 48px;
	line-height: var(--lineheight);
}

.content-banner .button-group-banner {
	margin-top: 28px;
}

.button-group-banner .btn-banner-primary {
	width: 274px;
	max-width: 100%;
}

.button-group-banner .btn-banner-primary .cta-whbutton {
	width: 100%;
	justify-content: center;
}

.site-banner .media-banner {
	--size-offset-media: 122px;
	display: flex;
	overflow: hidden;
	border-radius: 30px;
}

.media-banner .video-banner {
	width: 100%;
}

.video-banner .plyr.plyr--video > .plyr__control {
	top: 40%;
	width: 75px;
	height: 75px;
}

.site-banner .site-breadcrumbs {
	position: absolute;
	top: 24px;
	left: var(--padding-container);
	width: auto;
	padding: 0;
}

.site-banner.banner-display-detail .site-breadcrumbs *,
.site-banner.banner-display-detail_content_mobile .site-breadcrumbs * {
	color: var(--white);
}

.site-banner.banner-display-detail .site-breadcrumbs .breadcrumb-seperator,
.site-banner.banner-display-detail_content_mobile .site-breadcrumbs .breadcrumb-seperator {
	background-image: url('/wp-content/themes/whello/assets/icons/arrow-chevrongray-right.svg');
	opacity: 1;
}

.site-banner.banner-display-detail,
.site-banner.banner-display-detail_content_mobile {
	--bg-container: 0px;
}

.site-banner.banner-display-detail:before,
.site-banner.banner-display-detail_content_mobile:before {
	content: '';
	background: var(--blue) url('/wp-content/themes/whello/assets/images/triangle-pattern.png');
}

.site-banner.banner-display-detail:before {
	height: 428px;
	max-height: calc(100% - 20px);
}

.site-banner.banner-display-detail_content_mobile:before {
	height: calc(100% - 132px);
}

.site-banner.banner-display-detail .content-banner,
.site-banner.banner-display-detail_content_mobile .content-banner {
	color: var(--white);
	text-align: center;
}

.site-banner.banner-display-simple {
	padding-bottom: 128px;
}

.site-banner.banner-display-simple:before {
	content: '';
	min-height: inherit;
	background: var(--green-100) var(--bg-pattern) center/cover no-repeat;
	border-bottom-left-radius: var(--rounded-2xl);
	border-bottom-right-radius: var(--rounded-2xl);
}

.site-banner.banner-display-detail .media-banner,
.site-banner.banner-display-detail_content_mobile .media-banner,
.site-banner.banner-display-simple .media-banner {
	width: calc(100% + (var(--size-offset-media) * 2));
	margin-left: calc(var(--size-offset-media) * -1);
	margin-right: calc(var(--size-offset-media) * -1);
}

.site-banner.banner-display-special_image .content-banner {
	width: 525px;
	max-width: 100%;
}

.site-banner:not(.banner-display-special_image) .content-banner h1 {
	margin-bottom: 8px;
}

.site-banner.banner-display-special_image .media-banner img {
	object-fit: contain;
	object-position: top right;
}

.site-banner.banner-display-special_image .content-banner {
	margin-bottom: 0;
}

.site-banner .search-form {
	position: relative;
	margin-top: 20px;
	max-width: 400px;
}

.site-banner .search-form .search-submit {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	width: 60px;
	height: 100%;
	padding: 0;
	border-radius: var(--rounded-full);
	color: var(--transparent);
	background: var(--transparent) url(/wp-content/themes/whello/assets/images/icon-search-black.svg) center/18px
		no-repeat;
}

.site-banner-register {
	justify-content: space-between;
	align-items: center;
}

.site-banner-register.banner-display-detail:before {
	max-height: 100%;
}

.site-banner-register .content-banner {
	margin-bottom: 0;
}

.list-usp-banner {
	width: 100%;
	max-width: 480px;
	margin: 22px auto 0;
	padding: 14px;
	border-radius: var(--rounded-md);
	background-color: var(--white);
	color: var(--black);
	font-size: var(--text-sm);
	text-align: left;
}

.list-usp-banner li {
	padding-left: 24px;
}

.list-usp-banner li:before {
	width: 16px;
	height: 16px;
}

@media all and (min-width: 901px) {
	.media-banner .video-banner.video-banner-mobile,
	.media-banner .thumbnail-banner.thumbnail-banner-mobile {
		display: none;
	}

	.site-banner.banner-display-detail_content_mobile .content-banner {
		display: none;
	}

	.site-banner.banner-display-special_image .media-banner {
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
	}

	.site-banner.site-banner-register {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.site-banner-register h1,
	.site-banner-register h2 {
		font-size: var(--text-2xl);
	}

	.site-banner.site-banner-register .content-banner,
	.site-banner.site-banner-register .list-usp-banner {
		max-width: calc(50% - 32px);
	}

	.site-banner.site-banner-register .content-banner {
		text-align: left;
	}
	.site-banner.site-banner-register .list-usp-banner {
		padding: 32px;
	}
}

@media all and (min-width: 1200px) {
	.site-banner {
		padding-top: 128px;
	}

	.site-banner.banner-display-detail_content_mobile {
		padding-top: 58px;
	}

	.site-banner.banner-display-simple {
		/* min-height: 344px; */
		min-height: 377px;
	}

	.site-banner.banner-display-simple:before {
		height: calc(100% - 178px);
	}

	.site-banner.banner-display-special_image {
		min-height: 648px;
	}
}

@media all and (max-width: 1599px) {
	.site-banner .media-banner {
		--size-offset-media: 24px;
	}
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
	.site-banner {
		--bg-container: 24px;
	}
}

@media all and (min-width: 901px) and (max-width: 1199px) {
	.site-banner.banner-display-special_image {
		min-height: 400px;
	}
}

@media all and (max-width: 1199px) {
	.site-banner {
		--bg-container: 0px;
		padding-top: 64px;
	}

	.site-banner.banner-display-simple {
		/* min-height: 364px; */
		min-height: 312px;
	}

	.site-banner.banner-display-simple:before {
		height: calc(100% - var(--padding-container));
	}

	.content-banner h1,
	.content-banner h2 {
		font-weight: 900;
	}
}

@media all and (max-width: 900px) {
	.media-banner .video-banner-mobile ~ .video-banner.video-banner-desktop,
	.media-banner .thumbnail-banner-mobile ~ .video-banner.video-banner-desktop,
	.media-banner .thumbnail-banner-mobile ~ .thumbnail-banner.thumbnail-banner-desktop {
		display: none;
	}

	.site-banner.banner-display-detail .content-banner,
	.site-banner.banner-display-detail_content_mobile .content-banner {
		max-width: 550px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}

	.site-banner .media-banner {
		min-height: 254px;
	}

	.site-banner.banner-display-special_image {
		padding-top: var(--padding-container);
		padding-bottom: 64px;
	}

	.site-banner.banner-display-special_image .media-banner {
		order: -1;
		width: calc(100% + var(--padding-container));
		margin-top: calc(var(--padding-container) * -1);
		margin-right: calc(var(--padding-container) * -1);
		margin-bottom: 28px;
	}

	.site-banner-register h1,
	.site-banner-register h2 {
		font-size: var(--text-xl);
	}

	.site-banner.site-banner-register {
		padding-top: 28px;
		padding-bottom: 28px;
	}
}