@charset "utf-8";
div.page-bg { padding-top:100px}
div.page-bg:after { display:none;}
.video-container { position: relative;  overflow:hidden; width:100%; max-width:var(--max-width); margin:0 auto}
.video-container div.movie:before { content:""; position:absolute; top:0; left:0; width:200px; height:100%; background:linear-gradient(90deg, var(--body-bgColor), transparent); z-index:1; border:0px solid #f00}
.video-container div.movie:after { content:""; position:absolute; top:0; right:0; width:200px; height:100%; background:linear-gradient(90deg, transparent, var(--body-bgColor)); z-index:1; border:0px solid #f00}
.video-container div.movie {position: sticky; top: 0; overflow:hidden; width:100%; height:auto; display: flex; align-items:center ; justify-content: flex-start; flex-direction: column; }
.video-container { background-image:url('/assets/mov/enzyme.jpg'); background-position: center; background-size: contain; background-repeat: no-repeat; height:100%; max-width:100%}
div.page-bg {   height:auto}
.video-container canvas { width:80%; height:auto; }
.title-box.withgap {padding:50px 0 100px 0}
@media screen and (max-width:1920px){
	div.page-bg { padding-top:100px; height:auto}
	.video-container canvas { width:100%; height:auto; }
}
@media screen and (max-width:1024px){
	.video-container canvas { width:100%; height:auto; }
	div.page-bg,
	.video-container div.movie {height:auto; }

}

@media screen and (max-width:768px){
	div.page-bg { height: 50vh; padding-top:50px}
	div.page-bg > div { height:100%;}
	.video-container { background-image:url('/assets/mov/enzyme.jpg'); background-position: center; background-size: contain; background-repeat: no-repeat; height:100%; max-width:100%}
	.video-container div.movie,
	.mouse { display:none}
	.title-box {padding: 0 0 10vh 0; }
}