#banner {
	--d:10000ms;
}
/* #banner::after
{
	content:'';
	position:absolute;
	bottom:-16px;
	left:0;
	right:0;
	height:16px;
	box-shadow:0 0 12px #000E;
} */
#banner > .gallery {
	position:relative;
	display:none;
	width:100%;
	height:100%;
}
body.gallery #banner > .gallery {
	display:block;
}
#banner > .gallery > img {
	position:absolute;
	width:100%;
	height:100%;
	object-position:top;
	object-fit:cover;
	transition:opacity 2.5s ease-in-out;
}
#banner > .gallery > img[data-style="fade"] {
	opacity:0;
}
/* #banner > .gallery > :last-child,
#banner > .gallery > :nth-last-child(2) {
	display:block;
}
#banner > .gallery > :nth-last-child(2) {
	opacity:1;
}
#banner > .gallery > :last-child
{
	transition:opacity 2.5s ease-in-out;
} */
#banner > .gallery > img[data-style="fade"].current {
	opacity:1;
}



#banner > video {
	position:relative;
    left:50%;
    transform:translateX(-50%);
    min-width:100vw;
    min-height:100vh;
}




#page > .banner > .queue {
	opacity:.6;
	position:absolute;
	left:50%;
	bottom:30px;
	transform:translate(-50%, 50%);
	display:none;
	height:11px;
	padding:3px 6px;
	filter:drop-shadow(0 0 1px #000A);
	cursor:pointer;
	flex-direction:row;
	gap:7px;
	transition-duration:.1s;
}
body.gallery #page > .banner > .queue {
	display:flex;
}
/* #page > .banner > .queue > .dots {
	display:flex;
	height:13px;
	cursor:pointer;
	flex-direction:row;
	gap:7px;
	transition-duration:.1s;
} */
#page > .banner > .queue:hover {
	height:17px;
}
#page > .banner > .queue .dot {
	height:100%;
	aspect-ratio:1;
	box-sizing:border-box;
	border:3px solid #FFF;
	border-radius:999px;
	background-color:transparent;
	transition:.4s;
}
#page > .banner > .queue .dot:hover {
	background-color:#FFF;
}
#page > .banner > .queue .dot.current {
	background-color:#FFF;
}
#page > .banner > .queue:hover .dot.current {
	background-color:var(--color1);
	border:3px solid var(--color1);
}


#page > .banner > .timer {
	opacity:0.7;
	position:absolute;
	left:0;
	bottom:0;
	display:none;
	width:0;
	height:5px;
	background-color:#999;
	animation-name:timer_width;
	animation-duration:var(--d);
	animation-fill-mode:forwards;
	animation-timing-function:linear;
}
body.gallery #page > .banner > .timer {
	display:block;
}
@keyframes timer_width {
	from {
		width:0;
	}
	to {
		width:100%;
	}
}