* {
	font-family: verdana; /*system-ui;*/
	box-sizing: border-box;
	font-weight: 500;
	color: #5C5D5D;
	margin: 0;
    padding: 0;
}

/*===================================
image
===================================*/
.hero::before {
	background-image: url('/images/heroImage.jpg');
	background-size: cover;
	background-position: center;
	content: ""; 
	display: block; 
	position: absolute;
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	z-index: -2; 
	opacity: 0.5;
}

.hero {
    position: relative;
    height: 40vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#logo {
	max-height: 20vh;
	max-width: 75vw;
	vertical-align: center;
}

.boxImg {
	max-height: 75px;
	text-align: center;
	margin: auto;
}

.rulesImg {
	max-height: 120px;
	max-width: 120px;
	text-align: center;
	margin: auto;
}

.checkImg {
	height: 25px;
	text-align: center;
	vertical-align: middle;
	opacity: 0.75;
	padding: 2px;
}

.remoteImg {
	max-height: 100%;
	max-width: 100%;
	float: right;
	align: top;
}

/*===================================
layout
===================================*/
.page_container {
	font-size: 11pt;
	margin: 0 20px 0 20px;
}

h1 {
	text-align: center;
}

.row {
	width: 100%;
	flex-wrap: wrap;
	padding: 10px;
}
.grid {
	max-width: 80vw;
	margin: 0 auto;
	display: grid;
	gap: 1rem;
}

.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr));
}
.grid-cols-auto {
    grid-template-columns: repeat(auto-fit,minmax(0,1fr));
}

.pad {
	padding: 1rem;
}

.flex {
	display: flex;
}

.center {
    justify-content: center;
	align-items: center;
	text-align: center;
	vertical-align: middle;
}

.googleMap {
	 border: 0;
	 width: 100%;
	 height: 125px;
}


/*collapsible section*/
input[type='checkbox'] { display: none; }
.wrap-collabsible { margin: .1rem 0; } 
.lbl-toggle { display: block; font-weight: bold; font-family: monospace; font-size: 1.2rem; text-transform: uppercase; text-align: center; padding: 1rem; color: darkgrey; background: #f4f4f4; cursor: pointer; border-radius: 7px; transition: all 0.25s ease-out; } 
.lbl-toggle:hover { color: black; } 
.lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; } 
.toggle:checked+.lbl-toggle::before { transform: rotate(90deg) translateX(-3px); } 
.collapsible-content { max-height: 0px; overflow: hidden; transition: max-height .25s ease-in-out; } 
.toggle:checked + .lbl-toggle + .collapsible-content { max-height: 350px; } 
.toggle:checked+.lbl-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } 
.collapsible-content .content-inner { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; padding: .5rem 1rem; } 
.collapsible-content p { margin-bottom: 0; }

.map_container {
	height: 250px;
}

.footer {
	width:100%;
	text-align:center;
}

/*===================================*/
/*styles*/
/*===================================*/
.header {
	color:#0E3C75;
	text-decoration: none;
	font-weight: bold;
}
.header a {
	text-decoration: none;
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: 0 0 #0000,0 0 #0000,var(--tw-shadow);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}

.rounded {
    border-radius: .5rem;
}

.highlight {
	color:#3390FF;
	font-size:115%;
}

.sig {
	font-family: cursive;
}

.increaseFont {
	font-size:125%;
}

/*===================================*/
/*image adjustments & hightlights*/
/*===================================*/
.imgHighlight:hover { 
	transform: scale(2);
	transition: transform .2s; /* Animation */
	transform-origin: top center;
	overflow: hidden;
}
.imgHighlight-center:hover {
	transform: scale(2);
	transition: transform .2s; /* Animation */
	transform-origin: middle center !important;
}
.imgHighlight-bottom:hover {
	transform: scale(2);
	transition: transform .2s; /* Animation */
	transform-origin: bottom center;
}

/*===================================*/
/*small screen adjustments*/
/*===================================*/

@media all and (max-device-width : 480px) {
	.hero {
		height: 30vh;
	}
	.page_container {
		margin: 0;
	}
	.grid {
		max-width: 100vw;
		grid-template-columns: repeat(1, 1fr);
	}
	.flex {
		display: inline;
	}
	.wrap-collabsible {
		width: 95vw;
	}
}