@font-face { 
	font-family: "OpenSans"; 
	src: url('../fonts/oldsans.ttf'), url('../fonts/oldsans.ttf');
}

@font-face { 
	font-family: "Scoreboard"; 
	src: url('../fonts/scoreboard.ttf'), url('../fonts/scoreboard.ttf');
}


@font-face { 
	font-family: "Motorfest"; 
	src: url('../fonts/motorfest.ttf'), url('../fonts/motorfest.ttf');
}

ul.countdown {
list-style: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: -20px;
margin-left: -30px;
display: block;
text-align: center;
color: white;
border: 0px;
transition: 0.5s ease-in-out;
}

ul.countdown li {
display: inline-block;
}

ul.countdown li span {
font: normal 80px 'Scoreboard', sans-serif;
line-height: 70px;
color: rgba(255,200,50,1);
text-shadow: 0px 0px 10px rgba(255,150,0,1), 0px 0px 10px rgba(255,150,0,1), 0px 0px 10px rgba(200,50,0,1);
mix-blend-mode: plus-lighter;
transition: 0.5s ease-in-out;
}


@media only screen and (min-width: 1401px) and (max-width: 2000px) {
ul.countdown li span {
font: normal 65px 'Scoreboard', sans-serif;
line-height: 65px;
}
}


@media only screen and (min-width: 941px) and (max-width: 1400px) {
ul.countdown li span {
font: normal 48px 'Scoreboard', sans-serif;
line-height: 46px;
}
}

@media only screen and (min-width: 641px) and (max-width: 940px) {
ul.countdown li span {
font: normal 40px 'Scoreboard', sans-serif;
line-height: 30px;
}
}

@media only screen and (max-width: 640px) {
ul.countdown li span {
font: normal 75px 'Scoreboard', sans-serif;
line-height: 55px;
padding-left: 7px !important;
padding-right: 7px !important;
}
}



ul.countdown li.seperator {
font-size: 70px;
font-weight: bold;
line-height: 70px;
margin-bottom: 20px !important;
margin-left: 5px;
margin-right: 5px;
vertical-align: top;
}

@media only screen and (min-width: 1401px) and (max-width: 2000px) {
ul.countdown li.seperator {
font-size: 60px;
}
}


@media only screen and (min-width: 941px) and (max-width: 1400px) {
ul.countdown li.seperator {
font-size: 50px;
}
}


@media only screen and (min-width: 641px) and (max-width: 940px) {
ul.countdown li.seperator {
font-size: 45px;
}
}

@media only screen and (max-width: 640px) {
ul.countdown li.seperator {
font-size: 40px;
}
}



ul.countdown li p {
font: 'OpenSans', sans-serif;
color: orange;
font-size: 24px;
line-height: 40px;
}


.MotorfestClockOffset {
width: 100%;
margin-left: 0px !important;
padding-left: 0px !important;
}


@media only screen and (max-width: 640px) {
.MotorfestClockOffset {
width: 110% !important;
margin: 0px !important;
padding: 3px !important;
z-index: 100;
overflow: hidden;
}
}



.MotorfestClockOffsetHome {
width: 70%;
margin-left: 0px !important;
padding-left: 0px !important;
}

@media only screen and (min-width: 1401px) and (max-width: 2000px) {
.MotorfestClockOffsetHome {
width: 70%;
margin-left: 0px !important;
padding-left: 0px !important;
}
}

@media only screen and (min-width: 941px) and (max-width: 1400px) {
.MotorfestClockOffsetHome {
width: 88%;
margin-left: 0px !important;
padding-left: 0px !important;
}
}

@media only screen and (min-width: 641px) and (max-width: 940px) {
.MotorfestClockOffsetHome {
width: 90%;
margin-left: 0px !important;
padding-left: 0px !important;
}
}


@media only screen and (max-width: 640px) {
.MotorfestClockOffsetHome {
width: 108% !important;
margin: 0px !important;
padding: 3px !important;
z-index: 100;
overflow: hidden;
}
}




.ClockBackground {
	background-image: url(scoreboard-desktop.webp);      
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
border-radius: 16px;
padding: 10px;
margin-bottom: 0px;
margin-top: -20px;
min-height: 400px;
filter: drop-shadow(2px 2px 15px rgba(0,0,0,0.4));
transition: 0.5s ease-in-out;
}

@media only screen and (min-width: 1401px) and (max-width: 2000px) {
.ClockBackground {
	background-image: url(scoreboard-desktop.webp);      
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
padding: 10px;
min-height: 300px;

}
}

@media only screen and (min-width: 941px) and (max-width: 1400px) {
.ClockBackground {
	background-image: url(scoreboard-desktop.webp);      
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
padding: 10px;
min-height: 250px;
}
}

@media only screen and (min-width: 641px) and (max-width: 940px) {
.ClockBackground {
	background-image: url(scoreboard-desktop.webp);      
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
padding: 10px;
min-height: 200px;
}
}



@media only screen and (max-width: 640px) {
.ClockBackground {
	background-image: url(scoreboard-mobile.webp);      
	background-size: 105% 100%;
	background-repeat: no-repeat;
	background-position: center center;
padding: 10px;
min-height: 320px;
border-radius: 0px;
}
}



.CountdownHeader {
font: bold 46px 'OpenSans', sans-serif !important;
text-transform: uppercase !important;
line-height: 36px !important;
margin-top: 70px !important;
margin-bottom: 30px !important;
color: white;
transition: 0.5s ease-in-out;
}

@media only screen and (min-width: 1401px) and (max-width: 2000px) {
.CountdownHeader {
font: bold 36px 'OpenSans', sans-serif !important;
line-height: 32px !important;
margin-top: 45px !important;
margin-bottom: 0px !important;
}
}


@media only screen and (min-width: 941px) and (max-width: 1400px) {
.CountdownHeader {
font: normal 26px 'OpenSans', sans-serif !important;
line-height: 30px !important;
margin-top: 30px !important;
margin-bottom: -10px !important;
}
}

@media only screen and (min-width: 641px) and (max-width: 940px) {
.CountdownHeader {
font: normal 22px 'OpenSans', sans-serif !important;
line-height: 20px !important;
margin-top: 20px !important;
margin-bottom: -10px !important;
}
}

@media only screen and (max-width: 640px) {
.CountdownHeader {
font: normal 22px 'OpenSans', sans-serif !important;
line-height: 20px !important;
margin-top: 20px !important;
margin-bottom: -10px !important;
}
}

.timeunit {
font: normal 18px 'OpenSans', sans-serif !important;
font-weight: bold;
color: white !important;
text-transform: uppercase !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 6px;
margin-top: 6px;
}