@charset "utf-8";
@font-face{
	font-family:"AlumniSans-Regular";
	src:url("../fonts/AlumniSans-Regular.woff2") format("woff2");
	font-display:swap;
}
@font-face{
	font-family:"AlumniSans-Italic";
	src:url("../fonts/AlumniSans-Italic.woff2") format("woff2");
	font-display:swap;
}
@font-face{
	font-family:"AlumniSans-SemiBold";
	src:url("../fonts/AlumniSans-SemiBold.woff2") format("woff2");
	font-display:swap;
}
* {
	margin:0;
	padding:0;
	font-family:'AlumniSans-Regular', sans-serif;
	font-weight:normal;
	font-style:normal;
	text-align:left;
	text-decoration:none;
	font-size:18px;
	line-height:20px;	
	border:none;
	outline:0;
	list-style-type:none;
}
html { 
	outline:none !important;
}
body {
	overflow-y:scroll;
	background:#CCC;
}
div.page {
	width:100%;
	margin:0 auto;
	background:#FFF;
	position:relative;
	border-top:5px solid #B26A8E;
}
div.wrapper {
	margin:0 20px;
}
h1 {
	font-family:'AlumniSans-SemiBold', sans-serif;
	text-transform:uppercase;
	font-size:24px;
	line-height:26px;
	float:left;
}
p, p a {
	text-transform:lowercase;
}
p.page {
	margin:10px 0 20px 0;
	padding:0 0 3px 0;
	text-transform:uppercase;
	color:#666;
	border-bottom:1px solid #B26A8E;
}
p.px5 {
	height:5px;
}
p.px10 {
	height:10px;
}
p.px20 {
	height:20px;
}
p.clear {
	height:0;
	clear:both;
}
p.up a {
	font-family:'AlumniSans-SemiBold', sans-serif;
	text-align:right;
	font-size:24px;
	color:#999;
	float:right;
}
p.up a:hover {
	color:#B26A8E;
}
br {
	content:"";
	display:block;
	margin-top:5px;
}
img {
	max-width:100%;
	height:auto;
	border:none;
	filter:drop-shadow(2px 2px 4px rgba(102,102,102,0.5));
}
#svg_f1racecovers {
	width:auto;
	height:60px;
	margin:15px 0 10px 0;
}
hr {
	margin:20px 0;
	border-top:1px dotted #999;
}
hr.short {
	width:30px;
	height:5px;
	margin:5px 0;
	background:#B26A8E;
	border-radius:5px;
}
a {
	color:#000;
}
a:hover {
	color:#B26A8E;
	cursor:pointer;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ INDEX */

.container, .container_circuits {
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	margin:10px 0 20px 0;
	align-content:flex-start;
	align-items:center;
	justify-content:left;
	gap:10px;
}
.container a, .container_circuits a {
	display:inline-block;
	text-transform:lowercase;
	text-align:center;
	outline:1px solid #CCC;
	border-radius:5px;
	padding:3%;
	color:#000;
	overflow:hidden;
}
.container a:hover, .container_circuits a:hover {
	background:#B26A8E;
	color:#FFF;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ GALLERY */

.gallery {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap:10px;
}
.grid, .grid_no, .grid_ca, .grid_missing, .grid_missing_no {
	text-transform:lowercase;
	overflow:hidden;
	float:left;
	outline:1px solid #EEE;
	box-shadow:2px 2px 4px rgba(102,102,102,0.25);
	border-radius:10px;
	position:relative;
}
.grid_no, .grid_missing_no, .grid_ca {
	background:#EEE;
}
figure {
	float:left;
}
figcaption, figcaption.missing {
	max-width:90%;
	height:90px;
	padding:10px;
	overflow:hidden;
}
figcaption.missing {
	height:85px;
}
img.gallery {
	width:200px;
	height:auto;
	padding:0 10px 10px 10px;
	top:150px;
	filter:none;
	float:left;
}
.uppercase, .uppercase_white {
	font-family:'AlumniSans-SemiBold', sans-serif;
	color:#000;
	text-transform:uppercase;
}
.uppercase_white {
	color:#FFF;
	text-align:center;
}
.lowercase, .lowercase_italic, .lowercase_white {
	color:#999;
	text-transform:lowercase;
}
.lowercase_italic {
	font-family:'AlumniSans-Italic', sans-serif;	
}
.lowercase_white {
	color:#FFF;
	text-align:center;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ NAVI PREV/NEXT */

p.dreieck_right a {
	width:0;
	height:0;
	margin:5px 20px 0 0;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-right:16px solid #BBB;
	float:right;
}
p.dreieck_left a {
	width:0;
	height:0;
	margin:5px 0 0 20px;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-left:16px solid #BBB;
	float:right;	
}
p.dreieck_top a {
	width:0;
	height:0;
	margin:4px 0 0 0;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:16px solid #BBB;
	float:right;	
}
p.dreieck_right a:hover {
	border-right:16px solid #B26A8E;
	float:right;
}
p.dreieck_left a:hover {
	border-left:16px solid #B26A8E;
	float:right;
}
p.dreieck_top a:hover {
	border-bottom:16px solid #B26A8E;
	float:right;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ FOOTER */

footer {
	margin:15px 0 0 0;
	padding:15px 0 10px 0;
	border-top:1px solid #CCC;
}
footer p, footer p a {
	line-height:28px;
	text-transform:none;
}
div.footer_left {
	width:50%;
	float:left;
}
div.footer_right {
	width:50%;
	float:left;
}
p.center {
	text-align:center;
}
p.left {
	float:left;
}
p.right {
	float:right;
}

/********************************************************************************************* GRID LAYOUT */

@media screen and (min-width:950px) {	
	div.page {
		max-width:950px;
	}
}

@media screen and (min-width:720px) and (max-width:949px) {	
	div.page {
		max-width:720px;
	}
}	
	
@media screen and (min-width:470px) and (max-width:719px) {
	div.page {
		max-width:490px;
	}
	h1 {
		font-size:22px;
		line-height:24px;
	}
	.container_circuits {
		grid-template-columns:repeat(3, 1fr);
	}
}

@media screen and (min-width:0px) and (max-width:469px) {	
	div.page {
		max-width:469px;
	}
	div.wrapper {
		margin:0 10px;
	}
	h1 {
		font-size:22px;
		line-height:24px;
	}
	.container_circuits {
		grid-template-columns:repeat(2, 1fr);
	}
	.gallery {
		grid-template-columns:repeat(auto-fill, minmax(min(190px, 100%), 1fr));
	}
	img.gallery {
		width:170px;
		height:auto;
	}
}