@import url('https://fonts.googleapis.com/css?family=Open+Sans:700,400,300|Amatic+SC:700,400');

:root {
	--theme-color1: #4c83c0;
	--theme-color2: #003a7c;
	--canvas-color: #fafafa;
	--calendar-accent-color: var(--theme-color1);
}

body {
	background-color: var(--canvas-color);
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: 15pt;
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
	text-transform: uppercase;
	font-weight: 300;
}

h2, h3 { font-weight: 400; }

a { text-decoration: none; }

#container {
	width: 100%;
	height: 100%;
	position: relative;
	text-align: center;
}

header {
	text-align: left;
	text-transform: uppercase;
	background-image: url(dark-wood.jpg);
	background-size: cover;
	background-color: black;
	padding: 10px 20px;
	position: relative;
	z-index: 6;
}

nav {
	float: right;
	z-index: 5;
	text-align: center;
}

header nav > ul > li > a::before {
	color: white;
	font-family: 'Material Design Icons';
	vertical-align: middle;
	content: '\F035D'; /* menu-down */
	position: relative;
	top: -2px;
}

header nav > ul > li > a:only-child::before {
	content: '';
	margin: 0;
}

#mobile-menu {
	display: none;
	border: none;
	float: right;
	clear: right;
	padding: 10px 15px;
	background-color: transparent;
	color: white;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0.025em;
	cursor: pointer;
}

#mobile-menu:hover, #mobile-menu.active {
	background-color: rgba(255,255,255,0.2);
	outline: thin solid;
}

#site-identity {
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
}

#site-identity #title { font-size: 2em; }

#site-identity .slogan { font-size: 0.7em; }

#account_menu {
	margin: 10px 0;
	text-align: right;
}

#account_menu a {
	display: inline-block;
	padding: 10px 15px;
}

#account_menu.select_bar li + li::before { content: initial; }

.marquee {
	background-color: var(--theme-color2);;
	color: white;
	line-height: 2em;
}

.marquee a { color: white; }

#photocaption {
	text-shadow: 0 0 5px rgba(0,0,0,.75);
	bottom: 10%;
	right: 0;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 2.5em;
	padding: 15px;
	background-color: transparent;
}

.section { padding: 40px 15px; }

.section, #featured0, #featured0 .cards .card { color: #7C8081; }

#featured2, #pg_featured2 { background-color: black; }

#featured0 .section, #featured2 .section { color: white; }

#featured0 {
	background-image: url(dark-wood.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.wrapper { position: relative; }

.wrapper, #photocaption {
	max-width: 1300px;
	margin: auto;
	text-align: left;
}

.main {
	display: table;
	width: 100%;
}

footer .slogan {
	text-shadow: -1px -1px #1a171e, 1px 1px #544949;
	clear: both;
	margin: 10px auto;
	text-align: center;
	color: #332d2d;
	font-size: 4em;
	font-weight: bold;
	width: 100%;
	font-family: 'Amatic SC', cursive;
	opacity: .8;
}

.has-sidebar .sidebar-container {
	display: table-cell;
	width: 300px;
	padding-right: 10px;
	padding-left: 10px;
	vertical-align: top;
}

.sidebar + .sidebar { margin-top: 1em; }

.sidebar h1 { font-size: 1.5em; }

.sidebar .copy > ul {
	list-style-type: none;
	padding-left: 0;
	text-align: center;
}

.sidebar .copy > ul > li > a {
	display: inline-block;
	font-size: 0.8em;
	text-transform: uppercase;
	font-weight: bold;
	width: 15em;
	margin-bottom: .75em;
	text-align: center;
}

#account_menu a,
.sidebar .copy > ul > li > a {
	background-color: var(--btn-bg);
	color: oklch(from var(--btn-bg) calc((l - 0.75) * -9999) 0 0);
	--btn-hover-bg: oklch(from var(--btn-bg) calc(l - clamp(-0.15, (l - 0.4) * 9999, 0.15)) c h);
	--btn-active-bg: oklch(from var(--btn-bg) calc(l - clamp(-0.25, (l - 0.4) * 9999, 0.25)) c h);
}

#account_menu a,
.sidebar .copy > ul > li > a,
.custom_button,
.cms-button {
	--btn-bg: var(--theme-color1);
}

#account_menu a:hover,
#account_menu a:focus,
.sidebar .copy > ul > li > a:hover,
.sidebar .copy > ul > li > a:focus,
.sidebar .copy > ul > li > a.current {
	background-color: var(--btn-hover-bg);
	text-decoration: none !important;
}

#account_menu a:active,
.sidebar .copy > ul > li > a:active {
	background-color: var(--btn-active-bg);
}

.sidebar .copy > ul > li > a,
.custom_button, 
.cms-button {
	letter-spacing: 2px;
	padding: 1em 1.5em;
	border: none !important;
}

.page {
	display: table-cell;
	padding: 0 15px 15px;
}

#searchbar {
	width: 100%;
	text-align: center;
	padding-bottom: 10px;
}

#searchbar input { width: 68%; }

blockquote {
	background-color: var(--theme-color1);;
	padding: 20px;
	color: white;
}

blockquote a {
	transition: all 0.2s ease-in-out;
	color: white !important;
	text-decoration: underline;
}

.page a, .sidebar a {
	font-weight: bold;
	color: var(--theme-color2);
	transition: all .2s ease-in-out;
}

.main a:hover { text-decoration: underline; }

footer {
	text-align: center;
	padding: 10px 0;
	font-size: .75em;
	background-image: url(dark-wood.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
}

#all_socialmedia > .socialmedia { display: block; }

#col-4 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 1em;
	text-align: left;
}

#col-4 > div { padding: 1em; }

.fc-view-container { font-size: 0.75em; }

@media screen and (max-width: 1000px) {
	#account_menu {
		position: static;
		float: right;
		clear: right;
	}

	#account_menu ul {
		display: block;
		margin-top: 10px;
	}

	nav {
		float: none;
		clear: left;
	}

	#photocaption { font-size: 5vw; }
}

@media screen and (max-width: 767px) {
	#site-identity {
		display: flex;
		text-align: left;
	}

	#logo + #title-and-slogan { margin-left: 1em; }
}

@media screen and (min-width: 701px) {
	nav {
		font-size: 18px;
		font-weight: 300;
		letter-spacing: 0.025em;
	}

	nav > ul > li {
		position: relative;
		display: inline-block;
		cursor: default;
		padding: 10px 15px;
	}

	nav > ul > li, nav > ul > li { border: thin solid transparent; }

	nav > ul > li:hover, nav > ul > li.current {
		background-color: rgba(255,255,255,0.2);
		border: thin solid;
	}

	nav ul ul {
		position: absolute;
		visibility: hidden;
		opacity: 0;
		border: thin solid;
		box-shadow: 0 3px 5px rgba(0,0,0,0.75);
		transition-duration: .5s;
		transition-property: opacity, visibility;
		transition-delay: .5s;
		display: inline-block;
		font-size: 16px;
		background: rgba(0,0,0,0.8);
		white-space: nowrap;
	}

	nav > ul > li > ul {
		left: 50%;
		transform: translateX(-50%);
  		top: 50px;
	}

	nav ul li:hover > ul {
		visibility: visible;
		opacity: 1;
		transition-delay: 0s;
		z-index:1;
	}

	nav ul ul::before, nav ul ul::after {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		transition: all .3s ease-in-out;
	}

	nav > ul > li > ul::before {
		left: 0;
		right: 0;
		margin: 0 auto;
		top: -8px;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid white;
	}

	nav > ul > li > ul::after {
		left: 0;
		right: 0;
		margin: 0 auto;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid black;
	}

	nav ul ul li { list-style: none; }

	nav ul ul a {
		display: block;
		padding: 15px 25px;
	}

	nav ul ul a:hover, nav ul ul a.current { background-color: var(--theme-color1); }
}

@media screen and (max-width: 700px) {
	body { background-size: auto; }

	nav {
		text-align: center;
		position: absolute;
		top: 70px;
		right: 20px;
	}
	
	#mobile-menu { display: block; }

	#site-identity { max-width: calc(100% - 100px); } /* Ensure the menu button is always at the top */

	#site-identity #title { font-size: 1.4em; }

	header nav > ul > li > a::before { content: '\F035E'; /* menu-left */ }

	nav ul {
		position: absolute;
		outline: thin solid;
		box-shadow: 0 3px 5px rgba(0,0,0,0.75);
		transition-duration: .5s;
		transition-property: opacity, visibility;
		transition-delay: .5s;
		font-size: 16px;
		background: rgba(0,0,0,0.8);
	}

	nav > ul {
		right: 0;
  		top: 0;
		display: none;
	}

	nav ul::before, nav ul::after {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		transition: all .3s ease-in-out;
	}

	nav > ul::before {
		right: 15px;
		top: -8px;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid white;
	}

	nav > ul::after {
		right: 17px;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid black;
	}

	nav ul li {
		list-style: none;
		position: relative;
		padding: 15px 25px;
		cursor: pointer;
	}

	nav ul li:hover, nav ul li:focus { background-color: var(--theme-color1); }

	nav ul ul {
		visibility: hidden;
		opacity: 0;
		right: 100%;
		margin-right: 8px;
		top: 0;
		z-index: 1;
	}

	nav ul ul.active {
		visibility: visible;
		opacity: 1;
		transition-delay: 0s;
	}

	nav ul ul::before {
		top: 20px;
		right: -8px;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-left: 8px solid white;
	}

	nav ul ul::after {
		top: 22px;
		right: -6px;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		border-left: 6px solid black;
	}

	.sidebar-container {
		width: 100%;
		padding: 0 15px;
	}

	.page h1, .sidebar h1 { text-align: center; }

	.main, .page, .sidebar-container {
		display: block !important;
		width: 100% !important;
	}
}

@media screen and (max-width: 450px) {
	#account_menu {
		width: 100%;
		text-align: center;
	}

	#site-identity #title { font-size: 1.2em; }

	header nav > ul > li > a::before { content: '\F035D'; /* menu-down */ }

	nav ul ul {
		right: 0;
		margin-right: 0;
		top: 55px;
	}

	nav ul ul::before {
		top: -16px;
		right: 15px;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid white;
	}

	nav ul ul::after {
		top: -12px;
		right: 17px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid black;
	}

	footer .slogan { font-size: 8vw; }
}

.box h2 { font-size: .9em; }

.preview_PhotoBox  {
	aspect-ratio: 3 / 1;
	margin-bottom: 1em;
}

.box-hero-image { aspect-ratio: 3 / 1; }

.box .content, .preview_PhotoBox, .box-hero { box-shadow: 0 0 5px rgba(0, 0, 0, .2); }

.box .content {
	background-color: white;
	padding: 1.5em;
}