#timer{
	position: fixed;
	right:10px;
	bottom:60px;
	width:15.78%;
	max-width:300px;
	z-index: 1;
	transform:translateX(110%);
	transition: transform 0.2s;
}
#timer.show{
	transform:none;
}

#timer .timerCT{
	aspect-ratio:1.71;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#timer.a .timerCT{ background-image: url(../images/timerA.png);}
#timer.b .timerCT{ background-image: url(../images/timerB.png);}

#timer a{
	display:block;
	height:100%;
	padding:30.5% 0 0 13.3%;
}

#timer .numWrapper{
	display: flex;
	color:#FFF;
	font-weight:bold;
	font-family: Arial;
	font-size: clamp(14px, 1.31vw, 25px);
}
#timer.b .numWrapper{
	color:#4e9085;
}
#timer .numWrapper span+span{
	margin-left:0.42em;
}
#timer .numWrapper span:nth-child(3){
	margin-left:0.91em;
}
#timer .numWrapper span:nth-child(5){
	margin-left:0.85em;
}
#timer .numWrapper span:nth-child(7){
	margin-left:0.9em;
}

#timer button {
	position: absolute;
	right: 0;
	top:0;
	width: 10%;
	font-size: 0;
	aspect-ratio:1;
	padding:0;
	border:none;
	background: none;
	cursor: pointer;
	margin:-2% 2% 0 0;
	transition: transform 0.2s;
}
#timer button:hover {
	transform:rotate(-90deg);
}
#timer button:before,
#timer button:after {
	position: absolute;
	content: "";
	display: block;
	left:50%;
	top: 50%;
	width: 105%;
	height:1px;
	background: #066;
}
#timer button:before{
	transform: translate(-50%, -50%) rotate(-45deg);
}
#timer button:after{
	transform: translate(-50%, -50%) rotate(-135deg);
}


@media screen and (max-width:1023px){
	
	#timer{
		width: 14.28em;
		max-width:none;
	}
	
	#timer a{
		padding-left:13.3%;
	}
	
	#timer .numWrapper{
		font-size: 1.21em;
	}
	#timer .numWrapper span:nth-child(3),
	#timer .numWrapper span:nth-child(5),
	#timer .numWrapper span:nth-child(7){
		margin-left:0.82em;
	}
	
}