html, body{
	margin: 0;
	padding: 0;
	height: 100%;
	/* the embed is a fixed 16:9 frame — never show scrollbars. Image/live/replay were overflowing a
	   few px (default body margin + 100vh / 16:9 player) and showing a white scrollbar; countdown fit. */
	overflow: hidden;
}
.wrapper{
	text-align: center;
}
.logo {
	width: 50px !important;
	float: left;
	padding-top: 5px;
}
#preview iframe{
	max-width: 100% !important;
	text-align: center;
	min-width: 100%;
}

/* live/replay embed: normalise ANY pasted or generated embed (bare fixed-size OR already-responsive)
   to a single responsive 16:9 box, so the player always fills correctly on every device. */
#preview.preview-live { position: relative; width: 100%; height: 0; padding-top: 56.25%; overflow: hidden; }
#preview.preview-live > div { position: static !important; padding: 0 !important; height: auto !important; }
#preview.preview-live iframe {
	position: absolute !important; top: 0; left: 0;
	width: 100% !important; height: 100% !important; max-width: none !important; min-width: 0 !important; border: 0;
}
#countdown{
    width: 85%;
    left: 7%;
	margin: 0;
	position: absolute;
}
.thumbnail .time{
	margin: 0;
	position: absolute;
	width: 100%;
}
hr{
	margin-bottom:0 !important;
}
.margin-20{
	margin-top:15%;
}
.bg{
	height: 100%;
	margin: 0;
	font-family: Lato, sans-serif;
	background-repeat: no-repeat ;
	background-size: contain ;
	background-position: center;
	height: 100vh;
	border: 0;
}

.thumbnail{
	height: 100%;
	margin: 0;
	font-family: Lato, sans-serif;
	background-repeat: no-repeat ;
	background-size: contain ;
	background-position: center;
	height: 100vh;
	border: 0;
}

/* ---- countdown designer: freely-placed items (positions are % of the 16:9 frame) ---- */
.cd-item { line-height: 1; }
/* the countdown digits are a GROUPED inline row, so the box's align controls where they sit */
#cd-box #countdown { position: static !important; left: auto; width: auto !important; margin: 0;
	display: inline-flex; max-width: 100%; background: transparent !important; }
#cd-box #countdown .cd-cell { flex: 0 0 auto; padding: 0; text-align: center; }
/* neutralise event.css's global `.time { position:absolute; left:50%; transform:translate(-50%) }`,
   which otherwise shifts each digit left by half its width and misaligns it under its label */
#cd-box #countdown .time { position: static !important; left: auto !important; transform: none !important; }
.cd-item .time { display: block; line-height: 1; font-variant-numeric: tabular-nums; width: auto !important; }
.cd-item .label { display: block; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.cd-title-text { line-height: 1.1; font-weight: 700; width: 100%; }

@media (min-width: 800px) and (max-width: 815px) and (orientation: landscape) {
	.time{
		font-size: 3em !important;
	}
	.label {
		font-size: 15px !important;
	}
}

@media (min-width: 481px) and (max-width: 767px) {
	.time{
		font-size: 3em !important;
	}
	.label {
		font-size: 15px !important;
	}
}

@media (min-width: 321px) and (max-width: 480px) {
	.time{
		font-size: 3em !important;
	}
	.label {
		font-size: 10px !important;
	}
}

@media (max-width: 320px) {
	.time{
		font-size: 2em !important;
	}
	.label {
		font-size: 10px !important;
	}
}