/* Updated 2023 03 22 */



:root {

	--dark:		63,42,85;

	--light:	#9a999a;

	--medium:	#005B56;

	--grey:		#222;

	--gold:		#ffb100;

	--font-00:	font-size: 1rem;

	--font-h1:	font-size: 2.43rem;

	--font-h2:	font-size: 1.95rem;

	--font-h3:	font-size: 1.56rem;

	--font-h4:	font-size: 1.25rem;

	--font-sm:	font-size: .75rem;

	--hover:	all .2s ease-in-out;

	--scale:	scale(1.1);

}





:root { 

	line-sizing: normal; 

	text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric; 

}



* {

	position: relative;

	box-sizing: border-box;

	background-clip: padding-box;

	max-width: 100%;

	line-height: calc(1em + 0.5rem);

	hyphens: auto;

	scroll-behavior: smooth;

}



*, 

*::before, 

*::after { 

	margin: 0; 

	padding: 0; box-sizing: border-box; 

}



img, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; height: auto; }



p, h1, h2, h3, h4, h5, h6 {

	overflow-wrap: break-word;

}



html, body { 

	-moz-text-size-adjust: none;

	-webkit-text-size-adjust: none;

	text-size-adjust: none;

	text-rendering: optimizeLegibility;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

	overflow-x: hidden;

	overflow-y: scroll;

	-webkit-overflow-scrolling: touch;

}



body {

	font: normal var(--font-00) / 1.56 sans-serif;

	font-family: 'Ysabeau', sans-serif;

	color: #222;

	text-rendering: optimizeSpeed;

}



::-webkit-scrollbar {

  width: 10px;

}



::-webkit-scrollbar-track {

  background: #232E33;

  border-radius: 10px;

}



::-webkit-scrollbar-thumb {

  background: #6BAF8D;

  border-radius: 10px;

}



.flex { 				display: flex; gap: 24px; }

.flex-row, .fr { 		flex-direction: row; }

.flex-column, .fc { 	flex-direction: column; }

.justify-center, .jc { 	justify-content: center; }

.justify-around, .ja { 	justify-content: space-around; }

.justify-between, .jb { justify-content: space-between; }

.justify-end, .je { 	justify-content: flex-end; }

.align-center, .ac { 	align-items: center; }

.align-start, .as { 	align-items: flex-start; }

.flex-wrap, .fw { 		flex-wrap: wrap; }

.gap1 { gap: 1rem; }

.gap2 { gap: 2rem; }



/* Elements */



h1 { 

	padding: .5rem 0;

	font-size: 2.5rem;

	color: #fff;

	text-align: center;

}

.bar, .info h1 { 

	padding: 1rem;

	background-color: #000;

	font-weight: normal;

	font-size: 1.75rem; 

	color: #fff;

	text-align: center;

	border-radius: .5rem;

}



.bar {

	margin: 0 0 3rem;

}



.bar a {

	display: flex; 

	flex-direction: column;

	color: #fff;

	text-decoration: none; 

}



.bar span {

	display: block; 

	color: #000;

	text-align: center;

	text-transform: uppercase;

	font-size: .75rem;

}



.bar.alt {

	background-color: burlywood;

	transition: var(--hover);

}



.bar.alt a {

	color: #000;

}



.bar.alt:hover {

	transform: var(--scale);

}



.info h2 {

	margin-top: 2rem;

	padding-left: 2rem;

}



header h3 {

	display: block; 

	margin: 0 auto; 

	padding: 0 2rem;

	width: max-content;

	background-color: #fff;

	font-weight: normal;

	font-size: 1.5rem;

	color: #000;

	text-align: center;

	border-radius: .5rem;



}



h1, h2, h3, h4, h5, h6, caption, figcaption {

    text-wrap: balance; /* Takes a line that will wrap and splits it more evenly, to look balanced */

}



:is(h1, h2, h3) + * {

	margin-bottom: 0.5em;

}



p, dl, ol, ul, address {

	margin: 0 0 24px;

}



p {

	padding: 0 2rem;

	font-size: 1.35rem;

}



dd, li { 

	margin: 0 0 8px 32px; 

}



/* Links without a class get default styling. */

a:not([class]); { 

	text-decoration: none; 

	cursor: pointer; 

}



pre { white-space: pre-wrap; }

hr { border: .5px solid; }

blockquote { quotes: none; }

blockquote:before, blockquote:after { content: none; }





/* Layout */



header {

	padding-top: 2rem; 

	background: #000;

}



main {

	margin: 0 auto; 

	padding: 24px 24px 100px;

	width: 1500px;

}



nav { 

	display: flex; 

	justify-content: center;

	align-items: center;

	flex-wrap: wrap;

	gap: 24px;

	list-style: none;

	margin: 0 auto .75rem;

	padding: 0;

	width: 100%;

	text-align: center; }



nav li {

	margin: 0; }



nav a {

	display: inline-block;

	padding: 12px 24px;

	font-weight: bold;

	font-size: 1.25rem;

	color: #fff;

	text-decoration: none; 

	text-transform: uppercase;

}



nav a:hover { 

	color: #fff; 

}



.info {

	margin: 0 auto 3rem; 

	max-width: 80%;

	color: #555;

}





footer { 

	background: #000; 

}



.copy {

		margin: 0;

		padding: 24px;

		font-size: .8rem;

		color: #fff;

		text-align: center;

		text-transform: uppercase; 

}



.gallery1 li {

	list-style-type: none; 

	margin: 0;

	max-width: 400px;

	aspect-ratio: 6/4;

	object-fit: cover;

	overflow: hidden;

}



.two-up {

	list-style-type: none;

}













/* Tables */



table {

	border-collapse: collapse;

	border-spacing: 0; }



		

/* Focus Styles */



:focus-visible, :focus {

	outline: 2px solid red;

  	outline-offset: 2px; 

}



/* Remove the focus outline */

:focus:not(:focus-visible) {

  outline: none;

}





/* Forms */



form {

	margin: 0 auto; 

	width: 400px; max-width: 100%;

	font-size: 1.25rem;

	color: #000;

}



label, input, textarea {

	display: block; 

	padding: .5rem;

	width: 100%;

}



label { padding-left: 0; }



input,

textarea,

select,

button {

  color: inherit;

  font: inherit;

  letter-spacing: inherit;

}

input,

textarea,

button {

  border: 1px solid gray;

}



input[type="text"],

input[type="email"] {

	margin-bottom: 1.5rem;

}



input[type="submit"] {

	display: inline-block; 

	margin: 1rem 0 2rem;

	padding: 1rem 2rem;

	width: auto;

	background-color: #000;

	color: #fff;

	border-radius: .5rem;

	cursor: pointer;

}



button {

	-webkit-appearance: none;

	padding: 0;

	min-width: 100px;	

	background: none;

	border: none;

	border-radius: 0;

	text-align: inherit;

	box-shadow: none;

	cursor: pointer;

}



/* HONEYPOT */



input[name="website"] { position: absolute; left: -99999999px; }





/* Content Layout Shift */

{

  content-visibility: auto; /* doesn't render stuff you can't see */

  contain-intrinsic-size: 1000px; 

}



.btn {

  will-change: transform;

}





/* Utility Classes */



.red { color: #f00; }

.alignleft { float: left; margin: 0 24px 24px 0; }

.alignright { float: right; margin: 0 0 24px 24px; }

b, strong { font-weight: bold; }

i, em { font-style: italic; }

.center { text-align: center; }





[hidden], 

[type="hidden"], 

.visually-hidden,

[aria-hidden="true"] {

	border: 0;

	clip: rect(0 0 0 0); 

	clip-path: inset(50%);

	height: 1px;

	margin: -1px;

	overflow: hidden;

	padding: 0;

	position: absolute;

	white-space: nowrap; 

	width: 1px;

}