a[target="_blank"]::after {
	color: darkred;
	content: " »";
}

a[target="_blank"].btn::after {
	color: var(--secondaryColor) !important;
	content: " »";
}

/*===============================================================================*/

.btn-primary {
	background-color: var(--accentColor);
	border-color: var(--accentColor);
}

.btn-primary:hover {
	background-color: var(--accentColor);
	border-color: var(--accentColor);
	color: var(--secondaryColor);
}

.btn-outline-primary {
	border-color: var(--accentColor);
	color: var(--accentColor);
}

.btn-outline-primary:hover {
	background-color: var(--accentColor);
	border-color: var(--accentColor);
	color: white;
}

/*===============================================================================*/

hr {
	width: 80%;
	margin-top: 3rem;
	margin-bottom: 3rem;
	position: relative;
}

hr::before {
	content: '';
	font-size: 1px;
	line-height: 1px;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 2rem;
	height: 2rem;
	background-image: url('images/hrbullet_opti.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

/*===============================================================================*/

hr.goldsilver,
hr.silverbronze {
	border-top: 1px solid gold;
	border-bottom: 1px solid silver;
	margin-top: 0;
	margin-bottom: 0.4rem;
	width: 90%;
	opacity: 0.3;
}

hr.goldsilver::before,
hr.silverbronze::before {
	content: none;
	display: none;
}

hr.goldsilver {
	border-top: 1px solid gold;
	border-bottom: 1px solid silver;
}

hr.silverbronze {
	border-top: 1px solid silver;
	border-bottom: 1px solid rgb(205,127,50);
}

/*===============================================================================*/

.heroContainer {
	height: 65vh;
	max-height: 540px;
	background-image: url('images/chequered.svg'), url('headers/hero-header-20200123a.jpg');
	background-size: auto 60px, cover;
	background-position: bottom -1px center, left center;
	background-repeat: repeat-x, no-repeat;
	margin-top: calc( var(--logoHeight) + ( var(--topPadding) * 2 ) + ( 1 * var(--borderBottom) ) );
}

/*===============================================================================*/

.mainContainer {
	margin-top: calc( var(--logoHeight) + ( var(--topPadding) * 2 ) + ( 4 * var(--borderBottom) ) );
}

.mainContainer h1,
.mainContainer h2,
.mainContainer h4,
.mainContainer h3 {
	font-family: 'Saira Semi Condensed', sans-serif;
	color: var(--accentColor);
}

.mainContainer h1 {
	font-size: 2rem;
}

.mainContainer h2 {
	font-weight: bold;
	font-size: 1.7rem;
}

.mainContainer h3 {
	color: rgb(128,128,128);
	font-size: 1.5rem;
}

.mainContainer h4 {
	color: rgb(110,110,110);
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 0;
}

.heroContainer + .mainContainer {
	padding-top: 0;
	margin-top: calc( 2 * var(--borderBottom) );
}

/*===============================================================================*/

.ingress {
	font-family: 'Saira Semi Condensed', sans-serif;
	font-weight: bold;
/* 	font-size: 130%; */
	font-size: 1.15rem;
}

/*===============================================================================*/

.infoBox {
}
.infoBoxInner {
}
.infoBox h2 {
	text-transform: uppercase;
	background-color: var(--accentColor);
	background-image: url('images/headerflag.svg');
	background-position: right top;
	background-size: contain;
	background-repeat: no-repeat;
	color: var(--secondaryColor);
	border: 2px solid var(--accentColor);
	border-bottom: none;
	border-radius: 8px 0 0 0;
	font-size: 1.25rem;
	font-weight: bold;
}
.infoBoxImage {
	border: 2px solid var(--accentColor);
	border-top: none;
	border-bottom: none;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.infoBoxContent {
	border: 2px solid var(--accentColor);
	border-top: none;
	border-radius: 0 0 8px 8px;
	padding: 15px;
}

/*===============================================================================*/

.raceRegistered {
	display: block;
	position: absolute;
	top: 1rem;
	right: 2rem;
	background-color: rgba(255,230,0,0.95);
	padding: 0.2rem 0.6rem;
	border-radius: 0.3rem;
	font-weight: bold;
	transform: rotate(-3deg);
	border: 2px solid rgba(255,0,0,0.6);
	box-shadow: 0 0 10px black;
}

/*===============================================================================*/

.noextlink[target="_blank"]::after,
#ctaPatreon::after,
#ctaSwish::after,
#ctaPaypal::after {
	content: none;
}
#ctaPatreon {
	background-color: rgb(249,104,84);
	border-color: rgb(249,104,84);
	background-image: url('images/become_a_patron_button@2x.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}
#ctaPatreon span {
	visibility: hidden;
}
#ctaPaypal img,
#ctaSwish img {
	margin-left: 0.25rem;
	margin-top: -2.2rem;
	margin-bottom: -2rem;
	height: 2.2rem;
}
#ctaPaypal img {
	height: 2rem;
}

/*===============================================================================*/

div.hofGold {
	background: linear-gradient(60deg, rgba(255,255,255,0) 30%, rgba(255,215,0,0.8) 100%);
}
div.hofSilver {
	background: linear-gradient(60deg, rgba(255,255,255,0) 40%, rgba(192,192,192,0.8) 100%);
}
div.hofBronze {
	background: linear-gradient(60deg, rgba(255,255,255,0) 50%, rgba(205,127,50,0.8) 100%);
}

div.hofGold,
div.hofSilver,
div.hofBronze {
	border-radius: 0 3rem 1rem 0;
}

/*===============================================================================*/

strong.hofSeason {
	display: inline-block;
	width: 2rem;
}

strong.hofYear {
	display: inline-block;
	width: 3rem;
}

/*===============================================================================*/

.tableGeneral {
	background-color: hsla(0, 1%, 85%, 1);
}
.tableGeneral.tableSemiTransparent {
	background-color: hsla(0, 1%, 85%, 0.5);
}

/*===============================================================================*/

.infoAbbrev {
	columns: 1;
	column-gap: 2rem;
	column-rule: 1px dotted rgb(160,140,140);
}

/*===============================================================================*/

.raceSettings,
.leagueSettings {
	columns: 1;
	column-gap: 2rem;
	column-rule: 1px dotted rgb(160,140,140);
}

/*===============================================================================*/

.arrow-up,
.arrow-down,
.arrow-right,
.arrow-left {
	position: relative;
	display: inline-block;
	width: 0; 
	height: 0; 
}

.arrow-up,
.arrow-down {
	top: -0.18rem;
	border-left: 0.3125rem solid transparent;
	border-right: 0.3125rem solid transparent;
}

.arrow-right,
.arrow-left {
	top: 0.02rem;
	border-top: 0.3125rem solid transparent;
	border-bottom: 0.3125rem solid transparent;
}

.arrow-up {
	border-bottom: 0.38rem solid green;
}

.arrow-down {
	border-top: 0.38rem solid red;
}

.arrow-right {
	border-left: 0.38rem solid gray;
}

.arrow-left {
	border-right:0.38rem solid gray; 
}

/*===============================================================================*/

.penalty {
	font-weight: bold;
	color: red !important;
}

.warning {
	font-weight: bold;
	color: gold !important;
}

/*===============================================================================*/

a.ytStream,
a.ytIcon {
	height: 24px;
	width: 34px;
	display: inline-block;
	background-image: url('images/yt_icon_rgb.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

a.ytStream {
	height: 30px;
	width: 43px;
	margin-left: 1rem;
}

a.gtReplay {
	height: 30px;
	width: 72px;
	margin-left: 1rem;
	display: inline-block;
	background-image: url('images/gtreplay_opti.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

a.gtReplay span,
a.ytStream span,
a.ytIcon span {
	display: none;
}

/*===============================================================================*/

div.track-L-speed span,
div.track-M-speed span,
div.track-H-speed span {
	display: none;
}

div.track-L-speed,
div.track-M-speed,
div.track-H-speed {
	width: 2rem;
	height: 2rem;
	background-repeat: no-repeat;
	background-size: cover;
}

div.track-L-speed {
	background-image: url(images/track-low.svg);
}

div.track-M-speed {
	background-image: url(images/track-med.svg);
}

div.track-H-speed {
	background-image: url(images/track-high.svg);
}

/*===============================================================================*/

@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
	.mainContainer {
		margin-top: calc( var(--logoHeight) + ( var(--topPadding) * 2 ) + ( 2 * var(--borderBottom) ) );
	}
}

@media (max-width: 767.98px) {
	.mainContainer {
	}

	div.hofGold {
		background: linear-gradient(80deg, rgba(255,255,255,0) 30%, rgba(255,215,0,0.8) 100%);
	}
	div.hofSilver {
		background: linear-gradient(80deg, rgba(255,255,255,0) 40%, rgba(192,192,192,0.8) 100%);
	}
	div.hofBronze {
		background: linear-gradient(80deg, rgba(255,255,255,0) 50%, rgba(205,127,50,0.8) 100%);
	}

	div.hofGold,
	div.hofSilver,
	div.hofBronze {
		border-radius: 0 0.5rem 0.5rem 0;
	}
}

@media (max-width: 575.98px) {
	.heroContainer {
		height: 50vh;
	}
}

@media (min-width: 576px) {
	#ctaPaypal img,
	#ctaSwish img {
		margin-top: 0.5rem;
		margin-bottom: 0;
	}
}

@media (min-width: 768px) {
	.raceSettings,
	.leagueSettings {
		columns: 2;
	}
	#ctaPaypal img,
	#ctaSwish img {
		margin-top: -2.2rem;
		margin-bottom: -2rem;
	}
}

@media (min-width: 992px) {
	#ctaPaypal img,
	#ctaSwish img {
		margin-top: 0.5rem;
		margin-bottom: 0;
	}
	.infoAbbrev {
		columns: 2;
	}
	.heroContainer {
		max-height: none;
	}
}

@media (min-width: 1200px) {
	#ctaPaypal img,
	#ctaSwish img {
		margin-top: -2.2rem;
		margin-bottom: -2rem;
	}
	.heroContainer {
		height: 75vh;
		max-height: none;
	}
}