@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,500,700'); 
@import url('https://fonts.googleapis.com/css2?family=Petrona:wght@400;500;600;700;800;900&display=swap');
html {
	background: none; 
	border: 0;
	box-shadow: none; 
	font: inherit;
	font-size: 17px;
	margin: 0;
	outline: none;
	padding: 0;
	vertical-align: baseline;
}
body {
	background-color: gray;
	background-repeat: repeat;
	color: #702900;
	counter-reset: c1 0;
    font-family: Petrona, serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 1.5rem;
	text-align: left;
	text-shadow: 0;
	text-transform: none;
}
body.pillars {
	background-color: white;
	color: black;
	}
hr {
	background-color: #F49D04;
	border-width: 0;
	height: 1px;
	margin: 2em 5em 2em 5em;
	overflow: visible;
	text-align: center;
}
hr:after {
	background-color: #FFF8E5;
	color: #F49D04;
    content: '\00A7'; /* para mark \00B6; double S \00A7*/
	font-size: 75%;
	padding: 0 .5em 0 .5em;
	position: relative;
	top: -1em;
}
.page {
	background-color: white;
	margin: 0 auto 0 auto;
	max-width: 8in;
	width: 100%;
}
main {
	background-color: white;
	margin: 0 auto 0 auto;
	width: 100%;
}
header {
	background-color: rgb(0,0,0,0);
}
body.pillars header {
	background-color: white; /* rgb(40,40,40,1); */
	}
.videobox, .mapbox {
	border: 1px solid black;
	margin: .5em 0 .5em 0;
	max-width: 100%;
	overflow: hidden;
	padding-top: 56.25%;
	position: relative;
}
.videobox iframe, .mapbox iframe {
	border: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	margin: 0;
}
img {
	border: 1px solid black;
	display: block;
	margin: 1em auto 1em auto;
	max-width: 5in;
	padding: 0;
	width: 100%;
}
img.about {
	border: none;
	float: right;
	max-width: 200px;
}
header img {
	border: none;
	margin:0;
}
body.pillars header img {
	border: none;
	display: block;
	margin: 1em auto 1em auto;
}
img.zoom {
	transition: transform ease-in-out .2s; 
	z-index: 999;
	}
img.zoom:hover {
	transform: scale(2); 
	margin-bottom: 200px;
	}

/* links ========================= */
main a, main a:link, main a:visited, main a:hover, main a:active, main a:focus {
	background: none; 
	border: 0; 
	box-shadow: none;
	color: #702900; 
	text-decoration: none; 
}
main a:link, main a:visited {
	border-bottom: 1px dotted #702900;
	transition: border-bottom .3s, color .3s;
}
main a:hover, main a:active {
	border-bottom: 5px solid #702900;
	color: lyonBrown;
	cursor: pointer;
	}

/* text ========================= */
h1, h2, h3, h4, h5, h6 {
	color: #702900;
	font-family: Montserrat, sans-serif;
	font-style: normal;
	font-weight: 700;
	margin: 1em 0 1em 0;
	text-align: left;
}
body.pillars h1, body.pillars h2, body.pillars h3, body.pillars h4, body.pillars h5, body.pillars h6  {
	color: indigo;
}

h1 {
	font-size: 150%;
	text-align: center;
}
h1.subtitle {
    font-family: Petrona, serif;
	font-size: 120%;
	font-weight: normal;
	font-style: italic;
	}
h2 {
	font-size: 125%;
	line-height: 3rem;
	text-align: center;
	}
h3 {
	font-size: 100%;
	margin-bottom: .5em;
	}
p, p.note {
	margin: 1em .5em .5em 0;
	padding: 0;
	}
p.caption {
	font-style: italic;
	text-align: center;
	margin: 0 0 2em 0;
	}
p.poem {
	font-style: italic;
	line-height: 100%;
	}
p.qt {
	margin: -.5em 0 1em 0;
}
p.qt:before {
	color: #F49D04;
	content: '\201C'; /* ldquo */
	display:inline;
	font-size: 2em;
	margin: 0;
	padding: 0 .1em 0 0;
	position: relative;
	top: .2em;
}
p.note:before {
	color: #F49D04;
	content: 'Note'; 
	display:inline;
	font-size: 1em;
	margin: 0;
	padding: 0 .5em 0 0;
	position: relative;
	}
p.numreset {
	counter-reset: c1 0;
	line-height: 0;
	}
p.num:before {
	content: counter(c1) ". ";
	counter-increment: c1;
	}
p.biblesection {
	padding-left: 2em;
	}
p.biblebook {
	padding-left: 4em;
	}
span.marker {
	border: 2px solid black;
	background-color: black;
	color: white;
	font-family: Montserrat, sans-serif;
	font-weight: bold;
	letter-spacing: .1em;
	text-transform: uppercase;
	}

span.danpray {
	font-weight: bold;
	}

span.desolate {
	text-decoration-line: underline;
	}

/* summary ====================== */
details {
	margin: .5rem;
	}
details div {
	background-color: #FFF8E5;
	border-radius: 10px;
	border: 0px solid black;
    box-shadow: 1px 1px 2px #BF6215;
    margin: 10px 0 0 1px;
    padding: 1rem 1rem 1rem 2rem;
	}
details p {
	font-size: 1rem;
	margin: 0 .25rem .5rem .25rem;
	}
details summary {
	background-color: #FFF8E5;
    border-radius: 9px;
    box-shadow: 2px 2px 3px #BF6215;
	color: #702900;
	cursor: pointer;
	display: list-item;
	padding: .5rem;
	position: relative;
	}
details h2 {
	display: inline;
	text-align: left;
    font-family: Montserrat, sans;
    font-size: 1.25rem;
	font-weight: 400;
	line-height: 3rem;
	}

body.pillars details {
	margin: .5rem;
	}
body.pillars details div {
	background-color: white;
	border-radius: 0;
	border: 0;
    box-shadow: none;
    margin: 0 0 0 1rem;
    padding: 0;
	}
body.pillars details p {
	color: black;
	font-size: 1rem;
	margin: 0 .25rem .25rem .25rem;
	}
body.pillars details summary {
	background-color: white;
    border-radius: 0px;
    box-shadow: none;
	color: indigo;
	cursor: pointer;
	display: list-item;
    font-family: Montserrat, sans;
    font-size: 1rem;
	font-weight: 400;
	line-height: 1rem;
	position: relative;
	}

body.pillars details details {
	margin: .5rem;
	}
body.pillars details details div {
	background-color: white;
	background-color: white;
    border: 0;
	border-radius: 0;
    box-shadow: none;
    margin: 0 0 0 1rem;
	padding: 0;
	}
body.pillars details details p {
	color: black;
	font-size: 1rem;
	margin: 0 .25rem .25rem .25rem;
	}
body.pillars details details summary {
	background-color: white;
    border: 0;
	border-radius: 0;
    box-shadow: none;
	cursor: pointer;
	display: list-item;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1rem;
	position: relative;
	}
body.pillars details details h2 {
	display: inline;
	text-align: left;
    font-size: 1rem;
	font-weight: 400;
	line-height: 2rem;
	}

li.goto {
	background-color: #FFF8E5;
	border: 0px solid black;
    border-radius: 9px;
    box-shadow: 2px 2px 3px #BF6215;
	color: #702900;
	cursor: pointer;
	display: block;
    font-family: Montserrat, sans;
    font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.2em;
	list-style: none;
	margin: 8px;
	padding: 15px 0px 20px 0px;
	}
li.goto:before {
	color: #702900;
	content: '\25B8'; /* tririte */
	font-size: 2rem;
	left: 0px;
	position: relative;
	top: 6px; 
	}
a.goto, a.goto:link, a.goto:visited, a.goto:hover, a.goto:active, a.goto:focus {
	background-color: transparent; 
	border: 0; 
	box-shadow: none;
	color: #702900;
	display: block;
	text-decoration: none; 
	}

body.pillars li.gotoreset {
	counter-reset: c1 0;
}
body.pillars li.goto {
	background-color: white;
	border: 0px;
    border-radius: 0px;
    box-shadow: none;
	color: indigo;
	margin: 1rem 0 0 2rem;
	padding: 5px 0px 5px 0px;
	}
body.pillars li.goto:before {
	color: indigo;
	content: '\25B8'; /* counter(c1) ") ";*/
	counter-increment: c1;
	font-size: 1.5rem;
	top: 0px;
	}
body.pillars a.goto, body.pillars a.goto:link, body.pillars a.goto:visited, body.pillars a.goto:hover, body.pillars a.goto:active, body.pillars a.goto:focus {
	color: indigo;
	}