@import url('https://fonts.googleapis.com/css2?family=Poiret+One&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--navbar-height:60px;
	--gold:#ab8764;
}

body {
	background-color:#000;
	color:#aaa;
	margin:0; padding:0;
	overflow-x:hidden;
	font-size:13pt;
	font-family:"Raleway", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family:"Poiret One", sans-serif;
	color:#fff;
	font-weight:700;
}
#headline, .headline {
	font-weight:500;
	margin-bottom:1em;
}
a {
	color:var(--gold);
	transition:0.25s ease-in-out;
}
a:hover {color:#e9c199;}

button, .button, .btn, input[type="button"] {
	background-image:linear-gradient(#7a4458, #2b0a16);
	border:none;
	border-top:1px solid rgba(255,255,255,0.1);
	color:rgba(255,255,255,0.85);
	height:45px;
	transition:0.3s ease-in-out;
}
button:hover, .button:hover, .btn:hover {
	color:#fff;
}

.flex-row {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
}
.flex-row > * {flex:1;}

.select-container {
	display:block;
	width:100%; height:35px;
	background-color:rgba(255,255,255,0.2);
	border: 1px solid #999;
	position:relative;
	overflow:hidden;
	padding: 0 0 0 0;
	margin-bottom:10px;
	vertical-align:bottom;
	border-radius:2px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
}
.select-container select {
	border: none;
	background: transparent;
	padding: 0px 15px 2px 6px;
	-webkit-appearance: none;
	width:100%; height:35px; line-height:35px;
	position:relative;
	color:#fff;
}
.select-container:after {
	content:"";
	position:absolute;
	width:0; height:0;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-top:12px solid #fff;
	right:0; top:10px;
	margin-right:7.5px;
	pointer-events:none;
	background-color:transparent;
}
.select-container option:disabled {
	height:0;
	border-bottom:1px solid #ccc;
	margin:5px 0;
}
.select-container select:focus {
	outline:none;
}

nav {
	position:fixed;
	left:0; top:0;
	width:100vw; height:var(--navbar-height);
	z-index:99;
	background-image:linear-gradient(#333, #111);	
}
nav ul {
	list-style-type:none;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	font-size:1.1em;
	margin:0; padding:0;
}
nav ul li {
	position:relative;
	transition:0.3s ease-in-out;
}
nav ul li:hover a {
	background-color:#000;
	text-decoration:none;
	text-shadow: 0 0 15px #fff, 0 0 5px var(--gold);
}
nav ul li.current-page a {
	background-color:#000;
	border-left:1px solid #666;
	border-right:1px solid #666;
}
nav ul li a {
	color:var(--gold);
	text-decoration:none;
	height:var(--navbar-height);
	display:flex;
	align-items:center;
	padding:0 15px;
	transition:0.3s ease-in-out;
	border-color:rgba(255, 255, 255, 0);
	border-width:1px;
	border-style:solid;
}

nav ul ul {
	position:absolute;
	left:0;
	top:var(--navbar-height);
	background-color:#000;
	flex-direction:column;
	height:auto;
	gap:0;
	z-index:2;
	margin:0;
	padding:10px 0;
	min-width:240px;
    border:1px solid rgba(255, 255, 255, 0.2);
	border-top:none;
}
nav ul ul li {
	width:100%;
}
nav ul ul li a {
	padding:5px 15px;
	height:auto;
	font-size:0.8em;
}
nav ul ul li a:hover {
	color:#fff;
}
nav ul li.children-expanded {
	background-color:#000;
	border-left-color:rgba(255, 255, 255, 0.2);
	border-right-color:rgba(255, 255, 255, 0.2);
}

#nav-bottom-border {
	position:absolute;
	left:0; bottom:-15px;
	width:100%; height:15px;
}
.gold-bar {
	display:block;
	width:100%; height:15px;
	transform:rotate(180deg);
}

.moulding {
	width:100vw; height:30px;
	background-image:url("/images/web/moulding.jpg");
	background-size:100% 100%;
}
.vignette {
	position:absolute;
	left:0; top:0;
	width:100%; height:100%;
	z-index:0;
	pointer-events:none;
	background-image:radial-gradient(transparent, transparent, rgba(0,0,0,0.5));
}

/* ----- CIRCUIT COMPS SECTION ----- */

#circuit-comps ul {
	list-style-type:none;
	margin:0 auto; padding:0;
	max-width:1200px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	gap:30px 2%;
	justify-content:space-between;
}
#circuit-comps ul li {
	flex-basis:18%;
	cursor:pointer;
}
#circuit-comps ul li .event-img-container {
	position:relative;
	width:100%;
	height:0;
	padding-top:100%;
}
#circuit-comps ul li img {
	position:absolute;
	width:100%; height:100%;
	left:0; top:0;
	transition:0.3s ease-in-out;
	filter:saturate(75%);
	box-shadow:0 0 15px rgba(0,0,0,0.5);
}
#circuit-comps ul li:hover img {
	filter:saturate(100%);
	transform:scale(105%) translateY(-2.5%);
}
#circuit-comps ul li .event-list-name {
	line-height:1.25rem;
	margin:10px 0 5px 0;
	transition:0.3s ease-in-out;
}
#circuit-comps ul li:hover .event-list-name {
	color:#fff;
}
#circuit-comps ul li.ghost-comp {
	height:0;
	opacity:0;
	pointer-events:none;
	cursor:auto;
}

/* ----- MAIN ----- */

#main {
	position:relative;
	width:100%;
	padding:3em;
	padding-top:5em;
	background-color:#000;
	min-height:calc(100vh - 300px);
}
#main.vignette-enabled {
	background-image:url("/images/web/bg.jpg");
	background-size:100% 100%;
}
#main > .vignette {
	display:none;
}
#main.vignette-enabled > .vignette {
	display:block;
}

/* ----- FOOTER ----- */

footer {
	background-image:url("/images/web/bg.jpg");
	background-size:100%;
	position:relative;
	padding:3em;
}
#footer-inner {
	max-width:900px;
	margin:0 auto;
}
#footer-inner > * {
	flex:1;
	flex-basis:25%;
	border-right:1px solid rgba(255,255,255,0.2);
	padding:0 10%;
}
#footer-inner > *:last-child {
	border-right:none;
}
#footer-logo-sm {
	width:75%; height:auto;
}

#footer-icon-wrapper {
	width:180px;
}
footer .icon-wrap {
	display:inline-block;
	position:relative;
	font-size:2em;
	color:#aaa;
}

footer .icon-wrap::after {
	content:"";
	position:absolute;
	left:0;
	bottom:-6px;
	width:100%;
	height:2px;
	background:#fff;
	transform:scaleX(0);
	transition:transform 0.3s ease;
	transform-origin:center;
}

footer .icon-wrap:hover::after {
	transform:scaleX(1);
}

footer .icon-wrap i {
	display:inline-block;
	transition:transform 0.3s ease, color 0.3s ease;
}

footer .icon-wrap:hover i {
	transform:translateY(-5px);
	color:#fff;
}


/* ----- MODALS ----- */

.modal .modal-content {
	background-color:#333;
}
#lb-popup-content {
	width:100%;
	height:calc(100vh - 180px);
	overflow-y:scroll;
}
.modal .modal-header {
	border-bottom:none;
	border-radius:5px 5px 0 0;
	height:60px;
	padding:0 15px;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	background-image:linear-gradient(#333, #111);
}
.modal .modal-title {
	font-size:1.5em;
	font-weight:700;
	width:calc(100% - 60px);
	color:var(--gold);
}
.modal button.close {
	display:none;
}
.modal .modal-header i {
	color:#666;
	cursor:pointer;
	padding:20px 10px;
	margin-right:-10px;
	transition:0.3s ease-in-out;
}
.modal i:hover {
	color:#ccc;
}
.modal .loading {
	font-size:16pt;
	padding:15px;
	text-align:center;
}
.modal .loading i {
	padding-right:10px;
	vertical-align:bottom;
}
.modal .modal-content table {
	width:100%;
}
.modal .modal-content table td, .modal .modal-content table th {
	padding:5px;
	vertical-align:top;
	font-weight:normal;
}
#lb-popup-content table td, #lb-popup-content table th, .leaderboard-table table td, .leaderboard-table table th {
	border-bottom:1px solid #666;
}

#event-map {
	width:calc(100% + 30px);
	height:300px;
	position:relative;
	left:-15px; top:-15px;
	background-color:#ededee;
	background-image:url("/images/web/blurry-map.jpg");
	background-size:100% 100%;
}
#events-popup-headline {
	position:relative;
	width:100%;
}
#events-popup-headline h3 {
	margin:-10px 0 0 0;
	padding:0 0 0 160px;
}
#events-popup-headline .select-container {
	margin:10px 0 15px 160px;
	width:calc(100% - 170px);
}
#events-popup-icon {
	position:absolute;
	left:0; top:-60px;
	width:140px; height:140px;
	background-color:#000;
	border:5px solid #fff;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
}
#events-popup .nav-pills {
	margin:0 0 30px 145px;
}
#events-popup .nav-pills li a {
	padding:3px 10px;
	margin-left:5px;
	color:#fff;
}
#events-popup .nav-pills li a:hover {
	color:#ffff66;
	background:none;
}
#events-popup .nav-pills li.active a:hover {
	background-color:#428bca;
	color:#fff;
}
#events-popup-info table th {
	text-align:right;
	width:145px;
	padding-right:20px;
}
#events-popup-info {
	padding-bottom:30px;
}
#events-popup-info a {
	color:#ffff66;
}
.modal .modal-content .leaderboard-table table {
	margin:0 0 15px 160px;
	width:calc(100% - 170px);
}

.tab-pane {position:relative;}
.coming-soon {
	margin:60px 0 0 210px;
}
.coming-soon:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f017";
	position:absolute;
	top:-40px; left:160px;
	color:rgba(255,255,255,0.05);
	font-size:48pt;
}
#leaderboard-popup .coming-soon {
	margin:0;
	text-align:center;
}
#leaderboard-popup .coming-soon:before {
	position:relative;
	display:block;
	top:0; left:0;
}

.person-detail {
	cursor:pointer;
}
.person-detail-name:hover {color:#fff;}
.person-comps {display:none;}
.person-comps {
	padding:0 0 0 20px;
	list-style-type:circle;
}
.person-comps li {
	clear:both;
	width:100%;
	position:relative;
	white-space:nowrap;
}
.person-comps li div {
	display:inline-block;
	font-size:10pt;
	font-style:italic;
	position:relative;
	color:#999;
}
.personcomp-detail-comp {
	left:-5px;
	width:100%;
}
.personcomp-detail-points {
	left:10px;
}
.person-selected td {
	color:#ffff66;
	background-color:rgba(255,255,255,0.1);
}
.person-selected .person-detail-name:hover {color:#ffff66;}

/* CONTACT US */

#contact_form {
	width:100%;
	max-width:900px;
	margin:3rem auto;
}
#contact_form * {
	color:#fff;
}
#contact_form table {
	width:100%;
}
#contact_form input, #contact_form textarea {
	width:100%;
	padding:0 5px;
	box-sizing:border-box;
	background-color:rgba(255,255,255,0.1);
	border:1px solid rgba(255,255,255,0.25);
	box-shadow:inset 0 0 20px rgba(255,255,255,0.1);
	margin:5px 0;
}
#contact_form input::placeholder {
	color:#888;
}
#contact_form textarea {
	min-height:150px;
	padding:5px 7.5px;
}
#contact_form input[type="button"] {
	border:none;
}

/* NEWS */

#news {
	min-height:600px;
	padding: 0 15px;
}
#news table {
	width:100%;
	margin-bottom:30px;
}
#news table:last-child {margin-bottom:60px;}
#news td {padding:0 0 20px 0; position:relative;}
#news .photoContainer {
	width:200px; height:200px;
	overflow:hidden;
	border:1px solid #666;
	background-color:#000;
	position:absolute;
	left:0; top:0;
}
#news .photoContainer img {
	width:100%; height:100%;
	object-fit:cover;
}
#news .news-header {
	padding-left:240px;
}
#news .subject {
	color:var(--gold);
	font-family:"Kabel",sans-serif;
	font-size:18pt;
	border-bottom:1px dotted #ccc;
	padding-bottom:5px;
}
#news .author, #news .date, #news .time {
	display:inline-block;
	font-size:12pt;
	font-style:italic;
	color:#666;
	margin-bottom:30px;
}
#news .author {margin-right:30px;}
#news .date {margin-right:10px;}
#news .tdText {
	position:relative;
	padding-left:240px;
}