@charset "UTF-8";

/*	BAREBONES RESPONSIVE GRID FRAMEWORK (Mobile First)
	Version 3.2
	May 2018
	www.dawgeatdawg.com
*/

/* @group --- COLOR SCHEME ---*/
/*---

	.BBC_LightBlue		{ fill: hsl(209, 51%, 70%); }
	.BBC_DarkBlue		{ fill: hsl(214, 39%, 39%); }
	.BBC_Blue			{ fill: hsl(200, 76%, 41%); }

---*/
/* @end */



/* @group --- PRE-STUFF ---*/

a, textarea, input, select, img, section:focus { outline: none; }

strong, strong * { font-weight: bold; }

em, em * { font-style: italic; }

html { box-sizing: border-box; }
	*, *:before, *:after { box-sizing: inherit; }

svg { fill: currentColor; }

/* @end */



/* @group --- GLOBAL VARIABLES ---*/
:root {
	--contentMaxWidth:	1400px;
	
	--colorMain:		214, 39%, 40%;
	--colorSecondary:	209, 51%, 70%;
	--colorHighlight:	200, 76%, 40%;
	--colorBG:			0, 0%, 100%;
}
/* @end */



/* @group --- FONTS ---*/
	
@font-face {
	font-family: 'Wideman';
	font-weight: normal;
	font-style: normal;
	src: url('fonts/wideman-book-webfont.woff2') format('woff2'),
		url('fonts/wideman-book-webfont.woff') format('woff');
}

@font-face {
	font-family: 'Wideman';
	font-weight: normal;
	font-style: italic;
	src: url('fonts/wideman-bookitalic-webfont.woff2') format('woff2'),
		url('fonts/wideman-bookitalic-webfont.woff') format('woff');
}

@font-face {
	font-family: 'Wideman';
	font-weight: bold;
	font-style: normal;
	src: url('fonts/wideman-bold-webfont.woff2') format('woff2'),
		url('fonts/wideman-bold-webfont.woff') format('woff');
}

@font-face {
	font-family: 'Wideman';
	font-weight: bold;
	font-style: italic;
	src: url('fonts/wideman-bolditalic-webfont.woff2') format('woff2'),
		url('fonts/wideman-bolditalic-webfont.woff') format('woff');
}

/* @end */



/* @group --- BASIC HTML ELEMENTS ---*/
	
html { font-size: 100%; }

body {
	color: hsl(var(--colorMain));
	font-family: 'Wideman', Georgia, 'MS Serif', 'New York', 'Times New Roman', Times, serif;
	font-size: 1.0rem;
	font-weight: normal;
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: 0.01em;
	word-spacing: 0.08em;
}

p {
	margin: 0 0 1.0em;
/* 	font-size: 1.0rem; */
/* 	line-height: 1.4em; */
/* 	text-align: left; */
}

h1, h2, h3 {
	color: hsl(var(--colorSecondary));
	font-weight: bold;
	line-height: 1.2em;
	letter-spacing: 0.1em;
	text-transform: none;
	text-align: center;
}

	h1 {
		margin: 0 0 0.8em;
		font-size: 1.5rem;
	}
	
	h2 {
		margin: 0 0 0.8em;
		font-size: 1.3rem;
	}
	
	h3 {
		margin: 1.8em 0 0.8em;
		font-size: 1.0rem;
	}

hr {
	clear: both;
	width: 100%;
	height: 0;
	margin: 0 auto 0.6em;
	background: transparent;
	border: none;
	border-top: 1px solid hsl(var(--colorSecondary));
}

a:link {
	color: currentColor;
	color: hsl(var(--colorMain));
	text-decoration: none;
}

	a:visited {
		color: hsl(var(--colorMain));
		color: currentColor;
	}

		a:focus,
		a:hover {
			color: hsl(var(--colorSecondary));
		}
		
			a:active { color: hsl(var(--colorHighlight)); }

img {
	display: block;
	width: 100%;
	height: auto;
	border: none;
/* 	border-radius: 0.4rem; */
}

input,
textarea,
select {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 1.0rem;
}

/* @end */



/* @group --- STICKY FOOTER + WRAPPERS + RESPONSIVE TYPE ---*/

html {
	height: 100%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}

/*  font-size: calc( min_size + (max_size - min_size) * ((100vw - min_viewport) / (max_viewport - min_viewport))); */

	@media screen and (min-width: 320px) {
		html { font-size: calc(16px + (32 - 16) * ((100vw - 320px) / (1400 - 320))); }
	}
	@media screen and (min-width: 1400px) {
		html { font-size: 32px;
/* 			background: hsla(300, 80%, 50%, 0.2); */
			 }
	}

body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: hsla(var(--colorSecondary), 0.2);
/* 			background: hsla(50, 50%, 60%, 0.1); */
}

header,
footer {
	position: relative;
	flex-shrink: 0;
	width: 100%;
/* 			background: hsla(100, 30%, 50%, 0.2); */
}

	footer {
		background: hsl(var(--colorBG));
		border-bottom: 0.5rem solid hsla(var(--colorSecondary), 0.2);
	}

main {
	flex: 1 0 auto;
	width: 100%;
/* 			background: hsla(300, 30%, 50%, 0.2); */
}

header > div,
nav#menuTop,
article,
footer > div {
	display: block;
	position: relative;
	max-width: var(--contentMaxWidth);
	margin-left: auto;
	margin-right: auto;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
/* 			background: hsla(220, 100%, 50%, 0.1); */
}

/* @end */



/* @group --- HEADER ---*/

header > div {
	display: flex;
	flex-flow: row wrap;
/* 	justify-content: center; */
	align-items: center;
	align-content: center;
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	text-align: center;
/* 			background: hsla(20, 50%, 50%, 0.2); */
}

	header #logo {
		box-sizing: content-box;
		position: relative;
		max-width: 60%;
		filter: drop-shadow(0px 0px 6px hsl(var(--colorBG)));
/* 				background: hsla(90, 50%, 50%, 0.2); */
	}

		header #logo > a {
			display: block;
			width: 100%;
/* 			margin: 0 auto 1.0rem; */
			color: hsl(var(--colorMain));
	/* 				background: hsla(90, 50%, 50%, 0.2); */
		}
		
			header #logo > a > svg {
				overflow: visible;
				width: 100%;
				height: 1px;
				margin: 0;
	/* 					background: hsla(150, 50%, 50%, 0.2); */
			}
			
				header #logo:hover > a {
					color: hsl(var(--colorHighlight));
					filter: brightness(2.5);
					filter: saturate(1.5);
/* 					transform: scale(1.02); */
	/* 						background: hsla(150, 50%, 50%, 0.2); */
				}
			
					header #logo:active > a {
						color: hsl(var(--colorHighlight));
						filter: brightness(0.9);
						transform: scale(0.98);
					}

#hero {
	height: 50vw;
	min-height: 200px;
	max-height: 400px;
	background-image: url('/img/common/hero-People_1960px.png'), linear-gradient(hsla(200, 70%, 100%, 0.0), hsla(200, 70%, 100%, 0.2) 15%, hsla(200, 70%, 100%, 0.2) 75%, hsla(200, 70%, 100%, 1.0) 85%);
	background-size: auto 100%;
	background-position-x: center;
	background-position-y: bottom;
	background-repeat: no-repeat;
/* 			background: hsla(100, 50%, 50%, 0.1); */
}

/* @end */



/* @group --- CONTENT ---*/

main {
	padding: 0;
	background: hsl(var(--colorBG));
/* 			background: hsla(100, 50%, 50%, 0.1); */
}

	article {
/* 		margin-left: auto; */
/* 		margin-right: auto; */
		padding: 1.5rem 1.0rem 0.0rem;
		text-align: center;
/* 				background: hsla(300, 100%, 50%, 0.1); */
	}
	
		article.full {
			max-width: none;
			padding: 1.2rem 0 0.2rem;
		}

/*
		article#contact {
			background: hsla(var(--colorSecondary), 0.1);
		}
*/
	
	
	article > :last-child {
		margin-bottom: 0.0rem;
/* 				background: hsla(300, 100%, 50%, 0.1); */
	}
	
	article section {
		margin-bottom: 1.0rem;
/* 				background: hsla(300, 100%, 50%, 0.1); */
	}
	
	article img { margin-bottom: 1.0rem; }

/* 	article ol, */
	article ul {
		padding-left: 1.1em;
		text-align: left;
		list-style: outside none;
	}
	
/* 		article ol li, */
		article ul li {
			margin-bottom: 0.6rem;
/* 			line-height: 1.3em; */
		}

			article ul li::before {
				content: "▪";
				color: hsl(var(--colorSecondary));
				display: inline-block;
				width: 1.2em;
				margin-left: -1.2em;
/* 						background: hsla(100, 50%, 50%, 0.1); */
			}
	
	article a:link {
		border-bottom: 1px solid currentcolor;
	}
	
/* @end */



/* @group --- FOOTER ---*/

footer > div {
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	fill: currentColor;
	font-size: 0.8rem;
	text-align: center;
/* 			background: hsla(50, 50%, 50%, 0.1); */
}

	footer .contact { margin-bottom: 0.5rem; }
	
		footer .contact .iconCircle {
			background-color: hsl(var(--colorMain));
			color: white;
			fill: currentColor;
		}
	
	footer .address { margin-bottom: 1.1rem; }
	
		footer .address > span {
			display: block;
			visibility: hidden;
			width: 100%;
			height: 0.0rem;
			color: hsl(var(--colorHighlight));
		}
	
	footer .copyright {
/* 		margin-bottom: 0.6rem; */
		font-size: 0.6rem;
	}
	
	footer .dawg {
		visibility: hidden;
		margin-bottom: 0;
		font-size: 0.5rem;
	}
	
/* @end */



/* @group --- CLASSES | Various ---*/
	
aside {
	min-width: 16.5em;
	max-width: 16.5em;
	margin-bottom: 1.5rem;
/* 	border-top: 1.5rem solid transparent; */
	text-align: left;
/* 			background: hsla(250, 100%, 50%, 0.1); */
}

		aside h3 { text-align: left; }


.note {
	margin-top: 1.0rem;
	color: hsl(var(--colorMain));
	font-size: 0.5rem;
/* 	font-style: italic; */
	text-align: center;
}


/*--- #Quotes ---*/

blockquote {
	display: block;
	margin-bottom: 1.5rem;
/*
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
*/
	padding: 0.8rem 1.0rem;
	background: hsla(var(--colorSecondary), 0.2);
	border-radius: 0.2rem;
/*
	border-top: 0.1rem solid hsl(var(--colorSecondary));
	border-bottom: 0.1rem solid hsl(var(--colorSecondary));
*/
	border-radius: 0.2rem;
	font-style: italic;
	text-align: left;
/* 			background: hsla(250, 50%, 50%, 0.1); */
}

	blockquote q:before,
	blockquote q:after {
		content: "\201C";
		margin-left: -0.2em;
		padding-right: 0.2em;
		font-size: 1.8em;
		vertical-align: -0.2em;
		color: hsl(var(--colorSecondary));
	}
	
		blockquote q:after {
			content: "\201D";
			padding-left: 0.15em;
		}
	
	blockquote cite {
		float: right;
		margin-top: 0.6rem;
		margin-right: 0.8rem;
		color: hsl(var(--colorMain));
		font-size: 0.6rem;
		font-style: italic;
		font-style: normal;
		line-height: 1.4em;
		text-align: right;
	}
	
		blockquote cite:before { content: "\2014\2002" }


/*--- #Buttons ---*/

.buttonBox {
	clear: both;
	display: block;
/* 	align-items: stretch; */
}

	.buttonBox a:link,
	a.button { border-bottom: none !important; }

	input#submit,
	.buttonIcon,
	.button {
		display: inline-block;
		margin: 1.0em auto;
		padding: 0.5em 1.5em;
		background: hsl(var(--colorSecondary));
		border: 2px solid transparent;
		border-radius: 0.2rem;
		color: hsl(var(--colorBG));
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 1.26rem;
		text-align: center;
		text-decoration: none !important;
		cursor: pointer;
	}
	
		input#submit:hover,
		.buttonIcon:hover,
		.button:hover {
			background-color: hsl(var(--colorHighlight));
			color: hsl(var(--colorBG));
/* 			transform: scale(1.05); */
		}

			input#submit:active,
			.buttonIcon:active,
			.button:active {
				background-color: hsl(var(--colorMain));
				color: hsl(var(--colorBG));
/* 				box-shadow: inset 0 0 20px hsl(var(--colorHighlight)); */
				transform: scale(0.98);
			}

		.buttonIcon {
			padding: 0.3rem 2.0rem 0.3rem 0.8rem;
/* 			text-align: left; */
		}

			.buttonIcon svg {
				display: inline-block;
				float: left;
				width: 1.3rem;
				height: 1.3rem;
				margin-top: -0.1em;
				margin-right: 0.5rem;
				vertical-align: middle;
				color: currentColor;
				fill: currentColor;
			}

/* @end */



/* @group --- CLASSES | Section Specific ---*/



/* @end */



/* @group --- ICONS ---*/
	
svg.icon {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: -0.5em;
	margin-right: 0.5rem;
	vertical-align: middle;
	color: currentColor;
	fill: currentColor;
}

/*
	h2 svg.icon {
		width: 1.0em;
		margin-right: 0.3em;
	}
*/
	
.iconCircleMedium:link,
.iconCircleMedium:visited,
.iconCircleMedium,
.iconCircleBig:link,
.iconCircleBig:visited,
.iconCircleBig,
.iconCircle {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 2.0rem;
	height: 2.0rem;
	margin: 0 0.5rem 1.0rem;
	background: hsl(var(--colorSecondary));
	border: none;
	border-radius: 50%;
	color: white;
	fill: currentColor;
}

	.iconCircle {
		display: inline-block;
	}

	.iconCircleMedium:link,
	.iconCircleMedium:visited,
	.iconCircleMedium {
		float: left;
		width: 3.0rem;
		height: 3.0rem;
		margin: 0 0.8rem 0 0;
	}
	
	.iconCircleBig:link,
	.iconCircleBig:visited,
	.iconCircleBig {
		width: 5.0rem;
		height: 5.0rem;
		margin: 0 auto 1.0rem;
	}

		.iconCircle svg {
			width: 2.0rem;
			height: 2.0rem;
			padding: 0.3rem;
			vertical-align: middle;
		}
		
		.iconCircleMedium svg { padding: 0.5rem; }

		.iconCircleBig svg { padding: 0.9rem; }
					
					
			a.iconCircleMedium:hover,
			.iconCircleMedium:hover,
			a.iconCircleBig:hover,
			.iconCircleBig:hover,
			.iconCircle:hover {
				background-color: hsl(var(--colorHighlight));
/* 				transform: scale(1.10); */
			}

			.iconCircleMedium:active,
			.iconCircleBig:active,
			.iconCircle:active {
				background-color: hsl(var(--colorSecondary)) !important;
				color: hsl(var(--colorHighlight)) !important;
				transform: scale(0.98) !important;
			}

/* @end */



/* @group --- MODULES ---*/

	
/* @end */



/* @group --- DEBUGGERY ---*/
	
#debugScroll {
	z-index: 500;
	display: block;
	display: none;
	position: fixed;
	bottom: 0;
	right: 0.7rem;
	padding: 0.0rem 0.3rem;
	background: hsla(var(--colorHighlight), 0.2);
	border-radius: 2.0rem;
	color: white;
	font-size: 0.4rem;
	font-weight: bold;
}

/* @end */



/* @group Clearfix (2016) */

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

/* @end */