/* @import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
:root {
    /* Redesign Colors */
    --color-primary: #87CEEB;   /* Sky Blue for Header */
    --color-secondary: #FF8C00; /* Warm Orange for Accents/Buttons */
    --color-text-dark: #333333;
    --color-text-light: #ffffff;
    --color-bg-light: #f5f5f5;  /* Off-White/Light Gray Background */
    --color-card-bg: #ffffff;
    
}

.main-header {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    font-weight: 800; /* Extra Bold */
}

.logo img {
    height: 80px; /* Adjust size */
    margin-right: 10px;
}

 
.sidebar h2 {
    font-family: var(--font-heading);
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--color-secondary);
}

.recommendation-card {
    background-color: var(--color-card-bg);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 5px;
    text-align: center;
    margin-bottom: 25px;
}

.recommendation-card img {
    width: 334px;
    height: 334px;
    max-height: 100%;
 
    border-radius: 10px;
    margin-bottom: 10px;
}

.recommendation-card h3 {
    font-size: 1.2em;
    margin: 5px 0 15px;
    font-weight: 700;
}

.story-illustration {
  
}

.story-illustration img {
    max-width: 500px;
    height: 500px;
    border-radius: 15px; /* Soft edges */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

   body{
	    
/*	font-family: 'Goudy Bookletter 1911', serif;*/
font-family: 'Quicksand', sans-serif;
    
    font-style: normal;
    font-size: medium;
    text-transform: none;
   }
  .grid {
    display: block;
  
    }
    
h1,h2 .section-title {
  font-family: 'Delius Swash Caps', cursive; /* Use 'cursive' as a fallback */
}
    
 .comment-section {
  border: 1px solid #ddd;
 
 
}
.comment-form textarea {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  resize: vertical;
}

.comment-list {
  margin-top: 10px;
}

.comment {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
.comment-form button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

  .box {
     
    
    padding: 0;
    
    margin: 0 0;
     
    }
    
    figure {

    display: flex;
    flex-flow: column;
    
   
    margin: auto;
 
}
.storytime{

    display:flex;
    flex-flow:column;
    padding:12px;
}
 .g-recaptcha {
     margin-top:-25px;
 }
 #fungifts img{
     
     width:100%;
 }

  @media screen and (min-width: 0px) {
    .grid {
      display: grid;
      grid-template-rows: (8, 1fr);
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 10px;
      }
    .box {
      margin: 0;
      }
    .header {
      grid-column: span 12;
	 
      }
    .recentstories{
      grid-column: span 12;
	 
	      
    margin:auto;
      } 
      .articleimageleft{
          
              width:400px;float:left;padding-left:15px;
              height:300px;
 

      }

    
     .bottomblock {
      grid-column: span 12;
      }
      .footer {
      grid-column: span 12;
      color:white;
      background-color:black;
      }
      .tags{
      		  grid-column: col 10 /span 10;
	     display:grid;
	     grid-gap: 5px;
	     grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
      }
     
	  .tagpics{
		  width:100%;
		  height:270px !important;
	  }
      .tagpic{
      grid-column: span 4;
      }
      .tagdesc{
      grid-column: span 8;
      
      }
      .pagination{
       grid-column: span 12;
      }
	   .d{
        grid-column: col 3 / span 2;
        grid-row: row 2;
        display: grid;
		grid-gap: 10px;
        grid-template-columns: 1fr 1fr;
		}
	
	
	  .articlesummary {
	    grid-column: 2;
        grid-row: 2;
	  }
	  
	  .g {
	     grid-column: col 3 /span 3;
	     display:grid;
	     grid-gap: 10px;
	     grid-template-columns: 1fr 1fr 1fr;
	  }
	  .g1 {
	     grid-column:1;
	  }
	  
	  .g2 {
	     
	  }
	  .bookreviews{
		  grid-column: col 5 /span 5;
	     display:grid;
	     grid-gap: 10px;
	     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	  }
	  .homestoryblocks{
		  grid-column: col 6 /span 6;
	     display:grid;
	     grid-gap: 10px;
	     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	  }
	  
	   @media screen and (min-width: 800px) {
	   .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        grid-gap: 1rem;
        }
 
 
 
        .card {
        
        padding: .5rem;
        }
	   }
  
    }
 @media screen and (min-width: 600px) { 
    .articlelayout {
  display: grid;
  grid-template-columns: 9fr 3fr;
  grid-template-rows: 1fr;
  gap: 0px 20px;
  grid-template-areas:
    "s t";
}
        .t { grid-area: t; }
.s { grid-area: s; }

 }
 
  @media screen and (min-width: 600px) { 
    .hmlayout {
  display: grid;
  grid-template-columns: 6fr 6fr;
  grid-template-rows: 1fr;
  gap: 0px 20px;
  grid-template-areas:
    "h r";
}
        .h { grid-area: h; }
.r { grid-area: r; }

 }
    
    
    
 .bookreviewstitle{
	 font-size:0.75em;
	 line-height:1em;
 }
 .substory{
     
     font-size: 0.8em;
    line-height: 1.25;
    overflow:hidden;
   
    
    
 }
 
 .substoryhmpage1{
      font-size: 0.8em;
    line-height: 1.25;
     
    height:98px;
     
 }
 
 .substoryhmpage{
      font-size: 0.8em;
    line-height: 1.25;
    overflow:hidden;
    height:98px;
     
 }
 .substoryhmpage img{
     
      float:left;padding-right:5px; 
     
 }
  .substoryhmpage1 img{
     
      width:25%;float:left;padding-right:5px; 
     
 }
 .substory img{
     
     
 }
 .grid-sizer,
 .grid-item {  }
 .gutter-sizer { width: 4%; }
.grid-item--width2 { width: 48%; }
.pagination {
  display: inline-block;
}

.imageHolder {
       
       
      float:left;
       display: inline-block;
      margin-right:5px;
    }
    .imageHolder img {
       width:100%;
       height:100%;
    }
    figcaption{
     
        font-size:small;
    }
    .imageHolder figcaption {
     
     
     
      left: 0px;
      text-align:center;
      font-weight:bold;
      font-style:italic;
      margin-top:-50px;
  
 	
 
    }
.nextstoryblock{
 
	 
	cursor:pointer;
	background-color:aquamarine;
 
    
}
.homeimg{
    
    float:left;
    padding-right:5px;
}
.storyblock{
	cursor:pointer;
	 
}
.commentblock{
    background-color:aliceblue;
}
.headlineimage{
    
    height:500px;
    float:left;
    padding-right:15px;
}
.storyblock img {
	cursor:pointer;
	width:100%;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  font-size:12px;
 
}

.storytitle{
    
    background-color: #000000;
    color:white;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 5px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

/* Add a black background color to the top navigation */
.topnav {
  background-color:  var(--color-primary);;
  overflow: hidden;
  margin:auto;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
 font-size:100%;
 
}

/* Add an active class to highlight the current page */
.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  
 
}
.contentblock{
	display:inline-block;
	background-color:white;margin-top:-30px;
	width:100%;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
  
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size:100%;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size:100%;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
  
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content {
    display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
 
.sidebar2 img
{
max-width:100%;
width:100%;

}
.sidebar1 img
{
max-width:100%;
width:100%;
}
.recentstories img
	{
	 
	
	}
/* Style the list */
ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #eee;
	margin-top:1px;
}

/* Display list items side by side */
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: none;
}
.linknew{

	text-decoration:none;	
}

.linknewsidestory {
    text-decoration:none;
    border: 1px solid black;
    display: block;
	border-radius: 25px;
    padding-left: 12px;
    padding-right: 15px;
    padding-bottom: 19px;
	padding-top:10px;
	font-size:21px;
	
}
.linknewsidestory img { 

    height:262px;
    width:500px;
}


.shopfeeds img{

		width:100%;
}
blockquote{
	font-style:italic !important;
	background-color:whitesmoke !important;
}


/* for title to overlap images*/

.container {
  position: relative;
 
  background-color: white;
}



/* Centered text */
.centered {
  position: absolute;
  top: 80%;
  left: 50%;
  background-color:white;
  transform: translate(-50%, -50%);
}



.storyparagraph {
        margin-top:-61px;
}

#slideshow { 
  margin: 50px auto; 
  position: relative; 
  width: 240px; 
  height: 240px; 
  padding: 10px; 
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  right: 10px; 
  bottom: 10px; 
}
    
 

.storyimage{
    float:left;width:200px;padding-right:5px;
}
.hmstoryblock{
    
    display:table;
}
.inlineimageleft{
    
    float:left;padding-right:5px;
}
.inlineimageright{
    
    float:right;padding-left:5px;
}
 
.otherstories{
    
    vertical-align:top;
}
.homeblocks{
    
    display:inline-block;
}
 
.articleimage{
    
    text-align:center;
    background-color:beige;
    width:500px;
    height:500px;
 
}
.articleimagediv{
    float:left;
    height:300px;
    width:300px;
    padding-right:5px;
    padding-bottom:25px;
    
}
.subimages{
    height:220px;
    width:100%;
}

@media all and (max-width: 600px)  {  .slickclass  { height:275px;  } }
@media all and (max-width: 600px)  {  .giftslider img  { height:200px;  } }
@media all and (max-width: 600px)  {  .substory  { font-size:1em;  } }
/*@media all and (min-width: 300px)  {  .articleimage {height:200px;width:200px;padding-right: 10px;
    float: left;}}
    @media all and (min-width: 900px) {  .articleimage {height:400px;padding-right: 10px;float: left;}}*/
@media all and (min-width: 100px)  {.articleimagediv {height:370px;width:100%;} .story-illustration {height:360px;width:100%;}}
@media all and (min-width: 360px)  {.articleimagediv {height:390px;width:100%;} .story-illustration {height:380px;width:100%;}}
@media all and (min-width: 375px)  {.articleimagediv {height:400px;width:100%;} .story-illustration {height:390px;width:100%;} }
@media all and (min-width: 500px)  {.articleimagediv {height:405px;width:405px;padding-bottom:87px;} .story-illustration {height:395px;width:305px;}}
@media all and (min-width: 720px)  {.articleimagediv {height:500px;width:500px;padding-bottom:87px;} .story-illustration {height:500px;max-width:500px;}}
 
@media all and (min-width: 700px)  {.articleimagediv {height:500px;width:500px} .story-illustration {margin-top:25px;height:500px;width:500px} .linknewsidestory {width:300px;}}
@media all and (min-width: 1000px) {.articleimagediv {height:450px;width:500px;padding-bottom:80px;} .story-illustration {height:500px;width:500px;}}

@media all and (min-width: 50px)   {  body  { font-size:medium;  } }
@media all and (min-width: 100px)  {  body  { font-size:medium;  } }
@media all and (min-width: 200px)  {  body  { font-size:medium;  } }
@media all and (min-width: 300px)  {  body  { font-size:medium;  } }
@media all and (min-width: 400px)  {  body  { font-size:medium;  } }
@media all and (min-width: 500px)  {  body  { font-size:medium;  } }
@media all and (min-width: 600px)  {  body  { font-size:5.2vw;  } }
@media all and (min-width: 700px)  {  body  { font-size:3.2vw;  } }
@media all and (min-width: 800px)  {  body  { font-size:3.2vw;  } }
@media all and (min-width: 900px)  {  body  { font-size:3.2vw;  } }
@media all and (min-width: 1000px) {  body  { font-size:3.2vw;  } }
@media all and (min-width: 1100px) {  body  { font-size:2.5vw;  } }
@media all and (min-width: 1200px) {  body  { font-size:2.5vw;  } }
@media all and (min-width: 1300px) {  body  { font-size:2.5vw;  } }
@media all and (min-width: 1400px) {  body  { font-size:2.5vw;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.2vw;  } }
@media all and (min-width: 1600px) {  body  { font-size:3.2vw;  } }
@media all and (min-width: 1700px) {  body  { font-size:3.2vw;  } }  

.grid-container-gifts {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 4 equal columns */
  gap: 10px; /* Space between grid items */
}

.grid-item-gifts {
  aspect-ratio: 1 / 1; /* Ensures equal width and height */
  background-color: #ddd; /* Placeholder background color */
  display: flex;
  justify-content: center;
  align-items: center; /* Centers content */
  font-size: 20px; /* Example styling */
  border: 1px solid #ccc;
}

.custom-icon-list {
    list-style: none; /* Removes the default bullet */
    padding-left: 0;  /* Removes default left padding */
}

.custom-icon-list li {
    padding-left: 1.5em; /* Space for the custom icon */
    position: relative;
    line-height: 1.5;
    margin-bottom: 0.5em;
    font-family: Arial, sans-serif;
    color: #003366; /* Dark blue text */
}

.custom-icon-list li::before {
    content: "🐧"; /* The custom icon (an emoji) */
    position: absolute;
    left: 0;
    color: #4CAF50; /* A color could be applied if it wasn't an emoji */
    font-size: 1.2em;
}