@font-face {
font-family: 'Della Respira';
src: url('/f/dellarespira-regular.woff2') format('woff2'),
     url('/f/dellarespira-regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
unicode-range: U+000-5FF;
}


/* reset  */

html {
font-family: sans-serif; 
-ms-text-size-adjust: 100%; 
-webkit-text-size-adjust: 100%; 
}

body {
margin: 0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display: block;
}

[hidden],template {
display: none;
}

a {
background-color: transparent;
}

b,strong {
font-weight: bold;
}

h1 {
font-size: 2em;
margin: 0.67em 0;
}

small {
font-size: 80%;
}

sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

img {
border: 0;
}

svg:not(:root) {
overflow: hidden;
}

figure {
margin: 1em 40px;
}

hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
margin: 2rem 0;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(51,153,0,0), rgba(51,153,0,0.75), rgba(51,153,0,0)); 
background-image:    -moz-linear-gradient(left, rgba(51,153,0,0), rgba(51,153,0,0.75), rgba(51,153,0,0)); 
background-image:     -ms-linear-gradient(left, rgba(51,153,0,0), rgba(51,153,0,0.75), rgba(51,153,0,0)); 
background-image:      -o-linear-gradient(left, rgba(51,153,0,0), rgba(51,153,0,0.75), rgba(51,153,0,0)); 
}

table {
border-collapse: collapse;
border-spacing: 0;
}

th,td {
padding: 10px 40px 10px 0;
text-align: left;
border-bottom: 0; 
}

ul {
list-style: circle inside; }
ol {
list-style: decimal inside; }
ol, ul {
padding-left: 0;
margin-top: 0; 
}
ul ul,ul ol,ol ol,ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%; 
}
li {
margin-bottom: 1rem; 
}

/* Spacing */
pre,blockquote,dl,figure,table,p,ul,ol,form {
margin-bottom: 2.5rem; }

/* Self Clearing Goodness */
.container:after, .row:after {
content: "";
display: table;
clear: both; 
}


/* Grid / flex */

#pagearea {
display: flex;
flex-flow: row wrap;
}

.container {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }

#content {
order: 2;
flex: 1 100%;
padding-left: 0;
}

#sidemenu{
overflow: auto;
-webkit-overflow-scrolling: touch;
flex: 1 100%;
padding: 15px 0 60px 0;
order: 1;
}


/* For devices larger than 855px */
@media (min-width: 1001px) {

#content {
flex: 5;
}

#content {
padding: 0 0 1rem 2.5rem;
}

#sidemenu{
flex: 2;
}

}


/* mobile nav */

.navtoggle {
display: none;
background: #c03;
color: #fff;
border: 0;
padding: .5em;
font-size: 1.2em;
cursor: pointer;
}

.navtoggle:hover, .navtoggle:focus {
background: #903;
}

@media (max-width: 1000px) {

.navtoggle {
display: block;
}

.nav[aria-hidden="true"] {
display: none;
}

}




/* general stuff */

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1em;
line-height: 1.5;
text-align: left;
background: #fffffa url(../images/back.svg) no-repeat 0 0;
background-size: 100% auto;
background-attachment: fixed;
color: #222;
}

:focus-visible {
outline: 3px solid black;
box-shadow: 0 0 0 6px white;
}

a, a:visited {
color: #c03;
text-decoration: none;
}

main p a, main li a, main dd a, main table a {
text-decoration: underline;
}

a:hover, a:focus {
color: #fe7500;
text-decoration: underline;
}

.hide a {
left: 50%;
position: absolute;
transform: translateY(-100%);
background: #fff!important;
color: #0A74A9!important;
border: 2px solid #0A74A9;
height: auto;
padding: 8px;
}

.hide a:focus {
transform: translateY(0%);
z-index: 1000000;
}

img {
max-width: 100%;
height: auto;
}

h1, h2, h3, h4 {
font-family: 'Della Respira', Baskerville, Georgia, serif;
font-style: normal;
font-weight: normal;
color: #c03;
}

/* header */

header {
text-align: center;
}

#logo {
padding: 3em;
}

/* footer */

footer {
margin: 5em 0;
padding: 0;
color: #555;
text-align: center;
}



/* sharing */

#sharing {
width:100%;
/*height: 50px;*/
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
}

ul.share-buttons {
text-align: left;
list-style: none;
padding: 0;
margin: 0;
background: rgba(0,0,0,.5);
width: 100%;
}

ul.share-buttons img {
height: 24px;
}

ul.share-buttons li {
display: inline;
text-align: center;
margin: 0;
background: none;
padding-left: 0;
}

ul.share-buttons li a {
display: inline-block;
width: 12%;
padding: 5px 0 2px 0;
background: #000;
border-radius: 0px;
}

ul.share-buttons li.share {
padding: 0 5px;
}

ul.share-buttons li.share-fb a {
background: #3B5998;
}

ul.share-buttons li.share-tw a {
background: #000;
}

ul.share-buttons li.share-pn a {
background: #DB081c;
}

ul.share-buttons li.share-em a {
background: #444;
}

ul.share-buttons li.share-wa a {
background: #25d366;
}

ul.share-buttons li.share-pr a {
background: #3B5998;
}

ul.share-buttons li a:hover {
filter: brightness(70%);
}

ul.share-buttons .sr-only{
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

@media (min-width: 601px) {

ul.share-buttons li.share-wa {
display: none;
}

}

/* main typog */

h1 { 
margin: 0 0 1.5rem 0;
font-size: 2em; 
text-align: center;
}

h2 {
font-size: 1.7em;
margin: 1.2rem 0 .7rem 0;
clear: both;
}

h3 {
margin: .7rem 0;
font-size: 1.5em;
clear: both;
}

h4 {
margin: .7rem 0 .3rem 0;
font-size: 1.2em;
clear: both;
}

p { 
margin: 0 0 1.3rem 0;
}

p.b2t {
text-align: right;
margin-bottom: 1.3rem;
}

p.buttons {
clear: both;
margin-bottom: 2rem;
}

main p, main li {
font-size: 1.1em;
}

#back-to-top {
bottom: 50px!important;
background: rgba(204,0,51,.7);
transition: all 200ms linear;
}

#back-to-top:hover, #back-to-top:focus {
background: rgba(204,0,51,1);
}

main img {
margin: 5px;
padding: 0;
}

main ul {
margin: 0 0 1.5em 15px;
padding: 0 0 0 .5em;
list-style: disc;
}

main ol {
margin: 0 0 1.5em 0;
padding: 0;
}

main li { 
margin: 0 0 0 0;
padding: 0;
}

main li p { 
font-size: 100%;
margin: 10px 0 0 0;
}

main dl {
margin: 1.5em 0; 
padding: 1em 0 2em 0; 
text-align: left;
border-bottom: 1px solid #fe9e27;
}

main dl dt {
margin: 0; 
padding: 0; 
font-family: 'Della Respira', Baskerville, Georgia, serif;
font-weight: normal; 
font-style: normal;
font-size: 1.3em;
}

main dl dd {
padding: .5em 0; 
margin: 0;
}


/* sidebar stuff */

#sidemenu ul {
margin: 0 0 1.5em 0;
padding:0;
list-style:none;
font-size: 1.25em;
}

#sidemenu li {
margin:0;
padding: 0;
list-style:none;
}

#sidemenu li a { 
color: #c03;
text-decoration: none;
font-weight: normal;
display: block;
padding: 5px 0 5px 10px;
margin: 0;
}

#sidemenu li a:hover { 
color: #fe7500;
text-decoration: underline;
}

#sidemenu li a:visited { 
color: #fe7500;
text-decoration: none;
}

#sidemenu ul li.spacer {
margin-bottom: 1.5em;
}



/* bible toggle  */

main a.sub {
margin: 0 2px 0 0;
padding: 0 0 0 20px;
border: 0;
font-family: 'Della Respira', Baskerville, Georgia, serif;
font-size: 90%;
background: url(../images/book.svg) no-repeat 0 0;
}

main a.sub:hover {
color: #fe7500;
text-decoration: none;
background: #FFFFD7 url(../images/book.svg) no-repeat 0 0;
}

.bible {
margin: 1em .5em;
padding: .5em;
background: #FFFFD7;
border: 1px solid #fe7500;
display: block;
font-family: 'Della Respira', Baskerville, Georgia, serif;
}

.bible p {
margin: .5em;
padding: 0 0 .5em 0;
border-bottom: 1px solid #fe9e27;
}

.bible p:last-child {
padding: 0;
border: 0;
}

.ref {
margin: 5px 0 0 0;
padding: 0;
font-style: italic;	
}

#bible_toggle {
margin: 10px 0;
}

#bible_toggle a.sub {
margin: 0 2px 0 10px;
padding: 0 0 0 23px;
border: 0;
background: url(../images/book.svg) no-repeat 0 50%;
}

#bible_toggle a.sub:hover {
color: #fe7500;
text-decoration: underline;
background: url(../images/book.svg) no-repeat 0 50%;
}


/* table */

td, th { 
padding: 10px; 
margin: 0; 
border: 0; 
vertical-align: top;
}

th { 
background: #c03; 
color:#fffffa;
font-size: 110%;
font-weight: normal;
}

tr:nth-child(even) {
background: #FFFFD7; 
}


/* basic form CSS */

button, input, select, textarea {
font-family: inherit;
}

label {
margin:0 0 3px 0;
padding:0;
display:block;
font-weight: bold!important;
color: #000!important;
}
input[type=text], 
input[type=date],
input[type=datetime],
input[type=number],
input[type=search],
input[type=time],
input[type=url],
input[type=email],
textarea, select{
box-sizing: border-box;
background: #fff;
color: #111;
padding: 10px 15px;
margin:0;
border: 1px solid #fe9e27;
outline: none;	
font-size: inherit;
}
input[type=text]:focus, 
input[type=date]:focus,
input[type=datetime]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=email]:focus,
textarea:focus, 
select:focus{
border: 1px solid #c03;
}
input[type="checkbox"],input[type='radio'] {
width: 1.5em;
height: 1.5em;
margin-right: 0.5em;
vertical-align: text-top;
}
select{
width: 100%;
}
textarea{
min-height: 150px!important;
}
button, input[type=submit], input[type=button]{
background: #c03;
color: #fff;
padding: 12px 18px;
border: none;
font-size: inherit;
}
button:hover, input[type=submit]:hover, input[type=button]:hover{
background: #fe9e27;
}
.cog-form {
margin-bottom: 2em!important;
}
.cog-confirmation__message {
font-style: italic;
}
.cog-form [aria-hidden="true"], .cog-form [data-a11y-toggle]:not([aria-controls]) {
display: inline!important;
}


/* media queries */

@media screen and (max-width: 1000px) {

#logo {
padding: 1.5em
}

.navtoggle {
margin: 0 auto 1.5em auto;
}

#sidemenu {
padding: 0;
}

main {
margin: 0 10px 30px 10px;
}

h1 {
text-align: left;
}

img {
max-width: 100%;
}

footer {
margin-left: 20px;
margin-right: 20px;
font-size: .8em;
}

}

