.hero_video-layout {
	position: relative;
	color: #ffffff;
	overflow: hidden;
	height: calc(100vh - 80px);
	min-height: 800px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: max(6.25rem, calc(7.5 * var(--su)));
}

.hero_video-layout::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.05) 100%);
}

.hero_video-layout .hero-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.hero_video-layout h1 {
	max-width: 80%;
	color: var(--odnhn-white);
	margin-bottom: max(2rem, calc(3 * var(--su)));
}

.hero_video-layout .video-toggle {
	position: absolute;
	bottom: 24px;
	left: 24px;
	/* transform: translate(50%, -50%); */
	display: block;
	width: max(2.5rem, calc(2.75 * var(--su)));
	height: auto;
	outline-offset: -1px;
	aspect-ratio: 1;
	border-radius: 50%;
	cursor: pointer;
	transition: .2s ease-in-out background-color, .2s ease-in-out color, .2s ease-in-out transform;
}

.hero_video-layout .video-toggle::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 1rem;
	height: auto;
	transform: translate(-50%, -50%);
	aspect-ratio: 1;
	background-color: var(--odnhn-white-100);
	transition: .2s ease-in-out background-color, .2s ease-in-out color, .2s ease-in-out transform;
	mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 14V0H14V14H8ZM0 14V0H6V14H0ZM10 12H12V2H10V12ZM2 12H4V2H2V12Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center / contain;
	  -webkit-mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 14V0H14V14H8ZM0 14V0H6V14H0ZM10 12H12V2H10V12ZM2 12H4V2H2V12Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

.hero_video-layout .video-toggle.playing {
	background-color: var(--odnhn-black);
	outline: 2px solid var(--odnhn-white-100);
}

.hero_video-layout .video-toggle.playing:hover {
	background-color: var(--odnhn-white-100);
	outline: 2px solid var(--odnhn-black);
}

.hero_video-layout .video-toggle.playing:hover::before {
	background-color: var(--odnhn-black);
}

.hero_video-layout .video-toggle.paused {
	background-color: var(--odnhn-white-100);
	outline: 2px solid var(--odnhn-black);
}

.hero_video-layout .video-toggle.paused::before {
	mask: url("data:image/svg+xml,%3Csvg width='11' height='14' viewBox='0 0 11 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 14V0L11 7L0 14ZM2 10.35L7.25 7L2 3.65V10.35Z' fill='%23090909'/%3E%3C/svg%3E%0A") no-repeat center / contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg width='11' height='14' viewBox='0 0 11 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 14V0L11 7L0 14ZM2 10.35L7.25 7L2 3.65V10.35Z' fill='%23090909'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

.hero_video-layout .video-toggle.paused:hover {
	background-color: var(--odnhn-black);
	outline: 2px solid var(--odnhn-white-100);
}

.hero_video-layout .video-toggle.paused::before {
	background-color: var(--odnhn-black);
}

.hero_video-layout .video-toggle.paused:hover::before {
	background-color: var(--odnhn-white-100);
}

@media screen and (max-width: 992px) {
	
	
	
}

@media screen and (max-width: 767px) {
	
	
	
}