html {
	 color: #222;
	 font-size: 1em;
	 line-height: 1.4;
	 scroll-behavior: smooth;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 */

::-moz-selection {
	 background: #2A0F10;
	 color: #F6F6F4;
	 text-shadow: none;
}

::selection {
	 background: #2A0F10;
	 color: #F6F6F4;
	 text-shadow: none;
}

hr {
	 display: block;
	 height: 1px;
	 border: 0;
	 border-top: 1px dotted #70707A;
	 margin: 1.5em 0;
	 padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
	 vertical-align: middle;
	 max-width: 100%;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	 border: 0;
	 margin: 0;
	 padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	 resize: vertical;
}

/* override default figure margins */
figure {
	margin:1em 0;
	float:none;
	width:80%;
}
figcaption {
	margin:.25em;
	font-size:1em;
}
figcaption.has-button {
	margin:1em 0;
	text-align: center;	
}

/* mobile first layout */
body {
	background-color: #F6F6F4;
	color:#16070C;
	font-family: 'Jost', sans-serif;
	z-index: -1;   
	scroll-behavior: smooth;
	display: grid;
}
header,
.primary-nav,
main {
	grid-column: 1/3;
	text-align: left;
}
header {
	display: flex;
	justify-content: center;
	background: #08121A;
	overflow: hidden;
/*	min-height: 226px;*/
}
header, main {
	padding: 1em 2em 1em 1em;
}
main {
	overflow:auto;
}
main footer {
	padding-top: 1em;
}
header h1 {
	font-size: 3em;	
	line-height:1em;
	text-transform: uppercase;
	color: #F6F6F4;
	font-weight:300;
	margin:0;
	padding:0;
	/* bluegreens only */
	/*text-shadow: 
		0px 0px #002326, -1px 1px #002326, -2px 2px #002326, -3px 3px #002326, -4px 4px #002326, -5px 5px #002326, 
		-6px 6px #002326, -7px 7px #002326, -8px 8px #002326, -9px 9px #002326, -10px 10px #002326, 
		-11px 11px #002326, -12px 12px #002326, -13px 13px #002326, -14px 14px #002326, -15px 15px #002326, 
		-16px 16px #002326, -17px 17px #002326, -18px 18px #002326, -19px 19px #002326, -20px 20px #002326, 
		-21px 21px #00404A, -22px 22px #00404A, -23px 23px #00404A, -24px 24px #00404A, -25px 25px #00404A, 
		-26px 26px #00404A, -27px 27px #00404A, -28px 28px #00404A, -29px 29px #00404A, -30px 30px #00404A, 
		-31px 31px #00404A, -32px 32px #00404A, -33px 33px #00404A, -34px 34px #00404A, -35px 35px #00404A, 
		-36px 36px #00404A, -37px 37px #00404A, -38px 38px #00404A, -39px 39px #00404A, -40px 40px #00404A, 
		-41px 41px #70707A, -42px 42px #70707A, -43px 43px #70707A, -44px 44px #70707A, -45px 45px #70707A, 
		-46px 46px #70707A, -47px 47px #70707A, -48px 48px #70707A, -49px 49px #70707A, -50px 50px #70707A, 
		-51px 51px #70707A, -52px 52px #70707A, -53px 53px #70707A, -54px 54px #70707A, -55px 55px #70707A,
		-56px 56px #70707A, -57px 57px #70707A, -58px 58px #70707A, -59px 59px #70707A, -60px 60px #70707A, 
		-61px 61px #8D9DB7, -62px 62px #8D9DB7, -63px 63px #8D9DB7, -64px 64px #8D9DB7, -65px 65px #8D9DB7, 
		-66px 66px #8D9DB7, -67px 67px #8D9DB7, -68px 68px #8D9DB7, -69px 69px #8D9DB7, -70px 70px #8D9DB7, 
		-71px 71px #8D9DB7, -72px 72px #8D9DB7, -73px 73px #8D9DB7, -74px 74px #8D9DB7, -75px 75px #8D9DB7, 
		-76px 76px #8D9DB7, -77px 77px #8D9DB7, -78px 78px #8D9DB7, -79px 79px #8D9DB7, -80px 80px #8D9DB7, 
		-81px 81px #F6F6F4, -82px 82px #F6F6F4, -83px 83px #F6F6F4, -84px 84px #F6F6F4, -85px 85px #F6F6F4, 
		-86px 86px #F6F6F4, -87px 87px #F6F6F4, -88px 88px #F6F6F4, -89px 89px #F6F6F4, -90px 90px #F6F6F4, 
		-91px 91px #F6F6F4, -92px 92px #F6F6F4, -93px 93px #F6F6F4, -94px 94px #F6F6F4, -95px 95px #F6F6F4, 
		-96px 96px #F6F6F4, -97px 97px #F6F6F4, -98px 98px #F6F6F4, -99px 99px #F6F6F4, -100px 100px #F6F6F4;*/

	/* with red */
	/*text-shadow: 
		0px 0px #002326, -1px 1px #002326, -2px 2px #002326, -3px 3px #002326, -4px 4px #002326, -5px 5px #002326, 
		-6px 6px #002326, -7px 7px #002326, -8px 8px #002326, -9px 9px #002326, -10px 10px #002326, 
		-11px 11px #002326, -12px 12px #002326, -13px 13px #002326, -14px 14px #002326, -15px 15px #002326, 
		-16px 16px #002326, -17px 17px #002326, -18px 18px #002326, -19px 19px #002326, -20px 20px #002326, 
		-21px 21px #DF2D21, -22px 22px #DF2D21, -23px 23px #DF2D21, -24px 24px #DF2D21, -25px 25px #DF2D21, 
		-26px 26px #DF2D21, -27px 27px #DF2D21, -28px 28px #DF2D21, -29px 29px #DF2D21, -30px 30px #DF2D21, 
		-31px 31px #DF2D21, -32px 32px #DF2D21, -33px 33px #DF2D21, -34px 34px #DF2D21, -35px 35px #DF2D21, 
		-36px 36px #DF2D21, -37px 37px #DF2D21, -38px 38px #DF2D21, -39px 39px #DF2D21, -40px 40px #DF2D21, 
		-41px 41px #70707A, -42px 42px #70707A, -43px 43px #70707A, -44px 44px #70707A, -45px 45px #70707A, 
		-46px 46px #70707A, -47px 47px #70707A, -48px 48px #70707A, -49px 49px #70707A, -50px 50px #70707A, 
		-51px 51px #70707A, -52px 52px #70707A, -53px 53px #70707A, -54px 54px #70707A, -55px 55px #70707A,
		-56px 56px #70707A, -57px 57px #70707A, -58px 58px #70707A, -59px 59px #70707A, -60px 60px #70707A, 
		-61px 61px #8D9DB7, -62px 62px #8D9DB7, -63px 63px #8D9DB7, -64px 64px #8D9DB7, -65px 65px #8D9DB7, 
		-66px 66px #8D9DB7, -67px 67px #8D9DB7, -68px 68px #8D9DB7, -69px 69px #8D9DB7, -70px 70px #8D9DB7, 
		-71px 71px #8D9DB7, -72px 72px #8D9DB7, -73px 73px #8D9DB7, -74px 74px #8D9DB7, -75px 75px #8D9DB7, 
		-76px 76px #8D9DB7, -77px 77px #8D9DB7, -78px 78px #8D9DB7, -79px 79px #8D9DB7, -80px 80px #8D9DB7, 
		-81px 81px #F6F6F4, -82px 82px #F6F6F4, -83px 83px #F6F6F4, -84px 84px #F6F6F4, -85px 85px #F6F6F4, 
		-86px 86px #F6F6F4, -87px 87px #F6F6F4, -88px 88px #F6F6F4, -89px 89px #F6F6F4, -90px 90px #F6F6F4, 
		-91px 91px #F6F6F4, -92px 92px #F6F6F4, -93px 93px #F6F6F4, -94px 94px #F6F6F4, -95px 95px #F6F6F4, 
		-96px 96px #F6F6F4, -97px 97px #F6F6F4, -98px 98px #F6F6F4, -99px 99px #F6F6F4, -100px 100px #F6F6F4;*/
}
main p, time, address {
	font-size:1.25em;
	line-height:1.5em;
}
main ul {
	margin:1em;
	padding: 0;
}
main ul li {
	line-height: 2.0em;
	font-size: 1.5em;
	margin-bottom:1em;
}
time {
	font-weight:bold;
}
a {
	color: #16070C;
	text-decoration: none;
	transition: all 0.3s ease;
}
header a:focus {
	border:1px dotted #F6F6F4;
}
main a {
	border:1px solid #F6F6F4;
	border-bottom: 1px solid rgba(52,111,116,1);
}
main a:hover {
	color:#511411;
	border-color: transparent;
}
main a:focus {
	border: 1px solid rgba(52,111,116,1);
}
.button {
	border: 3px solid #B03026;
	background-color: #B03026;
	color: #fff;
	padding: 5px 10px;
	font-size:1.5em;
	font-weight: bold;
	text-transform: uppercase;
	display: inline-block;
}
.button:hover, .button:focus {
	background-color: #08121A;
	border-color: #08121A;
	color:#ffecf7;
	cursor: pointer;
}
.button:focus {
	border-color: #08121A;
}
.links .button {
	width: 80%;
	padding:1em 0.75em;
	margin:0.5em;
	display:inline-block;
	border: 3px solid #08121A;
	box-shadow: 5px 5px #08121A;
}
.links .button:hover, 
.links .button:focus {
	transform: translateX(5px);
	box-shadow: 5px 5px #B03026;
	
}
.round {
	width: 150px;
	height:150px;
	object-fit: cover;
	object-position: top;
	border-radius:50%;

}
/* Forms */
label {
	display: block;
	width: auto;
	font-weight: bold;
	margin:10px 0 5px;
}
input, textarea, select {
	display: block;
	margin:0;
	padding: 10px;
	width: 100%;
	border: 1px solid #B03026;
}
input:focus, textarea:focus, select:focus {
	border-color:#DF2D21;
	border-width:3px;			
}

/* Headings */
main h1 {
	font-size: 3.25em;
	margin:50px 0 0 0;
	padding: 0;
}
article h1:first-child:before {
	display: block;
    content: "/////////////";
    font-size: 0.5em;
    color: #B03026;
    margin: 0 0 20px 0;
}
main h2 {
	font-size: 1.75em;
	margin-bottom:0.25em;
	text-transform: uppercase;
	font-weight:normal;
}
main h3 {
	font-size:1.25em;
}
main h4 {
	font-size:1em;
	font-style: italic;
}
main blockquote {
	color: #16070C;
	margin-left:0;
	font-size:1.2em;
	line-height: 1.5em;
	font-weight:100;
}
.links-header {
	margin: 20px;
}
.links-footer {
		text-align:center;
	}
.social-icon {
	width:50px;
	height:50px;
	margin: 10px;
}
.social-links a {
	border: 0px none;
	border-bottom: 0px none;
}
.social-links a:hover, .social-links a:focus {
	border: 0px none;
}


/* nav menu */
.primary-nav {
	position:sticky;
	z-index:2;
	top:0;
	margin-top:-1px;
	width:100%;
	background-color: #08121A;
}
.primary-nav .menu {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	position:absolute;
	width:100%;
	z-index:3;
	text-transform: uppercase;
	font-size: 1.5em;
	background-color: #08121A;
	clear: both;
  	max-height: 0;
  	transition: all .2s ease-out;
}
.primary-nav li a {
  display: block;
  padding: 20px 20px;
  text-decoration: none;
  color:#f4f4f4;
}
.primary-nav li a:hover,
.primary-nav li a:focus,
.menu-btn:hover,
.menu-btn:focus {	
	background-color: #f4f4f4;
	color:#08121A;
}

/* create hamburger icon */
.menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
  z-index: 4;
}
.menu-icon .navicon {
  background: #F6F6F4;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}
.menu-icon .navicon:before,
.menu-icon .navicon:after {
  background: #F6F6F4;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
.menu-icon .navicon:before {
  top: 5px;
}
.menu-icon .navicon:after {
  top: -5px;
}

/* menu toggle */
.menu-btn {
  display: none;
}
.menu-btn:checked ~ .primary-nav {
	background-color: #8D9DB7;
}
.menu-btn:checked ~ .menu {
  max-height: 440px;
}
.menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
.menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
.menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* nav menu at larger screen sizes */
@media all and (min-width: 768px) {
	.primary-nav {
		position:relative;
	}
	.primary-nav .menu {
		margin: 0.5em;
		width:auto;
		color: #F6F6F4;
		background: transparent;
		/*font-size: 1.5em;*/
		overflow:visible;
		position:sticky;
		top:0;
		clear: none;
		max-height: none;
	}
	.primary-nav li a {						f
		padding: 7px 30px 12px 30px;
/*		color: #F6F6F4;*/
		text-shadow:none;
	}
	.primary-nav li a:hover,
	.primary-nav li a:focus,
	.menu-btn:hover,
	.menu-btn:focus {
	background-color: rgba(244,244,244,0.9);
	transform: translateX(5px);
	}
	.menu-icon {
		display: none;
	}

}

@media all and (min-width: 1024px) {
/*@media all and (min-width: 1280px) {*/
	.primary-nav .menu {
		margin: 0 0.5em;
		font-size: 3em;
	}
	.primary-nav li a {
		padding: 17px 30px 22px 30px;
	}
}

/* general media queries for larger screen sizes */
@media all and (min-width: 500px) {
	figure {
		width:40%;
		float:right;
		margin:1em 3em;
	}
	.button {
		font-size:1em;
	}
}
@media all and (min-width: 768px) {
	body {
		grid-template-columns: 240px 1fr;
		grid-template-rows: 200px 1fr;
	}
	body.excerpt {
		grid-template-columns: 1fr;
	}
	header {
		grid-column: 1/2;
		grid-row: 1/2;
	}
	header h1 {
		font-size:2em;
		line-height:1em;
	}
	.primary-nav {
		grid-column: 1/2;
		grid-row: 2/3;
		background: #08121A;
	}
	main {
		grid-column: 2/3;
		grid-row: 1/3;
		overflow-y: auto;
	}
	header, main {
		padding:2em 3em;
	}
	main ul {
		margin:1em;
		padding: 0;
	}
	main ul li {
		line-height: 2.25em;
		font-size: 1.25em;
		margin-bottom: 0px;
	}
	article p:first-child {
		margin-top: 3em;
	}
	article:after {
		content: "";
		display: table;
		clear: both;
	}
	footer {
		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows:1fr;
	}
	footer p {
		grid-column: 1;
		font-size: 1em;
	}
	footer div.social-links {
		grid-column: 2;
		padding-top:10px;
	}
	.links-footer {
		grid-template-columns: 1fr;
	}
	.social-icon {
		width:30px;
		height:30px;
		margin: 10px;
	}
	.links {
		width:80%;
		margin:0 auto 3em auto;
	}

}

@media all and (min-width: 1024px) {
	body {
		grid-template-columns: 400px 1fr;
		grid-template-rows: 400px 1fr;
	}
	body.excerpt {
		grid-template-columns: 10% 1fr 10%;
	}
	header h1 {
		font-size:5em;
	}
	figure {
		/*width:20%;*/
	}

}

@media all and (min-width: 1280px) {
	body {
/*		grid-template-columns: 400px 1280px 1fr;*/
	}
	body.excerpt {
		grid-template-columns: 15% 1fr 15%;
	}
	.links {
		width:50%;
	}
}
 
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */

@media print {
	 *,
	 *:before,
	 *:after {
		  background: transparent !important;
		  color: #000 !important; /* Black prints faster */
		  -webkit-box-shadow: none !important;
		  box-shadow: none !important;
		  text-shadow: none !important;
	 }

	 a,
	 a:visited {
		  text-decoration: underline;
	 }

	 a[href]:after {
		  content: " (" attr(href) ")";
	 }

	 abbr[title]:after {
		  content: " (" attr(title) ")";
	 }

	 /*
	  * Don't show links that are fragment identifiers,
	  * or use the `javascript:` pseudo protocol
	  */

	 a[href^="#"]:after,
	 a[href^="javascript:"]:after {
		  content: "";
	 }

	 pre {
		  white-space: pre-wrap !important;
	 }
	 pre,
	 blockquote {
		  border: 1px solid #999;
		  page-break-inside: avoid;
	 }

	 /*
	  * Printing Tables:
	  * http://css-discuss.incutio.com/wiki/Printing_Tables
	  */

	 thead {
		  display: table-header-group;
	 }

	 tr,
	 img {
		  page-break-inside: avoid;
	 }

	 p,
	 h2,
	 h3 {
		  orphans: 3;
		  widows: 3;
	 }

	 h2,
	 h3 {
		  page-break-after: avoid;
	 }

	 body {
	 	display: block;
	 }
	 .primary-nav {
	 	display:none;
	 }
	header, main {
		padding:0;
		margin:0;
	}
	header { 
		min-height: 0;
	}
	header a {
		border-bottom: none;
		text-decoration: none;
	}
	header br {
		display:none;
	}
	header h1 {
		font-size: 3em;	
		line-height:1em;
		font-weight:700;
		text-shadow: none;
	}
	main {
		overflow-y: visible;
	}
	main h1 {
		font-size: 2em;
	} 
	main h1:before {
	    content: "";
	    margin: 0;
	}
	main h2 {
		font-size: 1.75em;
	} 
	main h3 {
		font-size: 1.5em;
	}
	article p:first-child {
		margin-top: 2em;
	}
}