body {
   padding:0px; 
   margin:0px; 
   font-size:18px; 
   line-height: 1.5em;
   font-family: "Frank Ruhl Libre", serif;
   font-style: normal;
}

.full {
   width:100%; 
   display: flex;
}

h1 {
   font-size:37px;
   line-height: 0;
   font-weight: 500;
}

h1 a, h1 a:visited {
   color: white;
}

h2 {
   font-family: "Cinzel", serif;
   margin: 0.4em 0;
   font-size:37px;
   width:100%;
   text-align: center;
   line-height: 1em;
}

h3 {
   font-family: "Cinzel", serif;
   clear: both;
   margin: 1.5em 0em 0em;
   font-size: 1.5em;
}

a {
   font-weight: 500;
   color:#5b1616;
   text-decoration: none;
}

a:hover {
   color:grey;
}

/* Shared Layouts */

.full {
   display: inline-block;
   border: #595959 solid 0.5px;
}

.textcolumn2c h2 {
   text-align: left;
   float: left;
   width: auto;
}

.textcolumn2c .goathead {
   float:left;
   width: auto;
}

.textcolumn2c .goathead img {
   width: 45px;
   margin: 11px 7px;
}

.goathead {
   width: 100%;
   text-align: center;
}

.goathead img {
   width:80px;
   margin: auto;
}

.btn {
   font-family: "Cinzel", serif;
   width:100%;
   text-align: center;
   font-weight: bold;
   font-size: 1.24em;
   line-height: 1.3em;
   padding-top: 0.3em;
}

.textcolumn {
   padding:1em;
   box-sizing: border-box;
   float:left;
   font-size:1em;
}

.textcolumn1, .textcolumn2 {
   width:50%;
}

.textcolumn1b {
   width:25%;
}

.textcolumn2c {
   width:75%;
}

.stuff .bookcover img, .author .authorimage img {
   max-width:300px; width:100%; border: 1px solid #9b9b9b;
}

.stuff, .author, .lambhelp, .contact {
   padding:1em;
   box-sizing: border-box;
}

.yellow {
   color: yellow;
}

.aleo-666 {
 font-family: "Frank Ruhl Libre", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


/* Menu */

.menu {
   background-color: #3A3A3A;
   color: white;
   padding: 0.75em;
   box-sizing: border-box;
   display: inline-block;
   font-family: "Cinzel", serif;
   font-optical-sizing: auto;
   font-style: normal;
   height: 70px;
}

.menu .menuitem a {
   color: #9b9b9b;
   text-decoration: none;
}

.menu .menuitem a:hover {
   color: white;
}

.menu .logo {
   font-size: 2em;
   padding: 0 0.5em;
}

.menu .socialmedia img {
   width:25px;
   margin-bottom: -4px;
}

.menu .socialmedia img:hover {
   filter: brightness(1.4);
}

.logo {
   float: left;
}

.menulist {
   float: right;
   padding: 7px;
}

.menuitem {
   float:left;
   padding: 0.2em 0.5em 0;
}

/* Fade in Controls */

#controls {
   opacity: 0;
   transition: opacity 0.5s ease;
   pointer-events: none; /* Optional: prevent interaction when hidden */
   position: fixed;
   top: 5px;
   right:5px;
   height: 50px;
   background-color: #3A3A3A;
   padding: 5px;
   box-sizing: border-box;
   border: #595959 solid 0.5px;
   z-index: 777;
}

#controls img {
   width: 40px;
}

#controls img:hover {
   filter: brightness(1.4);
}

#controls.visible {
  opacity: 1;
  pointer-events: auto;
}

/* LamBazon Section */

#lamazoncountry_top.fade-out, #amazonlogowrapper.fade-out {
  opacity: 0;
  pointer-events: none;
}

#lamazoncountry_top.fade-out.hidden #amazonlogowrapper.fade-out.hidden {
  display: none;
}

#lamazoncountry_top {
  opacity: 1;
  transition: opacity 0.5s ease;
}

#amazonlogowrapper {
   position: absolute;
   top:10px;
   opacity: 1;
   transition: opacity 0.5s ease;
   width:100%;
}

.amazonlogo {
   margin: auto;
   width:280px;
}

.amazonlogo img {
   width:280px;
}

.amazonlinkbtnwrap {
   width: 100%;
}

.amazonlinkbtn {
   width: fit-content;
   margin: auto;
   text-align: center;
   background-color: #2f1e1e;
   padding: 2px 8px;
   margin-top: -15px;
}

.amazonlinkbtn:hover {
   background-color: gold;
}

.amazonlinkbtn:hover a {
   color: black;
}

.amazonlinkbtn a {
   font-family: "Cinzel", serif;
   color: white;
}

.amazondisclaimer {
   width:100%;
   text-align: center;
   color: #C0C0C0;
   font-size: 0.75em;
}

.amazondisclaimerlower {
   float: left;
   clear: both;
   margin-top: -30px;
}



/* AMAZON EXPANDY BITS */

.container {
   overflow: hidden;
   transition: max-height 0.5s ease, background-color 1s ease;
   max-height: 205px;
   position: relative;
 }

#numberValueUK, #numberValueUK2, #numberValueUSA, #numberValueGR, #ratingValueUSA, #ratingValueUK, #ratingValueUK2, #ratingValueGR {
   color: gold;
}

#infoBox.fade-black {
  color: white;
  background: linear-gradient(to bottom, #000000, #000000);
}

#infoBox {
   background-color: #5a3e36;
   background: linear-gradient(to bottom, #442d27, #5a3e36);
}

.container.expanded {
   max-height: 600px;
   padding-bottom: 140px;
 }

 @media only screen and (min-width: 850px) {
   .lamazoncountryrow {
      width:33%;
      float: left;
   }
   .container.expanded {
      max-height: 230px; 
   }
}

.extra-content {
   opacity: 0;
   transition: opacity 0.5s ease;
   height: auto;
 }
 
 .extra-content .amazonlinkbtnwrap {
   margin-bottom: 40px;
 }

.container.expanded .extra-content {
   opacity: 1;
 }

.lamazontitle1 {
   font-family: "Cinzel", serif;
   font-size:24px;
   width:100%;
   text-align: center;
   color: gold;
 }

 .ratingvalues {
   width:100%;
   text-align: center;
   color:#C0C0C0;
   font-style: italic;
   margin-top: -10px;
 }

.see-more-btn {
   display: inline-block;
   margin-top: 1rem;
   cursor: pointer;
   background: #2f1e1e;
   color: white;
   padding: 0.5rem 1rem;
   border: none;
   position: absolute;
   bottom:0;
   left:0;
   z-index:666;
   width:100%;
   font-size: 14px;
 }

.see-more-btn:hover {
   background: white;
   color: black;
}

.flashing {
   animation: flash 1s infinite;
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.stars {
   display: inline-block;
   font-size: 2rem;
   font-family: sans-serif;
   color: #ccc;
   position: relative;
}

.filled {
   color: gold;
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
   white-space: nowrap;
   pointer-events: none;
}

.lamazoncountry {
   margin-top:-10px;
   max-height: 135px;
}

.flag {
   width:100%;
   text-align: center;
}

.flag img {
   width:50px;
   margin:auto;
}

.star-wrapper {
   width:100%;
   text-align: center;
   margin-top: -15px;
}

.star-container {
   position: relative;
   width: fit-content;
   margin: 0 auto;
}

/* HEADER */

.lamblogo {
   width:100%;
   text-align: center;
}

.lamblogo img {
   width:100%;
   max-width: 400px;
}

.header {
   background: #fff url(../images/mainimage.jpg) no-repeat top center fixed;
   background-color: black;
   background-size: cover;
   color: white;
   text-shadow: #000 1px 0 10px;
}

@media only screen and (max-width: 800px) {
   .header {
      width: 100%;
      background: #fff url(../images/mainimage.jpg) no-repeat center center;
      background-size: cover;
   }
}

.postlogoline {
   font-family: "Cinzel", serif;
   width:100%;
   padding:1em;
   font-size:1.666em;
   line-height:1.1em;
   padding: 1em 1em 0.25em;
   text-align: center;
   box-sizing: border-box;
}

/* EPISODES AND BOOKS SHARED */ 

.midh2 {
   clear: both;
   padding-top: 1em;
}

.episodewrapper, .bookwrapper{
   width:100%
}

.episodes, .books {
   max-width: 800px; 
   margin: auto;
}
.episode, .book {
   float:left; 
   width:25%; 
   text-align: center;
}

.episode img, .book img {
   width: 180px;
   margin:20px auto 10px;
   border: black 1px solid;
}

.episode .episodedetails, .book .bookdetails {
   line-height: 1.3em;
}

@media only screen and (max-width: 800px) {
   .episode, .book {
      float: none;
      width: 100%;
   }
}


/* LAMB TV */

.lambtv {
   padding:1em;
   box-sizing: border-box;
   background: linear-gradient(to bottom, #a1a1a1, #ffffff);
}

.latestepdiv {
   position: relative;
}

.tvtag {
   padding: 0 0.5em;
   font-size: 0.8em;
   position: absolute;
   margin-top: 8px;
   top: 0;
   left: 50%;
}

.latestep {
   background-color: #782681;
   color: white;   
   margin-left: -62px;
}

.lambad {
   background-color: yellow;
   color: black;   
   margin-left: -56px;
}






/* LAMB HELP */

.lambhelp {
   text-align: center;
   color: white;
   text-shadow: #000 1px 0 10px;
   background: #fff url(../images/darksheepimage.jpg) no-repeat top center fixed;
   background-size: cover;
   font-size: 1.1em;
   line-height: 2em;
   text-transform: uppercase;
}

@media only screen and (max-width: 800px) {
   .lambhelp {
      width: 100%;
      background: #fff url(../images/darksheepimage.jpg) no-repeat center center;
      background-size: cover;
   }
}

.lambhelp .helpinfo {
   max-width:570px; 
   font-size: 1em; 
   line-height: 1.4em; 
   text-transform: none; 
   margin:auto;
}

.lambhelp a {
   text-decoration: underline;
   color: white;
}

.lambhelp a:hover {
   color: #bababa;
}

.lambhelp .freetag {
   color: yellow;
   margin-top: -12px;
   position: absolute;
   margin-left: -27px;
   transform: rotate(-20deg);
   font-weight: bold;
   font-size: 0.8em;
}

/* LAMB STUFF */

.stuff {
   background: linear-gradient(to bottom, #a1a1a1, #C2B280, #C2B280);
}

/* AUTHOR */

.author {
   background: linear-gradient(to bottom, #000, #242424, #242424);
   color: white;
   font-size: 1.1em;
   line-height: 1.7em;
}

.author a {
   color: #bababa;
}

.author a:hover {
   color: red;
}

.authorblurb {
   float: left;
}


/* BOOKS */
 
.jaredbooks {
   padding:1em;
   box-sizing: border-box;
   background: linear-gradient(to bottom, #a1a1a1, #ffffff);
}

.jaredbooks .book img:hover, .lambtv .episode img:hover {
   opacity: 0.7;
}

.morebooks {
   text-transform: uppercase;
   text-align: center;
   display: inline-block;
}

/* CONTACT */

.contact {
   background: linear-gradient(to bottom, #a1a1a1, #C2B280, #C2B280);
}

.contact-section {
   width: 100%;
   max-width: 40rem;
   margin-left: auto;
   margin-right: auto;
}

.contact-intro > * + * {
   margin-top: 1rem;
}

.form-group-container {
   display: grid;
   gap: 1rem;
   margin-top: 2rem;
}

.form-group {
   display: flex;
   flex-direction: column;
}

.form-label {
   margin-bottom: 0.5rem;
}

.form-input,
.form-textarea {
   padding: 0.5rem;
   border: 0px;
   display: flex;
   height: 2.5rem;
   width: 100%;
   line-height: 1.25rem;
   font-family: "Frank Ruhl Libre", serif;
}

.form-input::placeholder,
.form-textarea:focus-visible {
   color: #6b7280;
}

.form-input:focus-visible,
.form-textarea:focus-visible {
   outline: 2px solid #2563eb;
   outline-offset: 2px;
}

.form-textarea {
   min-height: 120px;
}

.form-submit {
   width: 100%;
   margin-top: 1.2rem;
   background-color: #5b1616;
   color: #fff;
   padding: 13px 5px;
   text-transform: uppercase;
}

.form-submit:hover {
   background-color: #000;
}

/* LAMBSTAGRAM */

.lambstagram {
   background-color: black;
   text-align: center;
}

.lambstagram img:hover {
   opacity: 0;
}

/* MEDIA QUERIES */

@media only screen and (max-width: 1024px) {
   .textcolumn1, .textcolumn2, .textcolumn1b, .textcolumn2c {
      float:none;
      width:100%;
      text-align: center;
   }

   .textcolumn2c h2 {
      text-align: center;
      float: none;
   }

   .textcolumn2c .goathead {
      float:none;
      width: 100%;
      padding-top: 1em;
   }

   .textcolumn2c .goathead img {
      width: 80px;
      margin: 0px;
   }
   .spotifyframe {
      max-width: 100%;
   }
}

@media only screen and (max-width: 1106px) {
   .menu {
      text-align: center;
      height: auto;
   }
  .logo {
      float: none;
      width: auto;
      margin: 0 auto;
      text-align: center;
      padding: 0em;
   }  
   h1 {
      font-size: 34px;
   }
   .menulist {
      float: none;
      width: auto;
      margin: 0 auto;
      display: inline-block;
   }

}

@media only screen and (max-width: 740px) {

   .menulist {
      float: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5em;
      padding-bottom: 0;
  }
  .menuitem {
      float: none;
      padding: 0em 0.5em 0;
  }
}