@keyframes mp_countdown_pulse
{
	0%
	{
		opacity: 1;
	}
	100%
	{
		opacity: 0;
	}
}

div.mp_countdown
{
	display: block;
	text-align: center;

	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

div.mp_countdown > div
{
	text-align: left;
	display: inline-block;
}

div.mp_countdown :is(div.mp_countdown_separator, div.mp_countdown_digit)
{
	position: relative;
	display: inline-block;
	height: 1.2em;
	margin: 0.05em;
}

div.mp_countdown_separator
{
	width: 0.5em;
	vertical-align: top;
	text-align: center;
	line-height: 1.2em;

	animation: mp_countdown_pulse 2s linear infinite alternate;
}

div.mp_countdown_digits
{
	display: block;
	height: 1.3em;
	margin-bottom: 0.2em;
}

div.mp_countdown_digit
{
	width: 0.75em;
}

div.mp_countdown_digit > div
{
	position: absolute; /* */
	top: 0;
	left: 0;
	z-index: 1;

	display: inline-block;

	perspective: 3em;
	perspective-origin: 50%;

	transition: z-index 0.5s ease-in;
}

div.mp_countdown_digit > div:before,
div.mp_countdown_digit > div:after
{
	position: relative;
	content: attr(data-digit);
	text-align: center;

	width: 0.75em;
	height: 0.6em;
	line-height: 1.2em;
	display: block;
	overflow: hidden;


	background: #333333;
	border-color: #b5a26b;
	border-width: 0.02em;
	border-style: solid;

	margin: 0;

	transform: rotateX(0deg);

	backface-visibility: hidden;

	transition: transform 0.5s ease-in;
}

div.mp_countdown_digit > div:before
{
	border-radius: 0.05em 0.05em 0 0;
	border-bottom-width: 0;

	transform-origin: 50% 100%;
}

div.mp_countdown_digit > div:after
{
	border-radius: 0 0 0.05em 0.05em;
	border-top-width: 0;
	line-height: 0;

	transform-origin: 50% 0;
}

div.mp_countdown_digit > div.mp_countdown_start:after
{
	transform: rotateX(180deg);
}

div.mp_countdown_digit > div.mp_countdown_end:before
{
	transform: rotateX(-180deg);
}

div.mp_countdown_digit > div.mp_countdown_start
{
	z-index: 1;
	visibility: hidden;
}

div.mp_countdown_digit > div.mp_countdown_active
{
	z-index: 10;
}

div.mp_countdown_digit > div.mp_countdown_end
{
	z-index: 1;
}

div.mp_countdown > div > div.mp_countdown_title
{
	display: block;
	font-size: 0.2em;
	text-align: center;
}