body {
  background: #18191e;
}

@font-face {
  font-family:"Ruth Calligraph";
  src: url("/css/Ruth Calligraph.ttf") format("truetype");
}

@font-face {
  font-family:"The Blacklist";
  src: url("/css/The Blacklist.ttf") format("truetype");
}

#footer{
  color:white;
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  background: black;
  padding: 0.5rem 0;
}

.navbar {
  display: flex;
}
.navbar-nav{
    display: none;
}

.navSlash {
  display: block;
  padding: .5rem 1rem;
  color: rgb(180, 180, 180);
  font-weight: 500;
  font-size:1.5rem;
}

.nameBanner {
  display: flex;
  position: relative;
  margin-bottom: 0;
  color: #094a67;
  font-family: "The Blacklist";
}
.nameBanner a{
  text-decoration: none;
  color: #094a67;
  margin: auto;
  font-size: 4rem;
}

.bookShelf {
  background: linear-gradient(0deg, #18191e 20%, #e4e5ea 20%);
  height: 22rem;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
}

.index-content{
  background: #13749f!important;
}
.page-content {
  background:#e4e5ea;
  display: flex;
  padding-bottom: 3rem;
  padding-top: 3rem;
}

::-webkit-scrollbar {
  width: 0px;
  height: 8px;
  /* Remove scrollbar space */
  background: transparent;
  /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #18191e;
  border-radius: 5px;
  height: 2px;
  width: 7px;
  border: 1px solid #e4e5ea;
}

.titleBooks, .seriesBooks, .series {
  display: contents;
}

.series {
  /* display: none; */
}

.seriesSelect {
  display: contents;
}

.seriesActive {
  display: flex;
}

.seriesActive, .bookShelf img {
  height: 280px;
  margin-top:20px;
  box-shadow: 10px 10px 18px 0px #18191e;
  transition-duration: 0.5s;
}

.bookDesc {
  padding-top: 25px;
  color: #e4e5ea;
  width: 85%;
}

.bookCover {
  /* display: none; */
  padding: 0 10px;
}

.bookHover img {
  height: 320px;
  filter: brightness(110%);
  cursor: pointer;
}

.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
}
}

.hamburger:hover {
  opacity: 0.7;
}

.hamburger.is-active:hover {
  opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #000;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: #aaa;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

.hamburger--slider .hamburger-inner {
  top: 2px;
}

.hamburger--slider .hamburger-inner::before {
  top: 10px;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.15s;
}

.hamburger--slider .hamburger-inner::after {
  top: 20px;
}

.hamburger--slider.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--slider.is-active .hamburger-inner::before {
  transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
  opacity: 0;
}

.hamburger--slider.is-active .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(-90deg);
}

.navOpen {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(248, 249, 250, 0.95) !important;
  z-index: 2;
}
.navOpen h2{
  font-size: 2.5rem;
}
.navFlex {
    display: flex;
    flex-direction: row;
    margin: auto;
}
.nav-link{
  font-size: 1.5rem;
  color:rgba(9, 66, 103,.9)!important;
}
.active nav-link{
  color: #094267!important;
}

.about-holder{
  display: flex;
}

.arrow-button {
  position: absolute;
    top: 2rem;
    left: 2rem;
    padding: 25px;
    border-radius: 4rem;
    //background: #18191e;
    cursor: pointer;
    transition: 0.25s;
    margin: 0rem;
    height: 4rem;
    z-index:1;
    display:none;
    }

  .arrow-button:hover {
    transition: 0;
  }

  .arrow {
  position: relative;
  background: black;
  width: 3rem;
  height: .4rem;
  transition: .5s;
  border-radius: 1rem;
  transform-origin: right center;
  margin-top: -2px;
}

  .arrow:before { transform: rotate(-35deg); }
 .arrow:after { transform: rotate(35deg); }

 .arrow:before, .arrow:after {
     display: block;
     content: "";
     position: absolute;
     left: 0;
     background: black;
     width: 2rem;
     height: .4rem;
     transform-origin: .2rem center;
     transition: 0.5s;
     border-radius: 1rem;
   }

.shop-btn{
margin: 0;
font-weight: 500;
border-radius: .25rem;
-webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 5%);
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 5%);
font-size: 12px;
padding: 17px 29px 16px 29px;
line-height: 1;
margin-top: .25rem;
margin-bottom: .25rem;
cursor: pointer;
text-transform: uppercase;
word-wrap: break-word;
white-space: normal;
border: 0;
-webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
color: #000000;
text-decoration: none;
margin: 1rem;
line-height: 4rem;
}
.shop-btn:hover{
  -webkit-box-shadow: 0 5px 11px 0 rgb(0 0 0 / 14%), 0 4px 15px 0 rgb(0 0 0 / 12%);
    box-shadow: 0 5px 11px 0 rgb(0 0 0 / 14%), 0 4px 15px 0 rgb(0 0 0 / 12%);
}
.amazon-btn{
  background: #ff9900;
}
.ebook-btn{
  background: #49C763;
}
.inactive-shop-btn{
  background: lightgray!important;
  color: gray!important;
}
.shop-btn a { color: inherit; }
@media(max-width:420px){
 .shop-btn{
   line-height: 2rem;
   display: block;
   max-width: 80%;
   margin-left: auto;
  margin-right: auto;
 }
}
@media(max-width:992px) {
  .nameBanner {
    margin: auto;
    text-align: center;
    width: 100%;
  }
  .arrow-button{
    top: 0rem;
    left: 1rem;
  }
  .arrow{
    width: 0px;
    margin-left: -17px;
    margin-top: -2px;
  }
}

@media (min-width: 992px) {

  .navbar-nav{
      display: flex;
  }

  .hamburger {
    display: none;
  }

  .bookCover {
    display: flex;
    transition: all 500ms;
    padding: 0 10px;
  }

  .bookDesc {
    width: 50%;
  }

  .flex-column-banner {
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .nameBanner{
    font-size: 2.5rem;
  }
  .nameBanner a{
      font-size: 6rem;
    }
}

.bookDescText {
  display: none;
  width: 100%;
}

.hidden {
  opacity: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.hidden img {
  width: 0px;
}

.visible {
  display: inline-block;
  opacity: 1;
}

.book-card{
  font-family: 'El Messiri', sans-serif;
  font-size: 3rem;
  color: white;
      height: 8rem;
      display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center
}

.go-btn{
  font-family: "Ruth Calligraph";
  background: #ffff86;
  color: #094a67;
  font-size: 3.5rem;
  padding: 0rem 4rem;
}

.go-btn:hover{
  background: #1884b1;
  border-color: #094a67;
}

.book-card-parent{
  background: #13749f;
}
img.aboutimg {
  width: 100%;
  height: auto%;
  max-width:300px;
  display: flex;
  margin: auto;
}
.aboutimg-holder{
  margin: auto;
}
.header-banner{
  background: #094a67;
  padding: 6px;
  box-shadow: inset 0px 11px 8px -10px #18191e, inset 0px -11px 8px -13px #18191e;
}
.header-banner p{
  text-align: center;
  margin-bottom: 0;
  color: #f8f9fa;
}
.header-banner a{
  color: #f8f9fa;
  text-decoration: underline;
}