.serif {font-family: "Libertinus Serif", serif; font-size: 110%;}

/* Scrolling bgs */
#theBook { background-image: url(images/yellow-bg.jpg); padding: 0 0 0 0; background-size: cover; background-position: center center;}
#panelTwo { background-image: url(images/background-2.jpg); padding: 20vh 0 0; height: 60vh; }
#bonus { background-image: url(images/drawers-2.jpg); padding: 20vh 5%; background-size: cover; background-position: center top;}
#sectionThree {background-image: url(images/flower.jpg); padding: 10vh 8% 10vh 28%; background-repeat: no-repeat; background-position: -5% center; background-color: #FFF; background-size: 35% auto; }
#sectionKit {background-image: url(images/background-media.jpg); padding: 14vh 0; color: #fff;}

body { font-family: "Outfit", sans-serif; font-weight: 400; font-style: normal; font-size: 1em; }
.header-bg { background-image: url(images/background-1.jpg); background-position: center bottom; background-size: cover; position: relative; height: 600px;  }

#theHeader { background-color: #ef3739; padding-top: 2vh; padding-bottom: 6px;  }
#theName { 
  font-family: "Libertinus Serif", serif; font-weight: 300; font-style: normal; font-size: 40px; color: #000; line-height: 1.0em; margin-right: 40px; letter-spacing: 2px;}
  #theName .smaller { font-size: 26px; display: inline-block; vertical-align: top;}
  #theName img { width: 100%; max-width: 350px; height: auto; }
#logoSmall {font-family: "Libertinus Serif", serif;font-weight: 300; font-style: normal; font-size: 32px; color: #393830; line-height: 1.8em;}
#logoSmall a {color: #393830;  }
#logoSmall a:hover { color: #000; }
 #logoSmall img { width: 100%; max-width: 550px; height: auto; }
 .from { border-top: 1px dotted #ef3739; padding: 20px 0 0; margin-bottom: 50px; text-align: left; }

body {
  margin: 0px; padding: 0px; text-align: center; font-size: 1.1em;  line-height: 1.4em; 
  background-color: #000; 
}
h1 { font-size: 42px; letter-spacing: 2px; }
h2 {
  font-style: normal; letter-spacing: 2px; font-size: 3.4em; line-height: 1.2em;
  margin: 0px 0 40px; font-family: "Libertinus Serif", serif; font-weight: 300;
}
h3 {
  font-family: "Libertinus Serif", serif; font-weight: 400; font-style: normal; font-size: 2.3em; line-height: 1.1em;
  margin: 0px; color: #f27550;
}
h3 a { color: #f27550; }
h3 a:hover { color: #d05330; }
h4 {
  margin: 0px 0 3vh; color: #FFF;
  text-transform: uppercase; font-weight: 400; font-style: normal; letter-spacing: 2px; font-size: 18px; 
}
h5 {
  text-transform: uppercase; font-weight: 400; font-style: normal; letter-spacing: 5px; font-size: 14px;
  margin: 0px; color: #000; padding: 0; 
}
.photo-credit { font-size: 10px; text-align: right; padding-right: 10px;}
.tinyDivider { width: 50px; border-top: 2px solid #CCC; display: inline-block; }
.tinyDivider.largeGap { margin: 15px 0 10px; }
.align-left { text-align: left;}
.align-right { text-align: right; }
a { text-decoration: none; color: #FFF; }

#theName a { color: #000;}
a:hover { transition: 0.3s;}
p a, h5 a, .one-drawer a {color: #cb2125;}
p a:hover, h5 a:hover, .one-drawer a:hover { color: #ef3739; }
a.simplelink { font-weight: bold; text-transform: uppercase; letter-spacing: 2px; color: #6f5651; display: block; margin-bottom: 10px; font-size: .95em;}
a.simplelink:hover { color: #000;}
a.rounded-button {
	color: #FFF;
    border-radius: 10px;
    text-transform: uppercase;
    background: #d12627;
    font-weight: 700;
    font-size: 1.0em;
    box-sizing: border-box;
    padding: 8px 45px;
    display: inline-block;
	letter-spacing: 1px; 
}
a.rounded-button:hover { background-color: #000; color: #FFF; }
a img:hover { opacity: .8; }
.author-desc a { color: #666; }
.author-desc a:hover { color: #222; }
.purchase-links a {
  display: inline-block; border-radius: 6px; margin: 0 3px 6px; vertical-align: top; width: 100%; padding: 8px; color: #FFF; background-color: #2992b0;
  font-weight: 700; text-transform: uppercase; font-size: 90%; letter-spacing: 2px; 
 }
.purchase-links a:hover {
 background-color: #000;
}
h4.buy-book { color: #312a3e; margin: 20px 0 10px; font-weight: bold; font-size: 17px; }
.contactP a { color: #58240a; font-weight: bold; }
.contactP a:hover { color: #a54313; }
a.sublink { color: #828383; border: 1px solid #ddd; display: inline-block; border-radius: 25px; padding: 5px 25px; font-size: 15px;}
a.sublink:hover { background-color: #eee; }

/* Overall Structure */
.contentWidth { width: 96%; max-width: 1000px; margin: 0 auto;  }
#praise .contentWidth { width: 80%; max-width: 1000px; margin: 0 auto;  }
.inline { display: inline-block; vertical-align: top; width: auto; }
.inline.middle {vertical-align: middle;}
.flexShell { display: flex; margin-bottom: 50px;}
.flexDrawers {
  display: flex; /* Turns the container into a flex container */
  flex-wrap: wrap; /* Allows items to wrap to new lines if they exceed the container width */
  justify-content: space-around; /* Distributes space around items */
  align-items: flex-start; /* Aligns items to the start of the cross-axis */
}

.flexDrawers div {
  flex: 1 1 calc(33.33% - 20px); /* Defines flex item behavior */
  /* flex-grow: 1 (allows items to grow)
     flex-shrink: 1 (allows items to shrink)
     flex-basis: calc(33.33% - 20px) (sets a preferred width for each column, adjusting for margin/padding) */
  margin: 10px; 
  box-sizing: border-box; 
  background-color: white; 
  padding: 0px 0px 10px;
  border-radius: 8px;
  border: 1px solid #6c2d2c;
  font-family: "Libertinus Serif", serif;
}
.flexDrawers p { text-align: left; padding: 0 5% 0; margin: 0px; }
.flexDrawers img { width: 100%; height: auto; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.one-drawer { display: inline-block; vertical-align: top; width: 350px; margin: 0 30px 40px; border-radius: 12px; background-color: #FFF; border: 1px solid #6c2d2c; box-shadow: 0px 0px 10px #333; padding-bottom: 15px; }
.one-drawer img { border-top-left-radius: 12px; border-top-right-radius: 12px; width: 100%; height: auto; }

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.theVideo {
	border: 1px solid #6c2d2c; border-radius: 8px; padding: 20px; display: inline-block; background-color: #fff; width: 80%;
	margin-top: 20px; 
	}
.theVideo .one-half, .theVideo .one-fourth, .theVideo .one-third { display: inline-block; vertical-align: middle; }
.theVideo .one-third { background-color: #FFF; text-align: left; margin: 0 5%; font-family: "Libertinus Serif", serif; font-size: 115%; }

#backLinks { background-color: #000; padding: 5px 0;}
#backLinks a.backLink { display: inline-block; padding: 5px 20px; border-radius: 9px; border: 1px solid #FFF; margin: 15px;}
#backLinks a.backLink:hover { background-color: #ef3739; }

.halfLeft { width: 49%; margin-right: .5%; position: relative; }
.halfRight { width: 49%; margin-left: .5%; position: relative; }
#main-banner-slide { margin: 0 auto 40px; }
#imgShell { position: absolute; top: 0px; left: 0px; text-align: center; width: 100%; }
.homeCover { width: auto; height: 520px; box-shadow: 0 10px 20px #b08739;  }
a img.homeCover:hover { opacity: 1.0; box-shadow: 0 10px 20px #84652a;}
#bookInfo { padding: 80px 0 80px; }
#calloutBoxes { background-color: #FFF; padding: 3vh 2% 3vh;  }
#outerBlack { border: 4px solid #000; padding: 2px; }
#innerBlack { border: 1px solid #000; padding: 10vh 10%; }
#calloutBoxes.alt { background-image: url(images/concrete-bg-2.jpg); }
#theBook .halfLeft { text-align: right; }
#theBook .halfRight { text-align: left; padding-bottom: 6vh;}
.book-info { color: #000; }
.coming { text-transform: uppercase; letter-spacing: 2px; }

.one-fourth { width: 25%; }
.one-half { width: 50%; }
.one-third { width: 33.333%; }
.one-fifth { width: 20%; }
.one-tenth { width: 10%; }
.three-quarters {width: 65%; }
.fifteen-percent {width: 15%;}
.five-percent {width: 5%;}


.halfImg { width: 32%; margin-right: 3%; }
.halfText { width: 55%; text-align:left; padding: 0;}
.halfRight .halfText { padding: 0;}
#theTimeline .halfText { margin: 0 6% 0 3%; }
#theTimeline img, .halfImg img { width: 100%; height: auto; }
#theTimeline { color: #FFF; }
#theTimeline p, #theQuiz p { font-size: 24px; margin: 15px 0; }

#theAuthors { background-color: #FFF; padding: 100px 8% 80px; background-image: url(images/yellow-two.jpg); background-size: cover; background-attachment: fixed;}
#theFamilyTree { background-color: #FFF; padding: 100px 4% 80px; background-image: url(images/yellow-two.jpg); background-size: cover; background-attachment: fixed;}
.author-info { text-align: right; padding-right: 7%; }
#theAuthors .one-half img { width: 96%; height: auto; margin: 0 auto; display: block; }
.author-name {font-family: "Libertinus Serif", serif;font-weight: 500; font-style: normal; font-size: 50px; color: #000; line-height: .8em; padding-bottom: 20px;}
.book-name {font-family: "Libertinus Serif", serif;font-weight: 500; font-style: normal; font-size: 60px; color: #000; line-height: .8em; padding-top: 10px; padding-bottom: 5px;}

#allReviews { text-align: center; }
.one-review {
	display: inline-block; vertical-align: top; margin: 0 1% 20px; border-radius: 12px; border: 1px solid #e1c67e; padding: 25px;
	background-color: #FFF; text-align: left; width: 46%; 
}
.one-review p { margin: 0 0 5px; font-family: "Libertinus Serif", serif;font-weight: 500; font-size: 105%; }
.one-review b {font-weight: 500;}

#header { margin-bottom: 12px; }
.goldThin { border-bottom: 1px solid #e1c67e; margin-bottom: 2px; margin-top: 20px;}
.goldThinSwapped { border-bottom: 1px solid #e1c67e; margin-top: 2px; margin-bottom: 20px;}

.goldWide { border-bottom: 2px solid #e1c67e;}

#copyright { padding: 40px 0 100px; color: #393830; background-position: center top; background-image: url(images/old-paper.jpg); background-size: cover; }

#main-banner-slide ol.bjqs-markers { padding-top: 0px; }
ol.bjqs-markers li a {
  color: transparent; background-color: transparent; border: 1px solid #6c5f5b; font-size: 1px; width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  margin: 5px;
}
ol.bjqs-markers li.active-marker a { color: #6c5f5b; background-color: #6c5f5b; border: 1px solid #6c5f5b;  }

#nav { }
#social { text-align: right;  }
#social img { margin: 0 8px; height: 24px; width: auto;}
#theBlog img { width: 30%; height: auto; margin-right: 4%; }
#blogHome { padding: 25px; }
#blogText { width: 65%; text-align: left; color: #FFF; }
.theDate { font-size: 14px; color: #e5e5e5; text-transform: uppercase; letter-spacing: 3px; 
 font-family: "Libertinus Serif", serif; font-weight: 700; font-style: normal; }

.boxed-link {
  border-radius: 8px; border: 1px solid #000; background-color: rgba(0,0,0,.1); display: inline-block; width:auto; padding: 1px 23px;
  text-transform: uppercase; text-decoration: none; letter-spacing: 2px; font-size: 16px;
  font-weight: 500; font-style: normal; color: #000; margin-top: 0px;
}
.boxed-link:hover { color: #000; border: 1px solid #000; }
#theBlog .boxed-link {margin-top: 5px;}
.gold { color: #ffd26f; border: 1px solid #ffd26f; background-color: rgba(255,210,111,.1);}
.red { color: #f97a72; border: 1px solid #f97a72; background-color: rgba(0,0,0,.1);}
.teal { color: #81efff; border: 1px solid #81efff; background-color: rgba(255,255,255,.1);}
.spaced { margin-top: 45px;}





/* The Book */
.book-desc { padding: 0 0 0 0; font-size: 123%; }
.two-col { text-align: justify; }

/* Media Kit */
#sectionKit .halfRight { text-align: left; }
#sectionKit h2 {font-family: "Libertinus Serif", serif; font-weight: 500; font-style: normal; font-size: 50px; color: #FFF; line-height: 1.0em; padding-top: 10px; padding-bottom: 5px; text-transform: none; }
#sectionKit .coming { padding-bottom: 20px; }
#sectionKit p { padding-bottom: 30px; }
#sectionKit .halfLeft img { box-shadow: 0px 0px 15px #222;}


/* Author Social */
.author-social ul li {
  display: inline-block; height: 40px; width: 40px; padding: 10px; border-radius: 50%; background-color: #382333; list-style-type: none; text-align: center;
  margin-left: 5px;
  }
.author-social ul li img { height: 20px; width: auto; }


/* Newsletter */
#theNewsletter { color: #000; padding: 40px;}
#theNewsletter p { text-align: left; }
#theNewsletter input { border-radius: 0px; border: 0px; }
#theNewsletter input#mce-EMAIL {
  background-color: #000; padding: 10px 20px; color: #FFF; border-bottom: 2px solid #FFF; margin-right: 5px;
  width: 340px; margin-bottom: 20px;
}
#theNewsletter input#mc-embedded-subscribe {
  background-color: #fff; color: #000; padding: 10px 6%;
  font-family: "Libertinus Serif", serif; font-weight: 700; font-style: normal;
  text-transform: uppercase; letter-spacing: 1px; font-size: 16px; cursor:pointer; 
}

/* Footer */
#footerLogos { margin: 30px auto; }
#footerLogos img { display: inline-block; vertical-align: middle; width: 180px; height: auto; margin: 0 40px; }
#footerLeft {width: 90%; margin: 0 4%;}
#footerRight { width: 220px; margin: 0 4%; }
#footerLeft img { margin: 0 1.5%; }
#footerRight img { margin: 0 3%; }



/* Navigation */
#nav, #footerNav {
  font-weight: 500; font-style: normal; text-align: right; margin-left: 40px;
}
#footerNav { text-align: center; margin-left: 0px;}
#nav a, #footerNav a {
  text-transform: uppercase; letter-spacing: 2px; font-size: 16px; display: inline-block; padding: 5px 0 1px 0;
  text-decoration: none; color: #FFF; margin: 0 16px; font-weight: bold;  border-bottom: 1px solid transparent;
}
#nav a:hover { color: #fffaa1; }
#footerNav a { color: #393830; }
#footerNav a:hover { color: #000; }

.audios { width: 45%; }

/* Mobile styles */



@media screen and (max-width: 1200px) {
  .five-percent, .fifteen-percent { width: 10%; }
}



@media screen and (max-width: 1000px) {
  #calloutBoxes .flexShell { display: block; }
  .oneCallout.one-half {width: 80%; margin: 0 auto 40px; }
  .halfImg { width: 30%; }
  .halfImg img { width: 100%; height: auto; max-width: 200px;}
  .halfText { width: 65%;}
  #calloutBoxes { background-size: cover; }
  #theAuthors { padding: 100px 0 80px 0; }
}
@media screen and (max-width: 926px) {
  #theName {margin-right: 0px; padding-top: 15px; margin-bottom: 15px;}
  #nav { margin-left: 0px;}
  .audios { width: 90%; margin-bottom: 30px;}
}
@media screen and (max-width: 865px) {
  #theAuthors .flexShell { display: block; }
  .five-percent, .fifteen-percent { display: none;  }
  .one-third, .one-half, .halfLeft, .halfRight { width: 80%; text-align: center; margin: 0 auto 20px; }
  #imgShell { position: relative; }
  .author-desc {width: 80%; margin: -10px auto 20px; }
  .author-info { text-align: center; padding-right: 0px; }
  .author-social ul { margin: 0px; padding: 0px; }
  .author-social { margin: 30px auto; }
  #sectionThree {padding: 8vh 0; }
  .homeCover { height: auto; max-height: 520px; }
  #sectionKit .halfRight { text-align: center; }
  #sectionThree { background-image: none; }
}

@media screen and (max-width: 800px) {
  .aos-item {
    width: 50%;
  }
  .three-quarters { width: 82%; }
  
}
@media screen and (max-width: 700px) {
  #social.inline, #nav.inline { display: block; width: 90%; text-align: center; margin: 0 auto 15px;}
  #navigation { width: 100%; }
  #theName { margin-right: 0px; }
  #nav a {margin: 0 10px;}
  .one-review { width: 90%; margin: 0 auto 20px; }
  .flexDrawers div {  flex: 1 1 calc(100% - 20px); }
}
@media screen and (min-width: 600px) {
  #logoSmall img {position: relative; top: 17px;}
}
@media screen and (max-width: 600px) {
  #theNewsletter input#mce-EMAIL, #theNewsletter input#mc-embedded-subscribe { margin-bottom: 20px; }
  .inline.halfImg, .inline.halfText { display: block; width: 100%; margin: 0 auto 20px;  }
  .homeCover {
    height: auto;
   width: 100%;
   max-height: 700px;
  }
}
@media screen and (max-width: 450px) {
  #theNewsletter input#mce-EMAIL {width: 100%;}
  .author-name { font-size: 17vw; }
}