* {
	margin: 0px;
	padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 13pt;
	scroll-behavior: smooth;
}

body {
	background-color: #111111;
}

#left {
	display: inline-block;
	width: 15em;
	min-height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	transition: left 0.25s;
	z-index: 90;
}

#nav {
	background-color: #660000;
	height: 100vh;
	width: 15em;
	overflow-y: auto;
	position: relative;
}

.home-img {
	width: 8em;
	height: 8em;
	margin: 1em auto;
}

.home-img a {
	opacity: 0.85;
}

.home-img a:hover {
	opacity: 1;
}

ul#nav-list {
	font-size: 0pt;
}

li.nav-list-item {
	display: block;
	vertical-align: top;
	font-size: 15pt;
	line-height: 13pt;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	height: inherit;
	border-top: 1px solid #880000;
	border-bottom: 1px solid #440000;
}

li.nav-list-item a {
	color: #cccccc;
	text-decoration: none;
	display: block;
	height: 100%;
	width: 100%;
	padding: 0.75em 1em;
}

li.nav-list-item a:hover {
	color: #ffffff;
	background-color: #990000;
}

li.nav-list-item .normal {
	font-weight: normal;
	font-size: 11pt;
}

.img-responsive {
	width: 100%;
}

#main {
	font-size: 13pt;
	height: 100vh;
	overflow-y: scroll;
	margin-left: 15em;
	transition: margin-left 0.25s;
}

#container {
	color: #ffffff;
	max-width: 1200px;
	width: 100%;
	margin: auto;
	padding: 2em 1.5em 2em 2em;
}

h1 {
	font-size: 49pt;
}

.section {
	margin: 0px;
}

h2 {
	font-size: 29pt;
	padding: 16px 0px;
}

h3 {
	font-size: 21pt;
	padding: 16px 0px;
}

h4 {
	font-size: 13pt;
}

p, li {
	font-size: 13pt;
}

strong, em {
	font-size: inherit;
}

.grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(12, minmax(6%, 12%));
}

.grid img {
	object-fit: cover;
	object-position: top;
	box-shadow: 0px 0px 10px #330000;
	grid-column: span 1;
	grid-row: span 1;
	max-width: 100%;
	padding: 0px 0.5em 0.5em 0px;
}

.grid img:hover {
	opacity: 0.7;
	cursor: pointer;
}

.grid img.wide-2, .grid img.wide-3, .grid img.wide-4, .grid img.wide-5, .grid img.wide-6, .grid img.wide-7, .grid img.wide-8, .grid img.wide-9, .grid img.wide-10, .grid img.wide-11, .grid img.wide-12 {
	min-height: 100%;
	width: 100%;
}

.grid img.wide-2 {
	grid-column: span 2;
}

.grid img.wide-3 {
	grid-column: span 3;
}

.grid img.wide-4 {
	grid-column: span 4;
}

.grid img.wide-5 {
	grid-column: span 5;
}

.grid img.wide-6 {
	grid-column: span 6;
}

.grid img.wide-7 {
	grid-column: span 7;
}

.grid img.wide-8 {
	grid-column: span 8;
}

.grid img.wide-9 {
	grid-column: span 9;
}

.grid img.wide-10 {
	grid-column: span 10;
}

.grid img.wide-11 {
	grid-column: span 11;
}

.grid img.wide-12 {
	grid-column: span 12;
}

.grid img.long-2 {
	grid-row: span 2;
}

.grid img.long-3 {
	grid-row: span 3;
}

.grid img.long-4 {
	grid-row: span 4;
}

.grid img.long-5 {
	grid-row: span 5;
}

.grid img.long-6 {
	grid-row: span 6;
}

.grid img.long-7 {
	grid-row: span 7;
}

.grid img.long-8 {
	grid-row: span 8;
}

.grid img.long-9 {
	grid-row: span 9;
}

.grid img.long-10 {
	grid-row: span 10;
}

.grid img.long-11 {
	grid-row: span 11;
}

.grid img.long-12 {
	grid-row: span 12;
}

.margin-bottom-lg {
	margin-bottom: 18px;
}

.margin-bottom-md {
	margin-bottom: 12px;
}

.margin-bottom-sm {
	margin-bottom: 6px;
}

.margin-top-lg {
	margin-top: 18px;
}

.margin-top-md {
	margin-top: 12px;
}

.margin-top-sm {
	margin-top: 6px;
}

.margin-left-lg {
	margin-left: 18px;
}

.margin-left-md {
	margin-left: 12px;
}

.margin-left-sm {
	margin-left: 6px;
}

.margin-right-lg {
	margin-right: 18px;
}

.margin-right-md {
	margin-right: 12px;
}

.margin-right-sm {
	margin-right: 6px;
}

.clear {
	clear: both;
}

#lightbox {
	position: fixed;
	z-index: 99;
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.95);
	display: none;
}

#lightbox.visible {
	display: block;
}

#lightbox-photos {
	position: absolute;
	height: 100%;
	width: 1000vw;
	padding-top: 5em;
	z-index: 20;
}

#lightbox #lightbox-photos .lightbox-photo-wrap {
	display: inline-block;
	width: 100vw;
	height: 100%;
	float: left;
}

#lightbox #lightbox-photos .lightbox-photo-wrap img {
	margin: auto;
	max-height: 90%;
	max-width: 90%;
	display: block;
}

.control-bar {
	width: 100%;
	height: 80px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 30;
}

.control-panel {
	width: 240px;
	display: flex;
	height: 100%;
	margin: auto;
}

.control-button {
	display: inline-block;
	height: 100%;
	aspect-ratio: 1 / 1;
	vertical-align: middle;
}

#exit {
	position: absolute;
	top: 0;
	right: 0;
	height: 80px;
	aspect-ratio: 1 / 1;
	z-index: 40;
}

.control-button, #exit {
	text-align: center;
	font-size: 37pt;
	font-weight: bold;
	line-height: 70px;
}

#slide {
	font-size: 25px;
	line-height: 80px;
}

#previous, #next {
	color: #333333;
}

#previous.active, #next.active {
	color: inherit;
}

#exit.active:hover, #previous.active:hover, #next.active:hover {
	background-color: rgba(255,255,255,0.1);
	cursor: pointer;
}

#toggleNav {
	height: 2em;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	border-top: 1px solid #880000;
	border-bottom: 1px solid #550000;
	z-index: 95;
}

#toggleNavButton {
	background-color: #550000;
	height: 2em;
	width: 100%;
	text-align: right;
	color: #cccccc;
	padding: 0px 0.5em;
}

#left.close {
	left: -12em;
}

#left.close:hover {
	left: 0em;
}

#left.close #toggleNav {
	height: 100vh;
}

#left #toggleNav #toggleNavButton::after {
	content: "<<";
	position: absolute;
	top: 0;
	right: 0.4em;
	font-size: 19pt;
	font-weight: bold;
	line-height: 1.15em;
}

#left.close #toggleNav #toggleNavButton::after {
	content: ">>";
}

form {
	margin: 16px 0px;
	width: 100%;
	
	div.form-section {
		display: inline-block;
		max-width: 100%;
		min-width: 24.5%;
	
		label {
			font-size: 13pt;
			font-weight: 700;
			display: block;
		}
		
		select {
			max-width: 100%;
		}
	}
}

.wb-inv {
	display: none!important;
}

table.data-table {
	width: 100%;
	border-collapse: collapse;
	
	tr {
		tbody & {
			display: none;
			border-top: 1px solid #333333;
			
			&:has(> td > div.event:not(.wb-inv)) {
				display: table-row;
			}
		}
		
		td {
			padding: 4px 0px;
			
			div.event {
				display: block;
				
				div.event-in {
					display: inline-block;
					background-color: #660000;
					border: 1px solid black;
					border-radius: 10px;
					padding: 8px 16px;
					cursor: pointer;
					margin: 4px;

					&:hover {
						background-color: #330000;
					}

					h4 {

						a {
							color: #fff;
						}

					}

					p {
						display: none;
					}
				}
				
			}
		}
		
		th {
			padding: 8px 12px 8px 0px;
			text-align: left;
			vertical-align: top;
			
			tbody & {
				min-width: 20%;
			}
		}
	}
}

.tabs-header {
	border-bottom: 2px solid #660000;
}

button.tab-button {
	background-color: #222222;
	border: none;
	color: #ffffff;
	padding: 15px;
	font-size: 18pt;
	
	&:hover {
		background-color: #990000;
	}
	
	&.active {
		background-color: #660000;
	}
}

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

	#navOff {
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.5);
		width: 100vw;
		height: 100vh;
		display: none;
	}

	#navOff.open {
		display: block;
	}

	#nav {
		padding-top: 2em;
	}
	
	#toggleNav {
		display: block;
	}
	
	#main {
		margin-left: 3em;
	}

	#container {
		padding: 0.5em 0.25em 0.5em 0.5em;
	}
	
	h1 {
		font-size: 33pt;
	}
	
	h2 {
		font-size: 25pt;
	}
	
	h3 {
		font-size: 19pt;
	}

	h4 {
		font-size: 13pt;
	}

	p, li {
		font-size: 13pt;
	}
	
	form div.form-section {
		margin-right: 0px;
	}
	
	.tabs-header {
		border-bottom: none;
	}
	
	button.tab-button {
		font-size: 16pt;
	}
	
}

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

	.grid {
		grid-template-columns: repeat(8, minmax(8%, 15%));
	}

	.grid img.wide-sm-2 {
		grid-column: span 2;
	}

	.grid img.wide-sm-3 {
		grid-column: span 3;
	}

	.grid img.wide-sm-4 {
		grid-column: span 4;
	}

	.grid img.wide-sm-5 {
		grid-column: span 5;
	}

	.grid img.wide-sm-6 {
		grid-column: span 6;
	}

	.grid img.wide-sm-7 {
		grid-column: span 7;
	}

	.grid img.wide-sm-8 {
		grid-column: span 8;
	}

	.grid img.wide-9 {
		grid-column: span 8;
	}

	.grid img.wide-10 {
		grid-column: span 8;
	}

	.grid img.wide-11 {
		grid-column: span 8;
	}

	.grid img.wide-12 {
		grid-column: span 8;
	}

	.grid img.long-sm-2 {
		grid-row: span 2;
	}

	.grid img.long-sm-3 {
		grid-row: span 3;
	}

	.grid img.long-sm-4 {
		grid-row: span 4;
	}

	.grid img.long-sm-5 {
		grid-row: span 5;
	}

	.grid img.long-sm-6 {
		grid-row: span 6;
	}

	.grid img.long-sm-7 {
		grid-row: span 7;
	}

	.grid img.long-sm-8 {
		grid-row: span 8;
	}

	.grid img.long-sm-9 {
		grid-row: span 9;
	}

	.grid img.long-sm-10 {
		grid-row: span 10;
	}

	.grid img.long-sm-11 {
		grid-row: span 11;
	}

	.grid img.long-sm-12 {
		grid-row: span 12;
	}
	
}