/*W3CSS*/

.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}

#vertFillMtl {background-image:url(../Images/siteElements/HmMtlGrn.png)!important; height: 340px!Important;}

/* This is custom CSS for The Literate Ghost */

/*general format*/
html,body{font-family: georgia, serif;font-size:17px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:serif}
h1,h2,h3,h4,h5,h6{font-family: georgia, serif;font-weight:400;margin:5px 0}.w3-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}

.hidden-section {
	display: none;
}

.theatreMarquee{
background-color: black ;
margin-left: 2%;
margin-right: 2%;
border:10px double gold;
}

.marqueeText{
font-size: clamp( 10px, 3vw, 30px);
text-align: center;
color: gold;
text-shadow: 2px 2px 2px black;
}

.marqueeSmallText{
font-size: clamp( 10px, 2vw, 16px);
text-align:center;
color:gold ;
}

.libraryTitlesSmallText{
font-size: clamp( 12px, 2vw, 16px);
text-align:center;
color: gold;
}


.postDate {
font-size: .75em;

}

hr.rounded {
  border-top: 5px double black;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
}

hr.doubleGold{
  border-top: 5px double gold;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
}


.glow-iframe-wrapper {
  display: none;
  margin: 1em 0;
}

body {
    max-width:1280px;
    background-color:#141514;
    margin-left: 2%;
    margin-right: 2%;
    color: black;
    font-size: 100%;
    }

.break{
  width:100%;
  height: 2px;
}

nav {
   font-size: clamp(8px, 1em, 12px);
    display: block;
    color :gold;
    text-align: center;
    padding: 5px;
}

main {
    background-image:url(../Images/siteElements/HmMtlBrnSm.png);
    border:5px solid!important;border-image:url(../Images/siteElements/border16.png) 15 round!important;
    max-width:1280px;
    }  

 .library {
    background-image:url(../Images/siteElements/HmMtlDrkBlu.png);
    border:5px solid!important;border-image:url(../Images/siteElements/border16.png) 15 round!important;
    }  

 .theatre {
    background-image:url(../Images/siteElements/HmMtlMaroon.png);
    border:5px solid!important;border-image:url(../Images/siteElements/border16.png) 15 round!important;
    }  


  .YTGalleryLong{
      text-align: center;
      }

  .GalleryFeature{
      text-align: center;
      }

.videoFeaturePlayPage{
display: flex;
flex-wrap: wrap;
gap: 15px;
min-width: 350px;
}

  div.longVideoEmbedContainer {
    flex:3;
 border:5px solid!important;border-image:url(../Images/siteElements/border15.png) 10 round!important;
background-color: black;
   }

.featureVidText{
background-color:#E9DCC9;
font-size: clamp( 10px, 1vw, 14px);
border-radius: 15px;
padding: 10px;
}

iframe{
width: 100%;
min-width: 320px;
max-width: 960px;
aspect-ratio: 16 / 9;
border-radius: 15px;
} 

.iframeStory{
width: 100%;
min-width: 200px;
max-width: 560px;
aspect-ratio: 16 / 9;
border-radius: 15px;
} 

.featureVidRelatedContainer{
flex: 1;
min-width: 200px;
 border:5px solid!important;border-image:url(../Images/siteElements/border15.png) 10 round!important;
height:60vh;
overflow-y: scroll;
}

.featureVidRelatedVItem{
display: flex;
background-color:#E9DCC9 ;
box-shadow: 1px 5px 3px 4px black;
border:5px solid!important;border-image:url(../Images/siteElements/border15.png) 10 round!important;
}
  
.featureVidRelatedVItem:hover {
        transform: scale(1.1); 
    }


.featureVidRelatedItemText{
flex: 1;
text-align:center;
font-size: clamp( 8px, 1vw, 12px);
max-height: 70px;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
}

.featureVidRelatedItemImageContainer{
flex:1;
max-width: 200px;
min-width: 80px;
border-right:3px solid!important;border-image:url(../Images/siteElements/border15.png) 15 round!important;
 box-shadow: 1px 1px 2px 1px black;
background-color: black;
}

.relatedMediaMenuImageContainer{
 box-shadow: 5px 5px 3px 4px black;
}

   div.shortVideoEmbedContainer {
    display: grid;
    gap: 5px;
    grid-auto-flow: column;
    grid-auto-columns: 40%;
   overflow-x: auto;
   overscroll-behaviour-inline: contain;
   max-width: 1200px;
   margin: 1em 0;
   scrollbar-width: thin; scrollbar-color: #996515 #141717!important;

}   

   div.shortVideoEmbedContainerSMALL {
    display: grid;
    gap: 2px;
   grid-auto-flow: column;
    grid-auto-columns: 1fr 1fr 1fr 1fr;
    overflow-x: auto;
   overscroll-behaviour-inline: contain;
   max-width: 1200px;
   margin: 1em 0;
   scrollbar-width: thin; scrollbar-color: #996515 #141717!important;
}   

div.shortVideoLibraryThumb{
    aspect-ratio: 9 / 16;
     max-width: 50%;
     max-height: 50%;
    min-width: 288px;
}

   .iframeShort{
     aspect-ratio: 9 / 16;
     width=581px;
     height=1032px;
    <!-- max-width: 100%;
     max-height: 100%;-->
    min-width: 288px;
}

   .iframeShortLibrary{
     aspect-ratio: 9 / 16;
     max-width: 50%;
     max-height: 50%;
}

   .iframeShortStory{
     aspect-ratio: 9 / 16;
	width: 25%;
	min-width: 200px;
	max-width: 560px
}

div.videoImageLinkContainer {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
     }	

div.featureShortSection{
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     flex-direction: row;
     max-width: 100%;
     height: auto;
     margin-right: 4px;
}

 div.videoShortContainer{
    display: grid;
    gap: 5px;
    grid-auto-flow: column;
    grid-auto-columns: 40%;
   overflow-x: auto;
   overscroll-behaviour-inline: contain;
   max-width: 1200px;
   margin: 1em 0;
   scrollbar-width: thin; scrollbar-color: #996515 #141717!important;
   font-size: clamp( 8px, 2vw, 16px);
}

div.shortVideoPlayPage{
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-left: 1em;
    background-color: black;
    overscroll-behaviour-inline: contain;
   gap: 5px;
   max-width: 1200px;
   overflow-x: auto;
   scrollbar-width: thin; scrollbar-color: #996515 #141717!important;
   font-size: clamp( 10px, 2vw, 16px);
   border:8px solid!important;border-image:url(../Images/siteElements/border15.png) 10 round!important;

}

div.textBlockVideoPlayPage {
    color: black;
    background-color: white;
    text-align:left;
   overflow-x: auto;
   max-height: 960px;
   min-width: 270px;
    }

div.textBlockVideoPlayPageHeader{
background-color: wheat;
border-bottom:3px solid!important;border-image:url(../Images/siteElements/border15.png) 10 round!important;
}

.introTextDiv{
   color: black;
    background-color: white;
    margin-left: .5%;
    margin-right: .5%;
   overflow-x: auto;
   max-height: 960px;
   min-width: 270px;
}

.introTextDiv::first-letter {
      float: left;
      font-size: 4em; 
      line-height: 1em;
      margin-right: 0.1em; 
      padding-top: 0.1em;
      font-family: "Old English Text MT";
}

.introStoryTextDiv{
   color: black;
    background-color: ghostwhite;
margin-top: 1em;
    margin-left: 1%;
    margin-right: .5%;
   overflow-x: auto;
   max-height: 960px;
   min-width: 270px;
}

.introStoryTextDiv::first-letter {
      float: left;
      font-size: 4em; 
      line-height: 1em;
      margin-right: 0.1em; 
      padding-top: 0.1em;
      font-family: "Old English Text MT";
}

 div.shortContainer{
   color:white;
   text-align: center;
   border: 3px solid #2E1503;
   background-color: black;
   width: 30%;
   aspect-ratio: 9 / 16;
}

 div.relatedMediaSideScroller{
 display: grid;
 grid_auto-flow:column;
 grid-template-columns: 1fr 1fr 1fr 4fr 4fr;
 grid-gap: 8px;
 overflow-x: auto;
  overscroll-behaviour-inline: contain;
   max-width: 1280px;
   margin: .5em ;
   scrollbar-width: thick; scrollbar-color: #996515 #141717!important;
   font-size: clamp( 10px, 2vw, 14px);
}

.relatedMediaShort{
background-color: black; 
text-align: center;
width: 123px;
}

.relatedMediaShort:hover{
 transform: scale(1.05); 
}

.relatedMediaFeature{
background-color: black; 
text-align: center;
width: 381px;
}

.relatedMediaFeature:hover{
 transform: scale(1.02); 
}
.relatedMediaHeader{
background-color: wheat!important;
color: black;
text-align:center;
}

 div.shortsChannelSideScroller{
 display: grid;
 grid_auto-flow:column;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 grid-gap: 8px;
 overflow-x: auto;
  overscroll-behaviour-inline: contain;
   max-width: 1280px;
   margin: .5em ;
   scrollbar-width: thick; scrollbar-color: #996515 #141717!important;
   font-size: clamp( 10px, 2vw, 14px);
}

div.authorHeadline {
   background-image:url(../Images/siteElements/HmMtlMaroon.png)!important;
   border:5px solid!important;border-image:url(../Images/siteElements/border15.png) 20% round!important;
   width:90%;
   text-align: center;
   font-size: 1.2rem;
    margin-left: auto;
    margin-right:auto;
   box-shadow: 3px 5px 3px 0px black;
   text-shadow: 5px 5px 5px black;
   }


div.shortsHeadline {
   background-image:url(../Images/siteElements/HmMtlMaroon.png)!important;
   border:5px solid!important;border-image:url(../Images/siteElements/border16.png) 20% round!important;
   width: 100%;
   color:white;
   text-align:center;
   font-size: 1.7rem;
   box-shadow: 5px 5px 3px 4px black;
   text-shadow: 5px 5px 5px black;
   }

div.storyHeadline {
   background-image:url(../Images/siteElements/HmMtlMaroon.png)!important;
   border:5px solid!important;border-image:url(../Images/siteElements/border16.png) 20% round!important;
   width: 100%;
   color:white;
   text-align:center;
   font-size: 1.7rem;
   box-shadow: 5px 5px 3px 4px black;
   text-shadow: 5px 5px 5px black;
   }

div.featureSection {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
     }

   .featuredStorySection {
     color: white;
    }

div.featureHeadline {
   background-image:url(../Images/siteElements/HmMtlMaroon.png)!important;
   border-bottom: 5px solid!important;border-image:url(../Images/siteElements/border16.png) 20% round!important;
   border-right: 5px solid!important;border-image:url(../Images/siteElements/border16.png) 20% round!important;
   width: 100%;
   color:white;
   text-align:center;
   font-size: 1.75rem;
   box-shadow: 5px 5px 3px 4px black;
   text-shadow: 5px 5px 5px black;
   }


div.descriptiveText {
    color: black;
    background-color: #FFF8DC;
    text-align:left;
    height: 50%;
    border:5px solid!important;border-image:url(../Images/siteElements/border10.png) 15 round!important;
    box-shadow: 2px 5px 3px 4px black;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
    }


div.standardTextBlock {
    color: black;
    background-color: #FBFBF9;
    text-align:left;
    border:5px solid!important;border-image:url(../Images/siteElements/border10.png) 15 round!important;
    box-shadow: 2px 5px 3px 4px black;
    margin-left: .5%;
    margin-right: .5%;
    }


div.story {
    background-color: ghostWhite;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 4em;
    overflow-wrap: anywhere;
    }

div.storyQuote{
   background-color: lightGray;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 4em;
    overflow-wrap: anywhere;
    box-shadow: 5px 10px 5px black;
}

div.statement {
    background-color:#FAF9F6 ;
    padding-left: 10px;
    padding-right: 10px;
    overflow-wrap: anywhere;
    border:5px solid!important;border-image:url(../Images/siteElements/border10.png) 15 round!important;
    box-shadow: 2px 5px 3px 4px black;
    margin-left: .5%;
    margin-right: .5%;
    font-size: clamp( 10px, 1.2vw, 20px);

    }

footer {
    left: 0;
    bottom: 0;
    width: 100%;
    background-image:url(../Images/siteElements/HmMtlGrn.png)!important;
    border:5px solid!important;border-image:url(../Images/siteElements/border16.png) 20% round!important;
    color: gold;
    text-align: center;
    }
   
div.authBlock {
    padding: .1%;
    color:gold;
    text-align: center;
    background-color:gray;
    background-image:url(../Images/siteElements/HmMtlMaroon.png);
    }

header {
    background-image:url(../Images/siteElements/HmMtlGrn.png)!important;
    border-top:5px solid!important;border-image:url(../Images/siteElements/border16.png) 20% round!important;
    border-right:5px solid!important;border-image:url(../Images/siteElements/border16.png) 20% round!important;
    border-left:5px solid!important;border-image:url(../Images/siteElements/border16.png) 20% round!important;
    color:white;
    text-align:left;
    }

.headerText{
 color:white;
 font-size: clamp(20px, 3vw, 30px);
}


.authquote {
    font-style: italic;
    font-size: 110%;
    margin: 10px 10px 10px 10px;
    padding: 10px;
    border-top: 1px solid;
    border-bottom: 1px solid;
    }

p.author {
    color: white;
    }



p {
    text-indent: 1em;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    margin-left: 1em;
    margin-right: 1em;
    font-size: clamp(10px, 4vw, 17px);
    }

/* Top right text */
.top-right {
  position: absolute;
  top: 18px;
  right: 26px;
  width: 50%;
  }

.boxed-text {
  border: 2px solid gold;
  padding: 5px 10px; /* Adds padding inside the box (top/bottom, left/right) */
  display: inline-block; /* Makes the span behave like a block element for width/height control, but still flows inline */
  border-radius: 5px; /* (Optional) Rounds the corners of the box */
 font-size: 1.2rem;
}

}
.close {
  height: 20px;
  background-color: #777;
  border: none;
  color: white;
  border-radius: 2px;
  cursor: pointer;
}

.special-letter{
font-family: "Old English Text MT";
font-size: 4em;
}

/* Container holding the image and the text */
.container {
  position: relative;
  color: white;
}
/* Color Scheme */
.tlg-dark-gray {background-color:#262626}
.tlg-dark-chocolate {background-color:#23241f}
.tlg-darkest-chocolate{background-color:#141514}
.tlg-semiChoc{background-color:#3e3c32}
.tlg-dark-chocolate-mtl{background-image:url(../Images/siteElements/HmMtlGrn.png)!important}
.tlg-mocha{background-color:#8d9286}
.tlg-black-mtl{background-image:url(../Images/siteElements/HmMtlBlk.png)!important}
.tlg-brown-mtl{background-image:url(../Images/siteElements/HmMtlBrnSm.png)!important}


/* Hover Colors */
.tlg-hover-semiChoc:hover{color:#fff!important;background-color:#3e3c32!important}
.tlg-hover-black:hover{color:#fff!important;background-color:#141717!important}
.tlg-hover-blackGhost:hover{color:#fff!important;text-shadow: 2px 2px 8px #fff!important;background-color:#141717!important}
.tlg-hover-blackGhostText:hover{color:#fff!important;text-shadow: 2px 2px 8px #fff!important}
.tlg-hover-drkBlackGhost:hover{color:#fff!important;text-shadow: 4px -4px 8px #fff!important;background-color:#000000!important}
.tlg-hover-boo:hover{color:#fff!important;text-shadow: 4px -4px 8px #fff!important;background-color:#141514!important;transition:text-shadow 2s}

/* Text Formatting */
.tlg-authText{margin:20px!Important;padding: 20px}
.tlg-shortDescriptionText{font-size: calc(.75rem + .15vw);}

/* Buttons */
.tlg-button{border:none;border-radius:16px;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.tlg-quote{margin-left: 5%; margin-right: 5%;}
/*Dividers*/

/*Borders*/
.tlg-bookBorder1{border:5px solid!important;border-image:url(../Images/siteElements/border15.png) 15 round!important;}
.tlg-bookBorderBot1{border-bottom:5px solid!important;border-image:url(../Images/siteElements/border15.png) 15 round!important;}
.tlg-bookBorderH1{border-bottom:8px solid!important;border-top:8px solid!important;border-image:url(../Images/siteElements/border5.png) 7 stretch!important;}
.tlg-bookBorder2{border:5px solid!important;border-image:url(../Images/siteElements/border16.png) 20% round!important;}
.tlg-bookBorderBot2{border-bottom:8px solid!important;border-image:url(../Images/siteElements/border2.png) 20% round!important;}

/*ImageControl #d5c8a0 */

.tlg-authPhoto{border-radius: 50px}

/*CustomHeaders*/
hBahn{font-size:20px!important;text-align:center!important;}

/*ScrollBars*/
.tlg-darkScroll{scrollbar-width: thin; scrollbar-color: #996515 #141717!important;}
.tlg-sidebar{height:100%;width:90%;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}

/*SideBarMenus*/


/*Advertisement*/

.adsGoHere{
background-color: black;
color:gold;
text-align: center;
 border:7px solid!important;border-image:url(../Images/siteElements/border15.png) 10 round!important;
}