.composition{
	position:relative;
	z-index:2;
}
/*
.background{
	position:fixed;
	inset:0;
	z-index:1;
	pointer-events:none;
	background-color:#BFB907;
}
*/

.rt-screen-001{
	box-sizing:border-box;
	display:grid;
	grid-template-columns:repeat(5,1fr);
	grid-template-areas:
		"a a b c c" 
		"d d e c c"
		"d d f g g"
		"h h h g g"
	;
	align-items:stretch;
	gap:10px;
}
@media (min-width:0px) and (max-width:700px){
	.rt-screen-001{
		grid-template-columns:repeat(3,1fr);
		grid-template-areas:
			"b b b"
			"a a a"
			"c c d"
			"c c e"
			". f f"
			"g g g"
			"h h h"
		;
		gap:5px;
	}
	.rt-screen-001>DIV:first-child P{margin:0;}
}
@media (min-width:701px) and (max-width:1100px){
	.rt-screen-001{
		grid-template-columns:repeat(3,1fr);
		grid-template-areas:
			"a b b"
			"d f c"
			"g g e"
			". h h"
		;
		gap:7px;
	}
}
.rt-screen-001 H1{margin-bottom:10px;}
.rt-screen-001 P{max-width:100%;}
.rt-screen-001>DIV{box-sizing:border-box;}
.rt-screen-001>DIV>*:first-child{margin-top:0;}
.rt-screen-001>DIV>*:last-child{margin-bottom:0;}
.rt-screen-001>DIV:nth-child(1){
	grid-area:a;
	display:flex;
	flex-direction:column; 
	justify-content:center;
	padding:40px 0;
}
.rt-screen-001>DIV:nth-child(2){grid-area:b;}
.rt-screen-001>DIV:nth-child(3){grid-area:c;}
.rt-screen-001>DIV:nth-child(4){grid-area:d;}
.rt-screen-001>DIV:nth-child(5){grid-area:e;}
.rt-screen-001>DIV:nth-child(6){grid-area:f;}
.rt-screen-001>DIV:nth-child(7){grid-area:g;}
.rt-screen-001>DIV:nth-child(8){
	grid-area:h;
	display:grid;
	background-color:#011C26;
	clip-path:polygon(
		0 0,
		calc(100% - 20px) 0,
		100% 20px,
		100% 100%,
		20px 100%,
		0 calc(100% - 20px)
	);	
}
.rt-screen-001>DIV:nth-child(8)>DIV,
.rt-screen-001>DIV:nth-child(8)>IMG{
	grid-area:1/1;
}
/*
.rt-screen-001>DIV:nth-child(8)>IMG{max-height:100px;}
*/
.rt-screen-001>DIV:nth-child(8)>IMG{display:none;}

DIV.rt-logo{position:relative;}
DIV.rt-logo::after{
	content:'';
	position:absolute;
	width:70px;
	left:0;
	bottom:0;
	aspect-ratio:1/1;
	background-color:#011C26;
	clip-path:polygon(
		0 0,
		100% 100%,
		calc( 100% - 15px ) 100%,
		0 15px
	);		
}
DIV.rt-logo VIDEO{
	clip-path:polygon(
		0 0,
		100% 0,
		100% 40px,
		calc(100% - 10px) 50px,
		calc(100% - 10px) 110px,
		100% 120px,
		100% 100%,
		80px 100%,
		0 calc( 100% - 80px )
	);		
}
@media (min-width:0px) and (max-width:800px){
	DIV.rt-logo::after{
		width:30px;
		height:30px;
	}
	DIV.rt-logo VIDEO{
		clip-path:polygon(
			0 0,
			100% 0,
			100% 30px,
			calc(100% - 10px) 40px,
			calc(100% - 10px) 100px,
			100% 110px,
			100% 100%,
			40px 100%,
			0 calc( 100% - 40px )
		);
	}
}
DIV.rt-logo VIDEO,
DIV.rt-logo VIDEO:focus{
	pointer-events:none;
	aspect-ratio:1/1;
	display:block;
	width:100%;
	height:auto;
	outline:none;
	border:none;
	overflow:hidden;
	background-color:transparent !important;
	-webkit-backface-visibility:hidden;
	backface-visibility: hidden;
	-webkit-mask-image:-webkit-radial-gradient(white,black);
	mask-image:-webkit-radial-gradient(white,black);
}

.counter{
	z-index:1;
	box-sizing:border-box;
	padding:20px;
	display:grid;
	grid-template-columns:repeat(5,1fr);
    justify-content:space-between;
	gap:20px;
	justify-items:center;
	align-items:center;	
}
@media (min-width:0px) and (max-width:300px){
	.counter{
		grid-template-columns:repeat(3,1fr);
		gap:10px;
	}
}
@media (min-width:301px) and (max-width:500px){
	.counter{
		grid-template-columns:repeat(4,1fr);
		gap:15px;
	}
}
.counter .digit{
	position:relative;
	width:50px;
	height:80px;	
	--l-size:8px;
	--l-space:2px;
	--l-off:.2;
}
@media (min-width:0px) and (max-width:600px){
	.counter .digit{
		width:40px;
		height:70px;	
		--l-size:7px;
		--l-space:2px;
		--l-off:.2;
	}
}
.counter .digit DIV{
	background-color:#BF1112;
	position:absolute;
	transition:all 70ms ease;
}
.counter .digit DIV:nth-child(1){
	width:calc(100% - (2 * var(--l-space)));
	height:calc(var(--l-size) - var(--l-space));
	top:0;left:var(--l-space);
	clip-path:polygon(
		0 0,
		100% 0,
		calc(100% - var(--l-size)) 100%,
		var(--l-size) 100%
	);	
}
.counter .digit DIV:nth-child(2),
.counter .digit DIV:nth-child(4){
	width:var(--l-size);
	height:calc(50% - (2 * var(--l-space)));
	top:var(--l-space);left:0;
	clip-path:polygon(
		0 0, 
		100% var(--l-size),
		100% calc(100% - var(--l-size)),
		0 100%
	);	
}
.counter .digit DIV:nth-child(3),
.counter .digit DIV:nth-child(5){
	width:var(--l-size);
	height:calc(50% - (2 * var(--l-space)));
	top:var(--l-space);right:0;
	clip-path:polygon(
		100% 0, 
		100% 100%,
		0 calc(100% - var(--l-size)),
		0 var(--l-size)
	);	
}
.counter .digit DIV:nth-child(4){top:auto;bottom:var(--l-space);}
.counter .digit DIV:nth-child(5){top:auto;bottom:var(--l-space);}
.counter .digit DIV:nth-child(6){
	width:calc(100% - (2 * var(--l-space)));
	height:var(--l-size);
	top:calc(50% - (var(--l-size) / 2));left:var(--l-space);
	clip-path:polygon(
		calc(var(--l-size) - (var(--l-space) * 2)) 0,
		calc(100% - var(--l-size) + (var(--l-space) * 2)) 0,
		100% 50%,
		calc(100% - var(--l-size) + (var(--l-space) * 2)) 100%,
		calc(var(--l-size) - (var(--l-space) * 2)) 100%,
		0 50%
	);	
}
.counter .digit DIV:nth-child(7){
	width:calc(100% - (2 * var(--l-space)));
	height:calc(var(--l-size) - var(--l-space));
	bottom:0;left:var(--l-space);
	clip-path:polygon(
		var(--l-size) 0,
		calc(100% - var(--l-size)) 0,
		100% 100%,
		0 100%
	);	
}
/**/
.counter .digit.n0 DIV:nth-child(6){opacity:var(--l-off);}
.counter .digit.n1 DIV:nth-child(1),
.counter .digit.n1 DIV:nth-child(2),
.counter .digit.n1 DIV:nth-child(4),
.counter .digit.n1 DIV:nth-child(6),
.counter .digit.n1 DIV:nth-child(7){
	opacity:var(--l-off);
}
.counter .digit.n2 DIV:nth-child(2),
.counter .digit.n2 DIV:nth-child(5){
	opacity:var(--l-off);
}
.counter .digit.n3 DIV:nth-child(2),
.counter .digit.n3 DIV:nth-child(4){
	opacity:var(--l-off);
}
.counter .digit.n4 DIV:nth-child(1),
.counter .digit.n4 DIV:nth-child(4),
.counter .digit.n4 DIV:nth-child(7){
	opacity:var(--l-off);
}
.counter .digit.n5 DIV:nth-child(3),
.counter .digit.n5 DIV:nth-child(4){
	opacity:var(--l-off);
}
.counter .digit.n6 DIV:nth-child(3){opacity:var(--l-off);}
.counter .digit.n7 DIV:nth-child(2),
.counter .digit.n7 DIV:nth-child(4),
.counter .digit.n7 DIV:nth-child(6),
.counter .digit.n7 DIV:nth-child(7){
	opacity:var(--l-off);
}
.counter .digit.n8 DIV{}
.counter .digit.n9 DIV:nth-child(4),
.counter .digit.n9 DIV:nth-child(7){
	opacity:var(--l-off);
}
.counter .digit.nA DIV:nth-child(7){opacity:var(--l-off);}
.counter .digit.nC DIV:nth-child(3),
.counter .digit.nC DIV:nth-child(5),
.counter .digit.nC DIV:nth-child(6){
	opacity:var(--l-off);
}
.counter .digit.nE DIV:nth-child(3),
.counter .digit.nE DIV:nth-child(5){
	opacity:var(--l-off);
}
.counter .digit.nF DIV:nth-child(3),
.counter .digit.nF DIV:nth-child(5),
.counter .digit.nF DIV:nth-child(7){
	opacity:var(--l-off);
}
.counter .digit.nH DIV:nth-child(1),
.counter .digit.nH DIV:nth-child(7){
	opacity:var(--l-off);
}
.counter .digit.nJ DIV:nth-child(1),
.counter .digit.nJ DIV:nth-child(2),
.counter .digit.nJ DIV:nth-child(4),
.counter .digit.nJ DIV:nth-child(6){
	opacity:var(--l-off);
}
.counter .digit.nL DIV:nth-child(1),
.counter .digit.nL DIV:nth-child(3),
.counter .digit.nL DIV:nth-child(5),
.counter .digit.nL DIV:nth-child(6){
	opacity:var(--l-off);
}
.counter .digit.nP DIV:nth-child(5),
.counter .digit.nP DIV:nth-child(7){
	opacity:var(--l-off);
}
.counter .digit.nU DIV:nth-child(1),
.counter .digit.nU DIV:nth-child(6){
	opacity:var(--l-off);
}