#homeVideoBanner {
	width: 100%;
	height: calc(100vh - 100px);
	overflow: hidden;
	text-align: center;
	display: block;
	/*margin-top: 100px;*/
	position: relative;
}

/*#homeVideoBanner::before {
	background: red;
	width: 1rem;
	height: 1rem;
	top: 0;
	left: 0;
	content: "X";
}*/
/*#homeVideoBanner #videoBannerOverlay {
	position: absolute;
	max-width: 1200px;
	left: 40%;
	transform: translate(-50%, -10%);
	display: flex;
	height: 100%;
	align-items: flex-start;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	margin-top: 100px;
	top: 20%;
}*/


#homeVideoBanner #videoBannerOverlay {
	position: relative;
	display: flex;
	height: 100%;
	align-items: flex-start;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	margin: auto;
	top: 20%;
	left: 10%;
	/* margin-left: 100px; */
	z-index: 1;
	/* bottom: calc(50% / 2); */
}

#homeVideoBanner video {
	min-width: 100%;
	min-height: auto;
	position: relative;
	left: 50%;
	right: 0;
	transform: translate(-50%, 0);
}

#homeVideoBanner h1 {
	color: #fff;
	text-align: left;
	/*	font-weight: 100;
	font-size: 3rem;*/
	width: 22ch;
	/*text-shadow: 0.2px 0.2px 2px #2b2a29cc;*/
}



@media (max-width:576px) {
	#homeVideoBanner h1 {
		width: 100%;
	}

	#homeVideoBanner {
		height: 50vh !important;
	}

	span.abk-circle.bubbles.circle-3,
	span.abk-circle.bubbles.circle-4 {
		display: none;
	}
}

@media (min-width:577px) and (max-width:992px) {
	span.abk-circle.bubbles.circle-3 {
		left: 130px;
		bottom: 15%;
	}

	span.abk-circle.bubbles.circle-4 {
		right: 8%;
		bottom: 62%;
	}
}

#homeVideoBanner p {
	color: #fff;
	max-width: 45ch;
	text-align: left;
	/*text-shadow: 0.2px 0.2px 2px #2b2a29cc;*/
}

.video-banner-outerlay {
	/* background: #2b2a2970; */
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
}

#movilBannerImg {
	display: none;
}

.yellow-button {
	background-color: #fdb913 !important; /*#FFC800;*/
	border-radius: 40px;
	padding: 12px 30px;
	width: fit-content;
	margin: 0 0 0 0;
	color: #2B2A29;
	text-decoration: none;
}

.yellow-button:hover {
	color: #fff;
	background-color: #468ac9 !important; /*#2C69DE;*/
}

.ola-onda {

	margin-top: -50px;

}


.abk-circle {
	background-color: red;
	position: absolute;
	opacity: 0.8;
	border-radius: 50%;



}

.abk-circle.circle-1 {
	/*transform: translate3d(-50%, 50%, 0);*/
	top: 50%;
	margin-top: calc(-20.833vw / 2);
	left: calc(-20.833vw / 2);
	/*margin-left: 50%;*/
	width: 20.833vw;
	height: 20.833vw;
	z-index: 1;
	background: #fff;
}

.abk-circle.circle-2 {
	right: -1.5rem;
	bottom: -1.5rem;
	width: 6.1vw;
	height: 6.1vw;
	z-index: 2;
	background: #CBE9C1;
}

.abk-circle.circle-3 {
	left: 130px;
	bottom: 130px;
	width: 4vw;
	height: 4vw;
	z-index: 2;
	background: #BF78EB;
}

.abk-circle.circle-4 {
	right: -20px;
	bottom: 50%;
	width: 12.6vw;
	height: 12.6vw;
	z-index: 2;
	background: #E4886B;
}

svg#videoMask {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	/* // needed for FF, Safari, Edge */
	height: auto;
	overflow: hidden;
	background: #2b2a2970;
}

svg#videoMask rect {
	fill: #fff4cc;
}

svg#videoMask>rect {
	-webkit-mask: url(#mask);
	mask: url(#mask);
}

#videoMask::before {
	position: absolute;
	width: 100%;
	height: 100%;
	background: red;
	top: 0;
	right: 100%;
}

@media(max-width: 768px) {
	#homeVideoBanner h1 {
		font-size: calc(2.438rem * 0.9);
	}

	#homeVideoBanner video {
		display: none;
	}

	#homeVideoBanner {
		margin-top: 0;
		height: 150vh;
		display: flex;
		flex-direction: column-reverse;
	}

	#movilBannerImg {
		position: absolute;
		width: 100vw;
		background-repeat: no-repeat;
		/* background-image: url(https://reverent-cray.91-146-99-100.plesk.page/wp-content/uploads/2022/09/test.jpg); */
		background-size: cover !important;
		background-position: 58% top !important;
		height: inherit !important;
		top: 0px;
		display: block;
		filter: brightness(0.6);
	}

	#homeVideoBanner #videoBannerOverlay {
		/* padding: 1rem; */
		position: relative;
		justify-content: flex-end;
		top: auto;
		bottom: calc(50% / 2);

	}

	.video-banner-outerlay {
		/* position: relative; */
		/*background: #2b2a29;*/
		height: auto;
		/* padding: 4rem 1rem 0; */
	}
}

@media screen and (max-width: 576px) {
	#homeVideoBanner #videoBannerOverlay {
		bottom: calc(30% / 2);
	}

}

@media screen and (max-width: 425px) {
	#homeVideoBanner h1 {
		font-size: calc(2rem * 0.9);
	}

	#homeVideoBanner p {
		font-size: 0.9rem;
		max-width: 32ch;
	}

	#videoBannerOverlay a[role=button]:not(#return-to-top),
	#headerImage [role=button] {
		padding: 6px 1rem;
	}
}