/** HISTORICAL SOCIETY WEBSITE
  *  Incorp4T by 4Templates | http://www.4templates.com/free/ | @4templates
  *  Licensed under the Creative Commons Attribution 3.0 License
  **/

html, body {
   height: 100%;
   min-width: 320px;
   width: 100%;}

body {
   background-color: #741220;
   /* shadow at the top of the window */
   background-image: url(https://res.cloudinary.com/dnk3burcw/image/upload/e_gradient_fade,y_-0.5,b_rgb:741220,f_auto/v1773456026/background_d0inyy.jpg);
   background-repeat: no-repeat;
   background-size: 100% 73%;
   color: #FFF;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   margin: 0;
   padding: 0;
   display:block;}

li {
   margin-bottom: 10px;}

.button-style1 {
   background: url(/images/post-meta-button.png) no-repeat left top;
   display: inline-block;
   font-family: 'Arvo', serif;
   font-size: 16px;
   font-weight: bold;
   letter-spacing: 0;
   line-height: 63px;
   padding-right: 32px;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   height: 63px;
   width: 168px;}

/* Style for the donate artificats guidelines button */
.button-donate-guide {
   background: url(/images/banner-caption-bg.png) no-repeat left top;
   display: inline-block;
   font-family: 'Arvo', serif;
   font-size: 16px;
   font-weight: bold;
   line-height: 45px;
   padding: 5px 5px;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
   height: 100%;
   width: 100%; 
   background-size:100% 100%;}

.imgborder{
   border: 10px solid #FFF;}

.imgcenter{
display: block;
margin-left:auto;
margin-right:auto;
}

.toplink {
   clear: both;
   margin-top: 50px;
   text-align: center;}
   #lonepage{
      width:500px;
         background-color:rgba(0, 0, 0, 0.45);
         box-shadow:inset 0px 5px 30px 1px rgba(0,0,0,0.5), inset 0px 0px 50px rgba(255,255,255,0.1);
         -moz-box-shadow:inset 0 5px 30px 1px rgba(0,0,0,0.5), inset 0 0 50px rgba(255,255,255,0.1);
         -webkit-box-shadow:inset 0 5px 30px 1px rgba(0,0,0,0.5), inset 0 0 50px rgba(255,255,255,0.1);
         box-sizing:border-box;
         margin-right:auto;
         font-size :15px;
         margin-top:5px;
         margin-left: auto;
         text-shadow:1px 1px 1px #000;
         }

/** DEFAULT STYLES
  *  Default or "reset" styles
  *  These apply base formatting for elements
  **/
a {
   /* link color is white */
   color: #FFF;}

a:hover {
   text-decoration: none;}



h1, h2, h3, h4 {
   /* default styling for headers 1 - 4 */
   font-family: 'Arvo', serif;
   margin: 0;
   padding: 0;
   text-transform: uppercase;}

   h1{
      padding-bottom:5px;
   }

p, ol {
   /* text is almost double-spaced */
   line-height: 1.9;}

p, ol, ul {
   margin-top: 0;
   font-size: 16px;}


/** WRAPPER
  *  The wrapper region contains the content
  *  This region is fixed-width and centered horizontally
  **/
#wrapper {
   margin: 0 auto;
   box-sizing: border-box;
   max-width: 1010px;
   width: 100%;}


/** MENU
  * The menu region is located between the header and banner
  * It contains a list of links to other pages on the site
  * #menu is a div statement declaring the menu region
  * .menu is the ul (unordered list) inside of it
  * we're using this class to handle some annoying specificity issues
  **/
#menu-button {
   display: none;
   position: absolute;
   top: 60px;
   right: 20px;
   z-index: 1;
   cursor: pointer;
   font-size: 18px;
   font-weight: bold;
   color: #FFF;
   text-decoration: none;
   text-shadow: 1px 2px 1px #111719;
   text-transform: uppercase;
   padding: 35px 3px;
   background-color: #324146;
   border-radius: 5px;
   transition: all 0.3s ease-in-out;
}

#menu {
   font-size: 18px;
   margin: 60px auto 20px auto;
   height:110px; max-width:100%;}

.logo {
   margin-top: -56px;
   position: absolute;}

.menu {
   background: url(/images/menu-wrapper-bg.png) no-repeat left top;
   list-style: none;
   padding-left: 20%;
   text-align: center;
   padding-right: 5%;}

.menu a {
	padding:5px;
   font-size: 16.5px;
   text-decoration: none;
   text-shadow: 1px 2px 1px #111719;
   text-transform: uppercase;}

.menu a:hover {
   color: #deac47;}

.menu li {
   display: inline-block;
   line-height: 93px;
   margin-bottom: 0;}


.dropdownButton{
	font-family:inherit;
	font-size:inherit;
	color:inherit;
	background-color:inherit;
	border:0;
	text-transform:uppercase;
}
li > .dropdownButton:hover {
   color: #deac47;
   }
  .dropdownButton:hover >.dropdownArrow {
	   border: solid #deac47;
	   border-width: 0 3px 3px 0;  
		
   }
   .dropdownArrow{
	    border: solid #fff;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	vertical-align: 15%; 	
   }
   /* apply nav menu hover styles on mobile*/
.dropdownArrowHover{
  border: solid #deac47;
	   border-width: 0 3px 3px 0;
}
.dropdownButtonHover{
	    color: #deac47;
}	
/* end of hover styles on mobile*/

.dropdown {
   background-color: #F6F6F4;
   border: 2px solid #BAB36F;
   box-shadow: 0 0 0 4px #F6F6F4, 0 8px 16px 4px rgba(0,0,0,0.2);
   /* drop-downs are hidden by default */
   display: none;
   list-style: none;
   margin-left: 5px;
   padding: 12px 0;
   position: absolute;
   text-align: center;
   z-index: 1;
   min-width:160px;}

.dropdown:before {
    /*configures styles for chevron*/ 
   border: 10px solid transparent;
   border-bottom-color: #F6F6F4;
   box-sizing: border-box;
   content: "";
   margin-top: -38px;
   display:block;
   position: absolute;
   height:10px; 
   width:10px;
   padding:10px;
   }

.dropdown a {
   color: #040603;
   display: block;
   font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
   font-weight: bold;
   letter-spacing: 0;
   padding: 5px;
   text-shadow: none;
   text-transform: capitalize;
   width:160px;}

.dropdown a:hover {
   background-color: #D8D6C7;
   color: initial;}

.dropdown li {
   display: block;
   line-height: initial;
   padding: 0;}

 .dropdown.show {
	   display: block;
   }
/** BANNER
  * The banner defines the region below the navigation and above the content.
  * This region is what contains the "banner" image and the slideshow on the main page.
  **/
#banner {
   /* auto margins horizontally center the banner */
   margin: 50px auto 20px auto;
   /* inherits height from the image inside the banner */
   height: 100%;
   width: 1000px;}

#banner img {
   /* the best way to center an image. images default to display:inline, so it must be set to block before we can use auto margins to position it */
   display: block;
   margin: 0 auto;}


/** PAGE
  * The page region is defined by a darker red region beneath the banner and to the left of the related links
  * The page contains the bulk of the content
  **/
#page {
   /* background-color and box-shadow define the darker red region of the page */
   background-color: rgba(0,0,0,0.45);
   box-shadow: inset 0 5px 30px 1px rgba(0,0,0,0.5), inset 0 0 50px rgba(255,255,255,0.1);
    /* vender prefixes target specific versions of Firefox, Safari and Android. box-shadow prefixes are probably unnecessary, but they hit all the bases */
    -moz-box-shadow: inset 0 5px 30px 1px rgba(0,0,0,0.5), inset 0 0 50px rgba(255,255,255,0.1);
    -webkit-box-shadow: inset 0 5px 30px 1px rgba(0,0,0,0.5), inset 0 0 50px rgba(255,255,255,0.1);
   box-sizing: border-box;
   float: left;
   font-size: 15px;
   margin-top: 5px;
   margin-left: 5px;
   overflow: hidden;
   padding: 50px;
   text-shadow: 1px 1px 1px #000;
   width: 670px;}

#page hr {
   border: none;
   border-top: 1px solid #414242;
   clear: both;
   margin-bottom: 60px;}

#page h2 {
   /* "titles" */
   font-size: 30px;
   font-weight: bold;
   margin-bottom: 20px;}

#page h3 {
   /* "subtitles" */
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 20px;}

#page h4 {
   font-size: 18px;}

#page .imgthumb {
   float: left;
   margin-top: 5px;
   margin-right: 30px;}

#page.narrow {
   float: none;
   margin: 0 auto;}

#page.wide {
   max-width: 1010px;
   width:100%;
   }


/** SIDEBAR
  * The sidebar region is located beneath the banner and to the right of the page region
  * It is for relevant or supplementary content
  **/
#sidebar {
   float: right;
   width: 322px;
  
 }
 /*Apply this style to make the side bar scroll. */
 #movingsidebar{
	 float: right;
     max-width: 320px;
	 position:sticky;
	 top:0;
	 width:100%;
 }

#sidebar .imgborder, #movingsidebar .imgborder  {
   max-width:90%;}

#sidebar .title, #movingsidebar .title {
   /* stylizes headers on the sidebar */
   background: url(/images/sidebar-title-bg.png) no-repeat left top;
   background-size: 320px;
   font-size: 18px;
   line-height: 72px;
   padding: 0 35px;
   text-shadow: 1px 2px 1px #101618;
   height: 72px;
   width: 320px;}
   #sidebar .title a, #movingsidebar .title a {
      text-decoration: none;
   }

   #sidebar .title a:hover, #movingsidebar .title a:hover {
      text-decoration:underline;
   }
#sidebar ul, #movingsidebar ul{
	list-style-type: none;
   margin: 0;
   padding: 10px 0;}

#sidebar li, #movingsidebar li {
   padding: 10px 0 20px 30px;
   text-shadow: 2px 2px 2px #111;}
#sidebar div , #movingsidebar div{
	padding-top:5px;
	padding-left:5%;
	}

.hours li {text-shadow:none;}


/** FOOTER
  * The footer region is located at the bottom of the page
  * It contains important copyright information and other site information
  **/
#footer {
   clear: both;
   overflow: hidden;
   padding-top: 60px;
   height: 150px;}

#footer p {
   text-align: center;
   text-shadow: 2px 1px 2px #0D0D0D;}

.share {
   /* uses flexbox to perfectly align the footer images */
   display: flex;
      display: -ms-flexbox;
      display: -webkit-box;
      display: -webkit-flex;
   align-items: center;
      -ms-flex-align: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
   justify-content: center;
      -ms-flex-pack: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
   margin-top: -15px;}
.share a:first-of-type{
	padding-right:5px;
	padding-left:2px;
}
.share a:last-of-type{
	padding-right:2px;
}
   .bold {
	   font-weight: bold;
   }

/* Contact Form Styles */
.contact-form {
    max-width: 600px;
    margin: 20px 0;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.form-group {
    margin-bottom: 15px;
    padding-right: 5%;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #FFF;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #414242;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
}

.form-group textarea {
    resize: vertical;
}

.submit-btn {
    background-color: #457E0C;
    color: #FFF;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Arvo', serif;
    font-size: 16px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #3a6a0a;
}

.checkbox-group {
    margin-bottom: 15px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    user-select: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.checkbox-label:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.checkbox-label:active {
    background-color: rgba(255, 255, 255, 0.2);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.checkbox-label span {
    color: #FFF;
    font-weight: normal;
    flex: 1;
}

.form-response {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    display: block;
}

.form-response.success {
    background-color: rgba(69, 126, 12, 0.2);
    border: 1px solid #457E0C;
    color: #fff;
}

.form-response.error {
    background-color: rgba(255, 0, 0, 0.2);
    border: 1px solid #ff0000;
    color: #fff;
}
#google-map{
	max-width: 100%;
	height: 450px;
	border:0;
	padding: 5px;
}
#video{
   border:2px solid #950C0C; 
   margin-left: auto; 
   margin-right: auto; 
   display: block;
   min-width:70%;
   height:480px;
   width:90%;
}
/* Tablet Styles (768px - 1009px) */
@media (max-width: 1009px) and (min-width: 769px) {
   html, body {
      min-width: 768px;
   }
   
   #wrapper {
      width: 100%;
      max-width: 1009px;
      padding: 0 15px;
      box-sizing: border-box;
   }
   
   #menu {
      width: 100%;
      height: 100%;
      position: relative;
      margin: 60px auto 20px auto;
   }
   
   .logo {
      position: absolute;
      margin-top: -56px;
      left: 0;
      z-index: 10;
   }
   
   .logo img {
      width: 150px; /* Reduce logo size on tablet */
      height: 150px;
   }
   
   .menu {
      background: url(/images/menu-wrapper-bg.png) no-repeat center top;
      list-style: none;
       /* Make room for smaller logo */
      padding-right: 10px;
      text-align: left; /* Changed from center to left */
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap; /* Allow wrapping if needed */
      align-items: center;
      justify-content: flex-start;
   }
   
   .menu li {
	   display:block;
      line-height:93px;
      margin-bottom: 0;
      
   }
   
   .menu a {
      text-decoration: none;
      text-shadow: none;
      text-transform: uppercase;
      white-space: nowrap; /* Prevent text wrapping */
   }
   
   /* Handle the Events item that's wrapping */
   .menu li:last-child {
      margin-right: 0;
   }
   
   /* If still wrapping, make Events smaller or move to second line */
   .menu li:nth-last-child(1) {
      font-size: 13px;
   }
   
   .menu li:nth-last-child(2) {
      font-size: 13px;
   }
   
   /* Dropdown adjustments for tablet */

   .dropdown a{
      padding:5px;
      text-wrap:auto;
      text-transform: capitalize;
   }
   .dropdown li{
      line-height:initial;
      
   }
   #banner {
      width: 100%;
      max-width: 900px;
   }
   
   #banner img {
      max-width: 450px;
      height: auto;
   }
   
   #page {
      width: 58%;
      margin-left: 10px;
   }
   #sidebar, #movingsidebar {
      width: 38%;
   }
   #sidebar .title, #movingsidebar .title {
      max-width: 322px;
      background-size: 322px;
      background-position: 5px;
      width: initial;
   }
   
   #sidebar .imgborder, #movingsidebar .imgborder {
      max-width: 90%; 
      width:100%;
   }
}
@media (max-width: 923px){
	    .menu a {
			font-size:15px;
		}
		.dropdownButton{
			font-size:15px;
		}
}
@media (max-width:872px){
	 .menu a {
			font-size:14px;
		}
		.dropdownButton{
			font-size:14px;
		}
}
@media (max-width:836px){
	 .menu a {
			font-size:13px;
		}
		.dropdownButton{
			font-size:13px;
		}
}

/* Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
   html, body {
      min-width: 320px;
   }
   #menu-button {
      display: block;
     }
   #wrapper {
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
   }
   
   /* Mobile Navigation */
   
   #menu {
      background-size: 100% auto;
      height: auto;
      width: 100%;
      margin: 20px auto;
      position: relative;
     
   }
   
   
   .logo {
      position: static;
      margin-top: 0;
      text-align: center;
      margin-bottom: 20px;
   }
   
   .menu {
      display: none;
      flex-direction: column;
      padding-left: 0;
      text-align: center;
      width: 100%;
   }
   
   .menu.active {
      background-color:#324146;
      background-image:none;
      border-top-left-radius:5%;
      border-top-right-radius:5%;
      display: flex;
      padding-right:1px;
   }
   
   .menu li {
      line-height: normal;
      margin: 5px 0;
      width: 100%;
	  border-bottom: 1px solid rgba(255,255,255,0.2);
   }
   
   .menu a {
      padding: 15px;
      display: block;
      font-size: 14px;
	  width: 25%;
	  margin: auto;
   }
    .menu li:hover > a {
		color:#deac47;
		
	}
	.dropdownButton{
	font-size:14px;	
	padding:15px;
	}
   /* Dropdown adjustments for mobile */
   .dropdown {
      display: none;
      background: rgba(0,0,0,0.3);
      border: none;
      box-shadow: none;
      margin: 0;
      padding: 0;
	  position:unset;
   }
  
   .dropdown:before {
      display: none;
   }
   
   .dropdown a {
      color: #FFF;
      background: none;
      max-width: 100%;
      padding: 10px 20px;
	  width:unset;
   }
   .dropdown a:hover {
	   background-color:unset;
	   color:#deac47;
	   
   }
   
   /* Banner */
   #banner {
      width: 100%;
      margin: 20px auto;
   }
   
   #banner img {
      width: 90%;
      height: auto;
   }
   
   /* Page Content */
   #page {
      width: 100%;
      float: none;
      margin: 10px 0;
      padding: 20px;
      box-sizing: border-box;
   }
   
   #page h2 {
      font-size: 24px;
   }
   
   #page h3 {
      font-size: 18px;
   }
   
   #page .imgthumb {
      display: block;
      margin: 10px auto;
      padding-right:2%;
   }
   
   /* Sidebar */
   #sidebar, #movingsidebar {
      width: 100%;
      float: none;
      margin-top: 20px;
      position: static;
	  text-align:center;
   }
     #movingsidebar {	
     max-width:unset;
   }
   
   #sidebar .title, #movingsidebar .title {
      width: 100%;
      background-size: 100% auto;
      text-align: center;
      padding: 0;
   }
   
   #sidebar .imgborder, #movingsidebar .imgborder {
      width: 100%;
      max-width: 300px;
      display: block;
      margin-left: auto;
      margin-right: auto;
   }
   
   /* Buttons */
   .button-style1, .button-donate-guide {
     max-width: 100%;
      margin: 10px auto;
      display: block;
   }
   
   /* Contact Form */
   .contact-form {
      margin: 10px 0;
   }
   
   .form-group {
      padding-right: 0;
   }
   
   /* Typography */
   body {
      font-size: 14px;
   }
   
   p, ol, ul {
      font-size: 14px;
   }
   
   /* Footer */
   #footer {
      padding-top: 30px;
      height: auto;
   }
   
   .share {
      flex-direction: column;
      gap: 10px;
   }
   #lastLi{
	   border-bottom:none;
   }
   #google-map{
	   width:90%;
   }
}

/* Small Mobile Styles (max-width: 480px) */
@media (max-width: 480px) {
   #wrapper {
      padding: 0 5px;
   }
   
   #page {
      padding: 15px;
   }
   
   #page h2 {
      font-size: 20px;
   }
   
   #page h3 {
      font-size: 16px;
   }
   
   body {
      font-size: 13px;
   }
   
   .menu a {
      font-size: 13px;
      padding: 12px;
   }
  .dropdownButton{
	    font-size: 13px;
   }
   #lonepage {
      width: 100%;
      padding: 15px;
      box-sizing: border-box;
   }
}