:root {
  --light-yellow: #fefef6;
  --dark-yellow: #ffffe1;
  --accent-color: #b8d2d4;
  /*63abd3*/
  --dark-blue: #074B73;
}

html, body {
  margin: 0;

}




.small {
  font-size: 0.54em;
}
.speech {
  display: none;
}

@media speech {
  .speech {
    display: block;
  }
}

body {
  counter-reset: articlenum articlenumtoc;
  font-size: 20pt;
  font-family: "Cabin", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: var(--light-yellow);
  color: var(--dark-blue);
}

video {
  margin: auto;
  width: 100%;
}

article header::before {

  content: counter(articlenum);
  font-size: 68pt;
  color: #ccc;
  position: absolute;
  top: -20pt;
  left: 0pt;
  z-index: -1;
}

nav {
  font-family: brothers;
  font-size: 14pt;
  padding: 12pt 0 64pt 0;
}
@media(min-width:800px) {
  nav {
    padding: 32pt 0 64pt 0;
  }
}

nav h1, nav h2, nav p {
  text-align: center;
}
nav h1, nav li {
  text-transform: uppercase;
}
nav h1 em {
  font-size: 8pt;
  color: #aaa;
  vertical-align: baseline;
}

article h2 {
  column-span: all;


}
nav ul {
  list-style: none;
}

li {
  display: flex;
  justify-content: space-between;

  width: 90%;
}
nav a {
  text-decoration: underline;
  color: var(--dark-blue);
}
.madebycommunity {
  width: 100px;
  opacity: 0.3;
  float: left;
  margin-right: 8pt;
  vertical-align: top;
}
nav p {
  font-size: 10pt;
  text-transform: normal;
  width: 80%;
  margin: auto;
  margin-top: 12pt;
  color: #888;

  font-family: "Cabin", sans-serif;
  font-style: italic;
}

nav p a {
  color: var(--accent-color);
}
ul.simple-list {
  list-style-type: circle;
}
li:not('.simple-list'):nth-child(2n+1) {
  font-size: 10pt;
}

li:not('.simple-list'):nth-child(2n) {
  margin-bottom: 14pt;
}

li .rule {
  flex-grow: 2;
  border-bottom: dotted 3px var(--dark-blue);
  height: 12pt;
  margin: 0pt 2pt 0 2pt;
}

.numeral::after {
  counter-increment: articlenumtoc;
  content: counter(articlenumtoc);
}

li span {
  float: right;
}

header {
  font-size: 20pt;
  font-family: brothers, serif;
  text-align: center;
  margin-top: 24pt;
  text-transform: uppercase;
  position: relative;
}
article {
  position: relative;
  margin-bottom: 50px;
  /* Space between articles */
}


.stickyheader {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
  /* Ensure it is above everything */
  background-color: var(--dark-blue);
  color: var(--accent-color);
  /* Must have a solid background */

  /* Hidden state */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* We use a class to toggle display */
.stickyheader.active {
  visibility: visible;
  opacity: 1;
  /*border-bottom: 1px var(--dark-blue);*/
}

.stickyheader .progress {
  height: 4px;
  width: 0%;
  background-color: var(--light-yellow);
}

.stickyheader .stickyheader-title{
  margin-left: 12pt;  
}

.stickyheader-counter{
  counter-increment: articlenum;
  content: counter(articlenum);
}

.stickyheader a {
  font-size: 0.7em;
  float: right;
  color: var(--light-yellow);
  margin-right:6px;
}

.separator { 
  height: 100px;
  width: 100%;
  margin: 100px 0 0 0;
  /*background: var(--accent-color);*/
}

header>em {
  font-size: 8pt;
  display: block;
}

.p {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12pt;
  min-width: 200px;
  display: block;
  margin-top: 42pt;
}
.p + figure img {
  margin-top: 42pt;
}
figure figcaption {
  margin-bottom: 42pt;
}





blockquote {
  quotes: "\201C""\201D""\2018""\2019";
  width: 100%;
  margin: 0;
  margin-top: 12pt;
  margin-bottom: 12pt;
  font-size: 20pt;

  font-style: italic;
}
blockquote:before {
  color: #fec;
  content: "\201C";
  font-size: 4em;
  line-height: 0.1em;
  margin-right: -0.14em;
  vertical-align: -0.4em;
}
blockquote .p {
  display: inline;
}
q {
  /*font-style: italic;*/
  quotes: "\201C""\201D""\2018""\2019";
}
article {}

aside,section {
  position: relative;
  padding: 0 24pt 0 24pt;
}

section {
  display: block;

}



aside header {
  font-size: 32pt;
  border-width: 6px;
  font-weight: 400;

  -webkit-column-span: all;
  column-span: all;
}

aside .p {
  font-size: 16pt;
  font-family: brothers, serif;
  text-transform: uppercase;
  margin-bottom: 42pt;
}



.all-columns {
  -webkit-column-span: all;
  column-span: all;

}

hr {
  border: 0;
  border-bottom: 8px solid var(--dark-blue);
  border-top: 3px solid var(--accent-color);
  margin: 0;
  margin-top: 90px;
  margin-bottom: 90px;
  -webkit-column-span: all;
  column-span: all;
}

article+hr {
  margin: 0;
}
picture +hr {
  margin: 0;
}
aside+hr {
  margin: 0;
}

.faded {
  background: #bbb;
  height: 3px;
  display: block;
  margin: auto;
  margin-bottom: 32pt;
}

footer {
  font-size: 12pt;
}

section img {}


figure {
  margin: 0;
}
figcaption {
  font-style: italic;
  font-size: 8pt;
  text-align: center;
  text-transform: uppercase;
  font-family: brothers, serif;
  color: var(--accent-color);
  background: var(--dark-blue);
  margin-top: -10px;
  padding: 6pt 12pt 6pt 12pt;
}
figcaption a {
  color: var(--accent-color);
}

img {
  width: 100%;
  max-width: 100%;
}




footer, .footer {
  padding: 20pt;
  background: var(--dark-blue);
  color: var(--light-yellow);
}

footer a, footer a:visited, footer a:hover {
  color: #fff !important;
}

footer img {
  width: 105px;
}


.toc-link {
  position: absolute;
  top: -16pt;
  right: 16pt;
  font-size: 12pt;
}
.story .p {
  color: #222;
  /*max-width:600px;*/
  margin: 0;
  margin-top: 20pt;
  padding: 0 0em 0 0em;
  font-size: 12pt;
  font-family: "Alice", serif;
}



.p .all-columns {
  margin: 32pt;

}
/*
	hr, blockquote{
	  display:block;
	  margin-top:20px !important;
	}
	*/
/*
	section{
	  padding-bottom:20px;
	}
	*/

@media (max-width: 360px) {
  .p {
    min-width: 0;
    width: 100%;
  }
  aside,section {
    padding: 3px;
  }
  footer {
    font-size: 6pt;
    overflow-x: scroll;
  }

}

@media (min-width: 600px) {
  section {
    -webkit-columns: 2 200px;
    -moz-columns: 2 200px;
    columns: 2 200px;
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    column-gap: 2em;
    -webkit-column-rule: 1px dotted #ddd;
    -moz-column-rule: 1px dotted #ddd;
    column-rule: 1px dotted #ddd;
    margin-top: 16pt;
    margin-bottom: 16pt;
  }

  blockquote {
    width: unset;

  }
  .story .p {
    font-size: 16pt;
  }
  article .p {
    margin-top: 16pt;

  }
  figure {
    break-inside: avoid-column;
  }

  li .rule {
    margin-top: 5pt;
  }
  nav {
    font-size: 20pt;
  }
}

@media (min-width: 1800px) {
  .body-container {
    max-width: 1800px;
    font-size: 18pt;
    margin: auto;

  }
  blockquote {
    margin-right: 18pt;

  }
  aside header {
    font-size: 80pt;
  }
  section,article,.p {
    font-size: 16pt;
  }

  figcaption {
    font-size: 12pt;
  }
  aside .p {
    font-size: 28pt;
    font-family: brothers, serif;
  }

}

@media (min-width: 1200px)and (max-width: 1799px) {
  .body-container {
    max-width: 1200px;
    font-size: 22pt;
    margin: auto;
  }
  blockquote {
    margin-right: 18pt;
  }
}