/**
 * Variables
 */
:root {
	--brown: rgb(102, 51, 51);
}

html, 
body {
	margin: 0;
	padding: 0;
}

body {
	color: #010101; 
	background-color: oldlace;
	font-family: Copperplate Gothic Light, serif;
	font-size: 14px;
}
/**
 * Text Styles
 */ 
h1,
h2 {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.75em;
}
h3 {
	width: calc(100% - 24px);
	text-align: center;
	font-size: 1.5em;
	margin: 12px auto;
}
a {
	font-family: inherit;
	color: inherit;
}
a:hover {
	color: blue;
}
button {
	cursor:  pointer;
}
ul {
	padding-left: 12px;
}
/**
 * Header Styles
 */
header, footer {
	width: calc(100% - 1em);
	margin: 0.5em auto;
	padding: 0.5em;
	border: solid 4px black;
	background: ghostwhite;
	color: black;
	position: relative;
	box-sizing:  border-box;
}
header h2 {
	font-size: 1em;
}
header .fill,
footer .fill {
	fill: oldlace;
}
header .border,
footer .border {
	fill: black;
}
header .invert,
footer .invert {
	position: absolute;
}
header .top-left,
footer .top-left {
	top: -4px;
	left: -4px;
	transform: rotate(-180deg);
}
header .top-right,
footer .top-right {
	top: -4px;
	right: -4px;
	transform: rotate(270deg);
}

header .bottom-left,
footer .bottom-left {
	bottom: -4px;
	left: -4px;
	transform: rotate(90deg);
}

header .bottom-right,
footer .bottom-right {
	bottom: -4px;
	right: -4px;
	transform: rotate(0deg);
}


header ul,
footer ul {
	margin: 0 auto;
	padding: 0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content:  center;
	list-style: none;
	font-size: 18px;
}
header li {
	margin: 0.25em 1em 0;
}
footer li {
	margin: 10px;	
}
header a,
footer a {
	font-weight: bold;
}
footer + small {
	font-size: 12px;
	display: block;
	text-align: center;
	padding: 1em 0;
}
[data-menu="submenu"] {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
}

header .icon-email circle,
footer .icon-email circle,
header .icon-phone circle,
footer .icon-phone circle,
header .icon-facebook path,
footer .icon-facebook path {
    fill: black;
}
header .icon-email path,
footer .icon-email path,
header .icon-phone path,
footer .icon-phone path {
    fill: white;
}
header .icon-email .at-symbol,
footer .icon-email .at-symbol,
header a:hover .icon-email .envelope,
footer a:hover .icon-email .envelope {
    display: none;
}
header a:hover .icon-email circle,
footer a:hover .icon-email circle,
header a:hover .icon-phone circle,
footer a:hover .icon-phone circle,
header a:hover .icon-facebook path,
footer a:hover .icon-facebook path {
    fill: blue;
}
footer a:hover .icon-email .at-symbol,
header a:hover .icon-email .at-symbol {
    display: inherit;
}
header a,
footer a {
    display: inline-block;
}
footer button,
header button {
    font-size: inherit;
    font-weight: bold;
    font-family: inherit;
    border: none;
    background: none;
    color: inherit;
    text-decoration: underline;
}
footer button:hover,
header button:hover {
    color: blue;
}
[data-menu="contact-information"] {
    width: 100%;
    max-width: 1000px;
    padding: 0.5em;
    margin: 0.5em auto;  
    box-sizing: border-box;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-menu="contact-information"] li {
    margin: auto 0.5em;
}
.copyright {
    font-size: 12px;
    display: block;
    text-align: center;
    padding: 1em 0;
}
}
[data-menu="contact-information"] {
    width: 100%;
    max-width: 1000px;
    padding: 0.5em;
    margin: 0.5em auto;  
    box-sizing: border-box;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-menu="contact-information"] li {
    margin: auto 0.5em;
}





/**
 * Main Article Styles / Column
 */
article {
	width: calc(100% - (1em + 40px));
	margin: 0.5em auto;
	border: solid 4px black;
	background: ghostwhite;
	color: black;
	position: relative;
	box-sizing:  border-box;
}
article > h2 {
	border-style: solid;
	border-width: 3px 1px 1px 4px;
	border-color: black gray gray black;
	padding: 0.5em 0;
	margin: 0.5em 12px;
	box-sizing:  border-box;
	width: calc(100% - 24px);
	border-radius: 24px 24px 0 0;
}
article > h2 + p {
	width: calc(100% - 24px);
	margin: 0 auto;
}
article.columns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}
article.columns > h2 {
}
article.columns .column {
	width: calc(50% - 24px);
	margin: 12px auto;
}


/**
 * Sub Menu
 */
.sub-menu {
	margin: 0 15px 15px;
	padding: 5px;
	position: relative;
	list-style: none;
	box-sizing: border-box;
	border-style: solid;
	border-width: 2px;
	border-color: gray black black gray;
}
.sub-menu h3 {
	border: solid 1px black;
	width: 100%;
	margin: 0;
	padding: 0.25em 0;
	text-align: center;
	font-size: 19px;
	box-sizing: border-box;
}
.sub-menu ul {
	list-style: none;
}
.sub-menu > ul {
	border: solid 1px black;
	margin: 0.24em 0 0 0;
	padding: 0.25em 5px;
}
.sub-menu li ul {
	padding: 0;
	margin: 0 0 0 0.5em;
}
.sub-menu.split-menu > ul {
	display: flex;
}
/**
 * Images
 */
figure {
	margin: 0;
	padding: 2px;
	background: rgba(102, 51, 51, 0.1);
	border-style: solid;
	border-width: 1px 2px 2px 1px;
	border-color: grey black black gray;
}
figure figcaption {
	padding: 2px;
}
figure a {
	display: block;
}
figure img {
	width: 100%;
	border: black 1px solid;
	box-sizing: border-box;
}

/**
 * Alphabetical Jump Menu
 */
[data-menu="aphabetical-jump"] {
	list-style: none;
	padding: 0;
	font-weight: bold;
	display: flex;
	width: 80%;
	margin: 0.75em auto;
	justify-content: space-between;
	font-size: 18px;
}
[data-menu="aphabetical-jump"] a {
	padding: 0 2px;
	display: inline-block;
	word-wrap: none;
}
@media(max-width: 600px) {
	[data-menu="aphabetical-jump"] {
		width: 100%;
		font-size: 12px;
	}
	[data-menu="aphabetical-jump"] a {
		padding: 0 3px;
	}
}

/**
 * Hero
 */
[data-columns] {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: wrap;
}
[data-align="top"] {
	align-items: flex-start;
}
[data-columns="1"] {
	flex-direction: column;
	align-items: center;
}
[data-columns="1"] figure {
	width: 380px;
	height: auto;
	box-sizing: border-box;
}
[data-columns] .full {
	width: 100%;
	box-sizing: border-box;
}
[data-columns="2"] .primary {
	width: 60%;
	box-sizing: border-box;
}
[data-columns="2"] .secondary {
	width: 30%;
	box-sizing: border-box;
}
[data-columns="3"] .primary {
	width: 50%;
	box-sizing: border-box;
}
[data-columns="3"] .secondary {
	width: 20%;
	margin: 0 5px;
	box-sizing: border-box;
}
[data-columns="3"] > section {
	width:  30%;
}
@media(max-width: 600px) {
	[data-columns="2"],
	[data-columns="3"] {
		flex-direction: column;
	}
	[data-columns="2"] .primary,
	[data-columns="2"] .secondary,
	[data-columns="3"] .primary,
	[data-columns="3"] .secondary {
		width: 90%;
		margin: 5px auto;
	}
}
@media(max-width: 400px) {
	[data-columns="1"] figure {
		width: 90%;
		height: auto;
	}
}
.callout {
	border: solid 1px black;
	padding: 7px;
	position: relative;
}
.callout:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 2px solid black;
}
.callout p,
.callout h4,
.callout h5 {
	margin: 0.25em 0 0.5em;
	font-size: 1em;
}
.callout + .sub-menu {
	margin-top: 1em;
}
.callout ul {
	padding: 0 0 0 1em;
	margin: 0.25em 0;
}
.callout + .callout {
	margin-top: 0.5em;
}
/**
 * Data tables
 */
[data-table] {
	width: calc(100% - 24px);
	margin: 1em auto 1em;
	border: solid 1px black;
}
[data-table] th,
[data-table] td {
	vertical-align: center;
	text-align: center;
	color: black;
	border: solid 1px black;
}
[data-table] button {
	color: black;
	border: solid 1px black;
	border-radius: 3px;
}

/*
 * Gallery styles
 */
.image-gallery {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: rgba(0,0,0,0.9);
	z-index: 99;
}
[data-show="nope"] {
	display: none;
}
[data-show="yup"] {
	display: block;
}
.image-gallery button {
	position: absolute;
	z-index: 10;
}
[data-button="gallery-close"] {
	top: 0;
	right: 0;
	margin: 1vh 1vw 0 0;
}
[data-button="gallery-previous"],
[data-button="gallery-next"] {
	top: 50%
}
[data-button="gallery-previous"] {
	left: 1vw;
}
[data-button="gallery-next"] {
	right: 1vw;
}
.image-gallery small {
	display: block;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	background: white;
	font-weight: bold;
	padding: 0.5em 1em;
	z-index: 1;
	border-radius: 0 0 0.5em 0;
}
.image-gallery ul {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	left: -0vw;
	transition: left 0.5s ease-in-out 0.25s;
}
.image-gallery li {
	height: 100%;
	width: 100vw;
}
.image-gallery img {
	height: auto;
	width: auto;
	max-height: 75vh;
	max-width: 75vw;
	margin: 0 auto 1em;
	display: block;
}
.image-gallery figure {
	width: 80%;
	margin: 1em auto 0;
	padding: 1em;
	background: grey;
	box-sizing: border-box;
}
.image-gallery figcaption,
.image-gallery strong {
	text-align: center;
	display: block;
}


/*
 * Hero Gallery
 */
[data-gallery="hero"] {
	position: relative;
	width: 70%;
	overflow: hidden;
	margin-left: 5%;
}
[data-gallery="hero"] button {
	position: absolute;
	top: 0;
	z-index:  10;
}
[data-gallery="hero"] [data-button="previous"] {
	left: 0;
}
[data-gallery="hero"] [data-button="next"] {
	right: 0;
}
[data-gallery="hero"] .slides {
	display: flex;
	transition: all 1.0s ease-in-out 0.0s;
	align-items: center;
	justify-content: space-between;
}
[data-gallery="hero"][data-total-slides="5"] .slides {
	width: 500%;
}
[data-gallery="hero"][data-total-slides="4"] .slides {
	width: 400%;
}
[data-gallery="hero"][data-total-slides="3"] .slides {
	width: 300%;
}
[data-gallery="hero"][data-total-slides="2"] .slides {
	width: 200%;
}
[data-gallery="hero"] figure {
	width:  100%;
}
[data-gallery="hero"][data-total-slides="5"][data-slide="1"] .slides {
	transform: translateX(0%);
}
[data-gallery="hero"][data-total-slides="5"][data-slide="2"] .slides {
	transform: translateX(-20%);
}
[data-gallery="hero"][data-total-slides="5"][data-slide="3"] .slides {
	transform: translateX(-40%);
}
[data-gallery="hero"][data-total-slides="5"][data-slide="4"] .slides {
	transform: translateX(-60%);
}
[data-gallery="hero"][data-total-slides="5"][data-slide="5"] .slides {
	transform: translateX(-80%);
}
[data-gallery="hero"][data-total-slides="4"][data-slide="1"] .slides {
	transform: translateX(0%);
}
[data-gallery="hero"][data-total-slides="4"][data-slide="2"] .slides {
	transform: translateX(-25%);
}
[data-gallery="hero"][data-total-slides="4"][data-slide="3"] .slides {
	transform: translateX(-50%);
}
[data-gallery="hero"][data-total-slides="4"][data-slide="4"] .slides {
	transform: translateX(-75%);
}
[data-gallery="hero"][data-total-slides="3"][data-slide="1"] .slides {
	transform: translateX(0%);
}
[data-gallery="hero"][data-total-slides="3"][data-slide="2"] .slides {
	transform: translateX(-33.33%);
}
[data-gallery="hero"][data-total-slides="3"][data-slide="3"] .slides {
	transform: translateX(-66.66%);
}
[data-gallery="hero"][data-total-slides="2"][data-slide="1"] .slides {
	transform: translateX(0%);
}
[data-gallery="hero"][data-total-slides="2"][data-slide="2"] .slides {
	transform: translateX(-50%);
}
.thumbnail {
	max-width: 50%;
	margin: 1em auto;
}
.thinner {
	max-width: 75%;
	margin: 1em auto;
}
.center {
	width:  90%;
	max-width: 800px;
	margin: 1em auto;
}




/*
	BAR
*/
[data-template="index"] {
	width: calc(100% - 24px);
	margin: 0 auto 1em;
	justify-content: space-between;
}


/*
	FOO
*/
[data-toggler] {
	display: block;
	width: 100%;
	text-align: left;
	cursor: pointer;
}
[data-toggler] i {
	font-style: inherit;
	transition:  all 0.5s ease-in-out 0.0s;
	display: inline-block;
	transform-origin: 50% 50%;
}
[data-toggler][data-state="closed"] i {
  transform: rotate(0deg);
}
[data-toggler][data-state="open"] i {
  transform: rotate(90deg);
}
[data-state="closed"] + [data-togglee] {
	display: none;
}
[data-state="open"] + [data-togglee] {
	display: block;
	box-sizing: border-box;
	border-style: solid;
	border-width: 1px 2px 2px 1px;
	border-color: grey black black gray;
	margin: 0 10px 1em;
	padding: 1em 2em;
	box-shadow: black 2px 2px 2px;
}
[data-togglee] h6 {
	font-size: 1em;
	margin: 0.5em 0 0 0;
}



/*:not(:defined) {}*/

table, 
td {
	border: solid 1px black;
}
.table-map {
	border-collapse: collapse;
	border-spacing: 0;
	max-width: 100%;
}
.table-map td {
	margin: 0;
	padding: 0;
}
.table-map img {
	display: block;
	height: auto;
	width: 100%;
}

.breadcrumbs {
	list-style: none;
	display: flex;
	font-size: 0.75em;
	margin: 0;
	padding: 0;
	color: white;
	height: 24px;
	width: auto;
	align-items: center;
	justify-content: flex-start;
	flex-direction: row;
}
.breadcrumbs svg {
	display: block;
	height: 24px;
	width: 24px;
}
.breadcrumbs path {
	fill: white;
}
.breadcrumbs li {
	background: black;
	padding: 0 0.25em;
	position: relative;
}
.breadcrumbs li:after {
	background: black;
	height: 24px;
	width: 24px;
	position: absolute;
	left: 100%;
	top: 0;
	border-radius: 0 0 24px 0;
	content: '»';
	display: inline-block;
	margin-left: 0.5em;
	color: white;
}
.breadcrumbs li:first-child {
	padding: 0;
}
.breadcrumbs li:last-child:after {
	content: '';
	margin: 0;
	height: 24px;
	width: 24px;
	border: 0 0 24px 0;
}
.breadcrumbs li:hover {
	background: white;
}
.breadcrumbs a {
	height: 24px;
	line-height: 24px;
}
.breadcrumbs li:hover a {
	color: black;
}
.breadcrumbs li:hover path {
	fill: black;
}



[data-cemetery] h2 small {
	display: block;
	font-size: 0.5em;
}




.text-article p {
	padding-left: 12px;
	padding-right: 12px;
}
.text-article blockquote,
.text-article ul,
.text-article hr {
	margin: 12px 24px;
}
.text-article h3 {
	text-align: left;
}
.text-article ohs-book {
	padding: 12px 24px;
	display: block;
	box-sizing: border-box;
}



[data-page="genealogy"] [data-list="letters"] {
	padding: 0;
	margin: 0 12px;
	list-style: none;
	width: calc(100% - 24px);
}
[data-page="genealogy"] [data-list="letters"] > li {
	width: 100%;
}
[data-page="genealogy"] [data-letter],
[data-page="genealogy"] [data-surname],
[data-page="genealogy"] [data-person-id] {
	width: 100%;
	background: none;
	outline: none;
	border-top: solid 1px black;
	border-right: none;
	border-bottom: none;
	border-left: none;
	text-align: left;
}
[data-page="genealogy"] [data-letter]:hover,
[data-page="genealogy"] [data-surname]:hover {
	background: ivory;
}
[data-page="genealogy"] [data-toggle="closed"] + .surname-list {
	display: none;
}

.surname-list,
[data-people] {
	padding: 0;
	margin: 0 12px;
	list-style: none;
	width: calc(100% - 24px);
}
[data-toggle="open"]:after,
[data-show-person="nope"] > button:after {
	content: " ➡️";
}
[data-toggle="closed"]:after,
[data-show-person="yup"] > button:after {
	content: " ⬇️";
}

[data-show-person="nope"] ul,
[data-show-person="nope"] pre {
	display: none;
}
[data-media-grid] {
	display: flex;
	align-items: flex-start;
	justify-content:  space-between;
	margin: 0 12px 1em;
	padding-bottom: 12px;
	border-bottom: solid 1px gray;
}
[data-media-grid="left"] {
	flex-direction: row;	
}
[data-media-grid="right"] {
	flex-direction: row-reverse;
}
[data-media-grid] figure {
	width: 45%;
}
[data-media-grid] section {
	width: 50%;
}