/* Client-facing rules from Eddie's event.css (loaded after client.css; these override it). */
#preview iframe{
	max-width:500px !important;
	max-width:97% !important;
}

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

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

.margin-20{
	margin-top:20%;
}

/* Preview Display Start */
.uppercountdown{
	position: relative;
}

#countdown{
    background-color: #8080805c;
}
#countdown, #countdown .time{
    position: inherit !important;
    width: 100%;
    left: 0;
}

.bg .uppercountdown, .time {
	margin: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
}
.bg .uppercountdown {
    width: 100%;
}
/* Preview Display End */

.thumbnail .time {
    margin: 0;
    position: absolute;
    width: 100%;
}

@media (min-width: 800px) and (max-width: 815px) and (orientation: landscape) {
	.time,#countdowntest{ font-size: 3em !important; }
	.label { font-size: 15px !important; }
}
@media (min-width: 481px) and (max-width: 767px) {
	.time,#countdowntest{ font-size: 3em !important; }
	.label { font-size: 15px !important; }
}
@media (min-width: 376px) and (max-width: 480px) {
	.time,#countdowntest{ font-size: 2em !important; }
	.label { font-size: 10px !important; }
}
@media (min-width: 361px) and (max-width: 375px) {
	.time,#countdowntest{ font-size: 2em !important; }
	.label { font-size: 10px !important; }
}
@media (min-width: 321px) and (max-width: 360px) {
	.time,#countdowntest{ font-size: 2em !important; }
	.label { font-size: 10px !important; }
}
@media (max-width: 320px) {
	.time,#countdowntest{ font-size: 2em !important; }
	.label { font-size: 10px !important; }
}