:root {
  --space: 2rem;
  --space-xs: calc(var(--space) / 3);
  --space-sm: calc(var(--space) / 2);
  --space-md: calc(var(--space) * 2);


}

@font-face {
  font-family: "Lusitana";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Lusitana/Lusitana-Regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lusitana";
  font-style:normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Lusitana/Lusitana-Bold.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style:normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Lato/Lato-Medium.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style:italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Lato/Lato-MediumItalic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style:normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/Lato/Lato-Bold.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style:italic;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/Lato/Lato-BoldItalic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body, p, div, h5, h6 { font-family: 'Lato', sans-serif; }
h1, h2, h3, h4 {font-family: 'Lusitana', Times, serif;}

.font-weight-bold {
  font-weight:800;
}

.nav-max-width { max-width:1140px!important; }
a.navbar-brand:link { text-decoration: none; }
a.navbar-brand:hover { text-decoration: underline; }


/* Background header image */
/* Small devices (landscape phones, 576px and below) */
  @media (max-width: 575.98px) {.top-bkgd { background-image: url("/assets/img/books-575.webp"); } }

/* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {.top-bkgd { background-image: url("/assets/img/books-767.webp"); } }

/* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {.top-bkgd { background-image: url("/assets/img/books-991.webp"); } }

/* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {.top-bkgd { background-image: url("/assets/img/books-1199.webp"); } }

/* X-Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {.top-bkgd { background-image: url("/assets/img/books-1400.webp"); } }

  /* XX-Large devices (larger desktops, 1400px and up)  */
  @media (min-width: 1400px) {.top-bkgd { background-image: url("/assets/img/books-1920.webp"); } }

  /* XX-Large devices (larger desktops, 1921px and up)  */
   @media (min-width: 1921px) {.top-bkgd { background-image: url("/assets/img/books-2560.webp"); } }

  /* XX-Large devices (larger desktops, 2561px and up)  */
  @media (min-width: 2561px) {.top-bkgd { background-image: url("/assets/img/books-3840.webp"); } }

/* .top-bkgd { margin:0!important; }
 @media (min-width: 768px) {.top-bkgd { margin:0 2rem;} }*/


/* This was made with GlassGenerator.netlify.app */ 
.glass-container { background: rgba(32, 16, 8, 0.5); }

.bkgd-ground { 
  max-width: 1140px!important; 
  background-color: #faf3ed; 
}

.transparent-bkgd { background-color:transparent; }

.results-max-width { max-width:992px; }

.reading-width {
  max-width:750px;
  margin:0 auto;
}

.ack-reading-box {
  max-width:600px;
  margin:0 auto;
  text-align:left;

}

.hero-text { color:rgb(0,0,0);opacity:0.6; }

h3 {color:#794723 !important;}

.genredivider { 
  color:#794723 !important; 
  border-top:1px solid #794723; 
  text-align:center;
}

.card-header {background-color:#e1bb80 !important; }

.opening-line {
  padding-right:2em!important;
  padding-left:2em!important;
  font-size: larger!important;
  font-weight:bold!important;
}

.quote-box, .review-box {
  display:flex;
  align-items: center;
  justify-content: center;
  margin:2em auto;
  max-width:600px;
  background-color:#fff;
}

.quote-content {
  text-align: center;
  padding:1em;
  padding-bottom:0;
  background-color: #fff;
}

.review-content {
  text-align: left;
  padding:1em;
  background-color: #fff;
}

.review-content p { margin-bottom:0; }

.review-content a { 
  display:inline; 
  padding-left:1em;
}

a.author-link { 
  display:block; 
  margin-bottom:1.5em!important;
  margin-left:1.5em!important;
  padding-right:1.5em!important;
}
.overflow-vertical {overflow-y: scroll;}


/* Side Navigation Menu ///////////////////////////////////// */
.offcanvas-button-trigger { 
  width:90px;
  z-index:101;
  margin-top:0;
  padding:2px;
  background-color: rgba(74, 38, 13);
  color:#fff;
}

.offcanvas-button-trigger:link, 
.offcanvas-button-trigger:hover, 
.offcanvas-button-trigger:active,
.offcanvas-button-trigger:visited {
  background-color: rgba(74, 38, 13);
  color:#fff;
}

.author-scroll-content {
  padding-top:1em;
  background-color:#fff;
}

@media (max-width:767px) {
  .author-list-offcanvas { display:inline-block; }
  .author-list-large { display:none; }
}

@media (min-width:768px) { 
  .offcanvas-button-trigger, .author-list-offcanvas { display:none; } 
  .author-list-large { display:block; }
}

.author-list-large { 
  max-width: 250px;
  padding:4px;
  margin-right:.65em;
}

.author-list-title {
  margin-top:0;
  margin-bottom:0;
  padding-top:.5em;
  padding-bottom:.5em;
  background-color: rgba(74, 38, 13);
  color:white;
  text-align: center;
}

.offcanvas {
  position: fixed;
  bottom:3%;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  background-color: #f9f3ed;
  background-clip: padding-box;
  outline: 0;
  transition: transform 0.3s ease-in-out;
  z-index:102;
}

@media (prefers-reduced-motion: reduce) {
  .offcanvas {
    transition: none;
  }
}

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  background-color: rgba(74, 38, 13);
  color:#fff;
}

.offcanvas-header .btn-close {
  padding: 0.5rem 0.5rem;
  margin-top: -0.5rem;
  margin-right: -0.5rem;
  margin-bottom: -0.5rem;
}

.offcanvas-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.offcanvas-body {
  padding: 1rem 1rem;
  z-index:102;
}

.offcanvas-start {
  top: 0;
  left: 0;
  width: 260px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
}

.offcanvas-end {
  top: 3%;
  right: 0;
  width: 260px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
}

.offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: 30vh;
  max-height: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateY(-100%);
}

.offcanvas-bottom {
  right: 0;
  left: 0;
  height: 30vh;
  max-height: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
}

.offcanvas.show {
  transform: none;
}



/* Accordion */
.accordion-button:not(.collapsed) { 
  color:  rgba(74, 38, 13);
  font-weight:800;
  background-color: #fff;
}

.accordion-button:focus { 
  box-shadow:  0 0 0 1px rgba(27,31,35,0.15);
  border-color: rgba(0,0,0,.125);
}

.followme {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
}

.social-buttons {
  justify-self: center;
}

/* Light pill button (same shape as the search.php Search button, inverted colors) */
.btn-light-pill {
  display: inline-block; border: 0; border-radius: 2rem; padding: .45rem 1.1rem;
  background: #faf3ed; color: #794723; font-weight: 800; text-decoration: none; cursor: pointer;
}
.btn-light-pill:hover, .btn-light-pill:focus-visible { background: #e1bb80; color: #301b0e; }


/* Scroll to Top Begin ******************************* */
.btn-btt {
  width:60px;
  color:white;
  white-space:normal;
  background: rgba(74, 38, 13, 0.8) url(/assets/img/cd-top-arrow.svg) no-repeat top 4px center;
  padding-top:1.5em;
}

.btn-btt:hover { color: white; }

#btn-back-to-top {
  position: fixed;
  bottom: 60px;
  right: 16px;
  display: none;
  z-index:101;
}

@media (min-width:1140px) { #btn-back-to-top { right: 47px; }}
@media (min-width:1200px) { #btn-back-to-top { right: 78px; }}
@media (min-width:1260px) { #btn-back-to-top { right: 109px; }}
@media (min-width:1320px) { #btn-back-to-top { right: 140px; }}
@media (min-width:1380px) { #btn-back-to-top { right: 171px; }}
@media (min-width:1440px) { #btn-back-to-top { right: 202px; }}
@media (min-width:1500px) { #btn-back-to-top { right: 233px; }}
@media (min-width:1560px) { #btn-back-to-top { right: 264px; }}
@media (min-width:1620px) { #btn-back-to-top { right: 295px; }}
@media (min-width:1680px) { #btn-back-to-top { right: 326px; }}
@media (min-width:1740px) { #btn-back-to-top { right: 357px; }}
@media (min-width:1800px) { #btn-back-to-top { right: 388px; }}
@media (min-width:1860px) { #btn-back-to-top { right: 419px; }}
@media (min-width:1920px) { #btn-back-to-top { right: 450px; }}

/*
@media only screen and (min-width: 768px) {
  #btn-back-to-top { 
  right: 15%;
  bottom: 60px;
  }
}

@media only screen and (min-width: 1200px) {
  #btn-back-to-top { 
  right: 20%;
  bottom: 60px;
  }
}
*/
/* Scroll to Top End ******************************* */


/* A11Y Dialog ************************************* */
/**
 * 1. Make the dialog container, and its child overlay spread across
 *    the entire window.
 */
 .dialog-container,
 .dialog-overlay {
   position: fixed; /* 1 */
   top: 0; /* 1 */
   right: 0; /* 1 */
   bottom: 0; /* 1 */
   left: 0; /* 1 */
 }
 
 /**
  * 1. Make sure the dialog container and all its descendants sits on
  *    top of the rest of the page.
  * 2. Make the dialog container a flex container to easily center the
  *    dialog.
  */
 .dialog-container {
   z-index: 2; /* 1 */
   display: flex; /* 2 */
 }
 
 /**
  * 1. Make sure the dialog container and all its descendants are not
  *    visible and not focusable when it is hidden.
  */
 .dialog-container[aria-hidden='true'] {
   display: none; /* 1 */
 }
 
 /**
  * 1. Make the overlay look like an overlay.
  */
 .dialog-overlay {
   background-color: rgba(43, 46, 56, 0.9); /* 1 */
 }
 
 /**
  * 1. Vertically and horizontally center the dialog in the page.
  * 2. Make sure the dialog sits on top of the overlay.
  * 3. Make sure the dialog has an opaque background.
  */
 .dialog-content {
   margin: auto; /* 1 */
   z-index: 2; /* 2 */
   position: relative; /* 2 */
   background-color: white; /* 3 */
 }

 .link-like {
  background-color: transparent;
  text-decoration: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.link-like,
a {
  color: #2984c2;
}

.link-like:hover,
.link-like:active,
a:hover,
a:active {
  color: #e50050;
}