/*FONTS*/

@font-face {
font-family: Gotham_light;
src: url('../../fonts/Gotham-Light.otf');
}

@font-face {
font-family: Gotham_medium;
src: url('../../fonts/Gotham-Medium.otf');
}

@font-face {
font-family: Gotham_bold;
src: url('../../fonts/Gotham-Bold.otf');
}

@font-face {
font-family: Gotham_boldttalic;
src: url('../../fonts/Gotham-BoldItalic.otf');
}

@font-face {
font-family: Gotham_book;
src: url('../../fonts/Gotham-Book.otf');
}

@font-face {
font-family: 'Gotham_bookitalic.otf';
src: url('../../fonts/Gotham-BookItalic.otf');
}

* {
	padding:0px;
	margin:0px;
	border:0px;
	font-family: 'Ubuntu', sans-serif;
}



html,body {
	padding:0px;
	margin:0px;
	border:0px;
	background-color:#262626;
}

#wrapper {
	width:100%;
}





.header{
	display: flex;
	padding: 15px 0;
}

.header h1{
	flex-grow: 1;
	display: block;
	font-family:Gotham_light,Arial,sans-serif;
	color: #ed7c00;
	font-size: clamp(.8rem, 2.5vw, 2rem); 
	box-sizing: border-box; 
	text-align: center;
	padding: 0 15px 0 125px
}

@media only screen and (max-width:750px){
	.header h1{
		padding: 0 15px 0 15px
	}
}

.header .logo {
	display: flex;
	justify-content: center;
	align-items: center;
}

h1 a {
	color: #ed7c00;
	font-family:Gotham_light,Arial,sans-serif;
	text-decoration:none;
	font-weight:normal;
}



.row{
	clear:both;
	background-color:#666666;
	margin-bottom:10px;
	float:left;
	width:100%;
}

h2 {
	font-family:Gotham_light,Arial,sans-serif;
	color:#333333;
	font-size:16px;
	text-align:left;
	width:78%;
	padding:1%;
	background-color:#999999;
	float:left;
}

.itemheadline {
	clear:both;
	float:left;
	background-color:#999999;
	width:100%;
}

.itemtime {
	font-family:Gotham_light,Arial,sans-serif;
	color:#333333;
	font-size:16px;
	text-align:right;
	width:18%;
	padding:1%;
	float:left;
}

.iteminh {
	clear:both;
	width:98%;
	padding:1%;
	font-family:Gotham_book,Arial,sans-serif;
	font-size:14px;
}

.itemimg {
	clear:both;
	width:98%;
	padding:1%;
	font-family:Gotham_book,Arial,sans-serif;
	font-size:14px;
	text-align:center;
}

#content {
	clear:both;
	float:left;
	width:100%;	
}

#content_stream {
	clear:both;
	float:left;
	width:100%;
	text-align:center; 
	margin-bottom:10px;	
}

#racecountdownbox{
	font-family:Gotham_book,Arial,sans-serif;
	text-align: center;
}

.item {
	box-shadow:0px 0px 20px #000000;
	background-color:#CCCCCC;
	border-radius:5px;
	width:95%;
	margin:0 auto;
	margin-bottom:20px;
}

.cam {
	width:50%;
	display:block;
	float:left;
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	color:#D5D5D5;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
}

.cleardiv {
	clear:both;
}

#liveiFrame{
	width:100%;
	/*height:100vh;*/
	height: calc(100vh - 60px) !important;
	border: 0px none transparent;
	background-color: #ffffff;
}


.raceWrapper{
	position: absolute;
	inset: 0;
	display:flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	/* background-image: url('./../images/2022-Juli-1.jpg');  */
	background-size: cover; 
	z-index: -1;
}

.copy{
	line-height: 40px; 
	font-size: 30px;
}

.stream_end{
	color: #ed7c00;
	font-family:Gotham_light,Arial,sans-serif;
	font-size: clamp(.8rem, 2.5vw, 2rem); 
	margin-bottom: 15px;
}

.nextRace{
	text-align: center;
	background-color: rgba(80,80,80,.6); 
	padding: 15px; 
	box-sizing: border-box; 
	position: relative; 
	width: 100%; 
	max-width: 700px;
}


.nextRace .headline{
	font-size: 25px;
}

.nextRace .countdownRace{
	display:flex;
	align-items: bottom;
	justify-content: center;
}

.nextRace .separator{
	margin: 0 10px;
	font-size: 40px;
	font-weight: 100;
}

.nextRace .hl{
	font-size: 40px;
	color: #ed7c00;

}

@media only screen and (max-width: 1100px){

	

	.nextRace .hl, .nextRace .separator{
		font-size: 30px;	
	}
	.nextRace .headline{
		font-size: 18px;
	}

}

@media only screen and (max-width: 800px){

	.raceranking .nextRace{
		width:100%;
	}

	.raceranking .nextRace .headline{
		text-align: center;
		display:block;
	}

	.raceranking .nextRace .countdownRace{
		justify-content: center;
	}

}