/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}
/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main { /* 1 */
  display: block;
}
/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}
/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}
/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}






/* Site-Specific */


* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: black;
}

ol {
  padding-left: 0em;
  overflow: hidden;
  list-style-position: inside;
  text-align: left;
}

li[id^="fn:"] {
  font-size: .9em;
  line-height: 1.4em;
  margin-bottom: .7em;
}

hr {
  overflow: none; /* For IE */
  border: none;
  text-align: center;
  margin: 2em 2em;
}

hr:after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -1em;
  font-size: 1em;
}

table {
  table-layout: auto;
  border-collapse: collapse;
  padding-left: 0;
  width: 100%;
  margin: 16px 0px;
}

.container {
  width: 100%;
  max-width: 1200px;
  float: left;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.top-image {
  display: inline-block;
  border: 1px;
  box-shadow: inset 1px 1px 10px -1px rgba(0, 0, 0, 1);
  /*width: 100%;*/
  width: 88%;
  max-width: 505px;
  height: 470px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  margin-top: 40px;
  margin-bottom: 10px;
}

/* Table of Contents */

.toc-line {
  width: 100%;
  font-size: 1.1em;
  line-height: 1.5em;
  font-family: 'Crimson Text', serif;
}

.toc-title {
  padding-right: 1.5em;
}

.toc-number {
  float: right;
}

td {
  vertical-align: top;
  padding: 0 0 .8em 0;
}

td span{
  background-color:#fff;
}

/* Body */

.body {
  font-size: 1.25em;
  line-height: 1.5em;
  font-family: 'Crimson Text', serif;
  /*font-family: 'Vollkorn', serif;*/
  /*font-family: 'Vollkorn script=all rev=1', serif;*/
  /*font-family: 'Merriweather', serif;*/
  /*font-family: 'Libre Baskerville', serif;*/
  /*font-family: 'Arvo', serif;*/
  word-break: keep-all;
  text-align: justify;
}











.left-margin, .middle-part-text, .middle-part-home, .right-margin {
  display: inline-block;
  /* float: left; */
  height: auto;
}

/* .left-margin { From the old template
  padding: 1px;
  min-width: 6%;
  width: calc(6% + ((94% - 575px) / 4.5));
} */

.left-margin {
  padding: 0px;
  min-width: 5%;
  width: calc(6% + ((94% - 575px) / 4.5));
}

.middle-part-text {
  padding: 0px;
  width: 88%;
  max-width: 505px;
  margin-bottom: 30px;
}

.middle-part-home {
    display: block;
    padding: 0px 0px 0px 0px;
    width: clamp(50px, calc(109.143px + 63.4vw), 596px);
    height: auto;
    max-width: 100%;
    /* margin-bottom: 30px; */
    margin-left: clamp(1px, calc(-54.571px + 18.3vw), 86px);
    margin-right: auto;
    /* box-shadow: inset 1px 1px 8px 0px rgba(0,0,0,0.49); */
}

.middle-part-home img {
    /* padding: 25px 40px 25px 40px; */
    /* padding-left: clamp(4px, calcalcc(-43.9286px + 16.9vw), 86px); */
    /* padding-left: clamp(4px, calc(-22px + 8.45vw), 86px); */
    /* padding: 0% 4% 3% 4%; */
    width: 100%;
    height: auto;
}

.photo-shadowbox {
    width: 100%;
    height: auto;
    box-shadow: inset 1px 1px 8px 0px rgba(0,0,0,0.49);
}

.right-margin {
  width: 0%
}

/* Title */
.top-buffer {
  margin-top: 50px;
  margin-bottom: 60px;
}

.title-text {
  line-height: 1.5;
  font-family: 'Crimson Text', serif;
  font-weight: 400;
  font-size: 1.8em;
}

.title {
  max-width: 460px;
  width: 89%;
  max-width: 500px;
  margin-left: 5%;
}

/* Navigation */
.arrow {
  display: inline-block;
  width: 25px;
}

.right-justify {
  text-align: right;
}

.left-justify {
  text-align: left;
}

/* .auto-carousel .prev, .auto-carousel .next {display: none;} */
.auto-carousel .prev, .auto-carousel .next {display: block; user-select:none; cursor: pointer; font-family:monospace; font-size: 2em; color: gray; position: absolute; left: 0; padding: 25px 15px; top: 100%; z-index: 9; line-height: 0;}
.auto-carousel .prev {padding: 15px 15px 15px 35%;}
.auto-carousel .next {padding: 15px 35% 15px 15px;}

header {
    padding: 0px 0px 20px 0px;
    font-family: 'Crimson Text', serif;;
}

footer {
    padding: 20px 0 0 0;
}

.site-icon {
    display: inline-block;
    margin-left: 6%
}



header {
  display: inline-block;
  /* justify-content: space-between; */
  align-items: left;
  padding: 0.5rem;
  margin-bottom: 2rem;
  width: 100%;
  min-height: 4rem;

  /* @media (min-width: 640px) {
    margin-bottom: 3rem;
  } */
}

header h1 {
    max-width: 10%;
}
header ul {
    display: inline-block;
}

header  .btn {
    display: inline-block;
    justify-content: center;
    align-items: left;
    border-radius: 0.5rem;
    padding-right: 1rem;
    padding-left: 1rem;
    height: 3rem;
    font-weight: 600;
    font-size: 1.25rem;
    user-select: none;
}

header .btn-square {
    padding: 0;
    width: 3rem;
}


header menu {
  display: inline-block;
  margin: 0 auto 5rem;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  width: 100%;
  max-width: 768px;
  color: var(--text-2);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.4;
  user-select: none;
  text-align: center;
}

header menu a {
    display: inline-block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}











@-moz-document url-prefix() {
  @media (min-width: 768px){
    .toc-title {
      padding-right: 5em;
    }
  }
}

@media (min-width: 768px){
  .body {
    font-size: 1.05em;
  }

  .title-text {
    font-size: 1.4em;
  }

  .left-margin {
    width: 10.5%;
  }

  .middle-part-text {
    padding: 0px;
    width: 70%;
  }

  .middle-part-home {
    padding: 0;
    width: calc(88% - (6% + ((94% - 575px) / 4.5)));
    /* width: clamp(596px); */
    height: auto;
    max-width: 96%;
    margin-bottom: 30px;
    box-shadow: inset 1px 1px 8px 0px rgba(0,0,0,0.49);
  }

  /* .middle-part-home {
    padding: 0px;
    width: 78%;
  } */

  .middle-part-home img {
    /* padding: 25px 40px 25px 40px; */
    padding: 6% 6% 6% 6%;
    width: 100%;
    height: auto;
}

  .right-margin {
    width: 10%;
  }

  .toc-title {
    padding-right: 5em;
  }

  ol {
    padding-left: 1.25em;
    list-style-position: outside;
  }

  .auto-carousel {position: relative; margin: 0!important;}
  .auto-carousel .prev, .auto-carousel .next {display: block; user-select:none; cursor: pointer; font-family:monospace; font-size: 3em; color: gray; position: absolute; left: 0; padding: 25px 15px; top: 50%; z-index: 9; line-height: 0;}
  .auto-carousel .prev {transform: translateY(-50%) translateX(-120%);}
  .auto-carousel .next {transform: translateY(-50%) translateX(120%);}
}

@media (min-width: 992px){
  .middle-part-text {
    width: 60%;
  }

  .middle-part-home {
    max-width: 1000px;
  }

  .right-margin {
    width: 9%;
  }

}


.auto-carousel {position: relative; margin: 0!important;}
.auto-carousel ul {overflow: auto; display: flex; flex-wrap: nowrap; scroll-snap-type: x mandatory; scroll-snap-points-y: repeat(100%); scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; margin: 0!important; padding: 0; cursor: grab; user-select: none;}
.auto-carousel ul.grabbing {cursor: grabbing; scroll-snap-type: none;}
.auto-carousel ul::-webkit-scrollbar {display: none; /* Hide scrollbar for Chrome, Safari and Opera */}
.auto-carousel ul li {position: relative; min-width: 100%; list-style: none; background: url() center center / cover no-repeat; scroll-snap-align: start; pointer-events: none;}
.auto-carousel ul li > img {border-radius: 0;}
.auto-carousel ul li > div {display: flex; justify-content: center; align-items: center; color: black; font-weight: bold; font-size: 20px;}
.auto-carousel ol {margin-block-start: 0; margin-block-end: 0;}
.auto-carousel ol {position: absolute; bottom: 0px; display: none; justify-content: center; left: 50%; transform: translateX(-50%); z-index: 9; margin-top: 0;}
.auto-carousel ol li {list-style: none; padding: 0 0px;}
.auto-carousel ol li a {display: none; height: 0px; width: 0px; border: 0px solid black; background: transparent; border-radius: 100%;}
.auto-carousel ol li.selected a {background: white;}
/* .auto-carousel .prev, .auto-carousel .next {display: none; user-select:none; cursor: pointer; font-family:monospace; font-size: 3em; color: black; position: absolute; left: 0; padding: 25px 15px; top: 50%; z-index: 9; line-height: 0;} */
.auto-carousel .next {left: auto; right: 0;}

/* .auto-carousel .prev {transform: translateY(420%) translateX(325%);}
.auto-carousel .next {transform: translateY(420%) translateX(-325%);} */