/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }


/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; width: 100%; overflow-x: hidden; /* Prevent horizontal scrolling */ font-size: .9em; line-height: 1.4; font-family: 'Spinnaker', sans-serif; color: #fff; background: url('../img/bg-repeat.jpg') repeat; }
#bg { background: url('../img/bg-center.jpg') no-repeat 50% top;  }

::-moz-selection { background: #9ea26f; color: #fff; text-shadow: none; }
::selection { background: #9ea26f; color: #fff; text-shadow: none; }

h1 { font-size: 31px; margin: 0 0 1em 0; padding: 0; color: #fff; line-height: 1.2em; text-transform: uppercase;  }
h1 img { vertical-align: text-bottom; margin-right: 15px; }
h2 { font-size: 22px; margin: 0 0 .5em 0; padding: 0; color: #fff; line-height: 1.3em;  }
h3 { font-size: 18px; margin: 0 0 .2em 0; padding: 0; color: #fff; line-height: 1.3em;  }
h4 { font-size: 16px; margin: 0 0 .1em 0; padding: 0; color: #fff; line-height: 1.3em;  }
h5 { font-size: 14px; margin: 0 0 .1em 0; padding: 0; color: #fff; line-height: 1.3em;  }
h6 { font-size: 12px; margin: 0 0 .1em 0; padding: 0; color: #fff; line-height: 1.3em;  }

a { color: #4fb06f; }
a:visited { color: #4fb06f; }
a:hover { color: #a04a21; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

p { margin: 0 0 1.4em;  } 

ul, ol { margin: 1em 0; padding: 0 0 0 3em; }
#copy ul { list-style-type: square; }
#copy ol { list-style-type: decimal; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }



/* ===== Primary Styles ========================================================
   Author:
   ========================================================================== */

header .menu { background: url('../img/div-int.png') no-repeat 120px 87px; }
header .nav { margin: 87px 0 0 6px; padding: 0; float: left; height: 20px; }
header .nav li { float: left;  }
header .nav li a { display: block; float: left; color: #fff; text-decoration: none; font-size: 13px; margin-right: 20px; margin-bottom: 2px;  }
header .nav li a:visited { color: #fff;  text-decoration: none; }
header .nav li a:hover { color: #a04a21; }
header .nav li.active a { border-bottom: 2px solid #fff; margin-bottom: 0; color: #898989;  }
header .sub { clear: none; margin: 0 0 0 6px; padding: 1px 0 0 0; float: left; width: 80% }
header .sub li { float: left;  }
header .sub li a { display: block; float: left; color: #fff; text-decoration: none; font-size: 16px; margin-right: 15px; padding-bottom: 60px; text-transform: uppercase; margin-top: 2px; padding-top: 3px;  }
header .sub li a:hover { color: #a04a21; }
header .sub li.active a { border-top: 2px solid #fff; margin-top: 0; color: #898989;  }
header .logo { margin-top: 55px; float: left; margin-right: 20px; }

#feature { width: 100%; height: 469px; /*background: url('../img/feature-1.jpg') no-repeat 50% top;*/ margin-bottom: 24px; position: relative; }
#feature .feature_top {  z-index: 9999; height: 6px; top: 0px; width: 100%; background: url('../img/bg-feature-shadow-top.png') repeat-x; position: absolute; }
#feature .feature_bottom { z-index: 9999; height: 6px; bottom: -1px; width: 100%; background:  url('../img/bg-feature-shadow-bottom.png') repeat-x;  position: absolute; }
#feature #slider {  z-index:1; position:relative; width: 100%; overflow: hidden;  height: 469px; background: url('../img/feature-1.jpg') no-repeat 50% top; }
#slider .items { height:20000em; position:absolute; z-index: 1 }
#slider .items > div, #slider .items > img { width: 2000px; height: 469px; float:left; }

#image_wrap  { position: relative; overflow: hidden; width:614px; height:375px;  float: left; border: 3px solid #fff;  }
#image_wrap  .items { width:20000em; position:absolute; z-index: 1 }
#image_wrap .gallery { position: relative; overflow: hidden; width:620px; height:375px;  float: left; z-index: 1; }
#image_wrap .gallery .gitems {  width:20000em; position:absolute; z-index: 1 }
#image_wrap .gallery .gitems img, #image_wrap .gallery .gitems a, #image_wrap .gallery .gitems div { float: left; }
#image_wrap .gallery .gitems div { width:614px; height:375px; background: #000; text-align: center; position: relative; }
#image_wrap .gallery .gitems div img { float: none; }
#main #image_wrap img { border: 0; } 
#image_wrap a.browse { position: absolute; top: 338px; height: 27px; width: 27px; z-index: 999; cursor: pointer; }
#image_wrap a.disabled { display: none; }
#image_wrap a.zoom { position: absolute; top: 338px; left: 300px; height: 27px; width: 27px; z-index: 999;  background: url('../img/icon-mag.png') no-repeat 0 0 ; cursor: pointer; }
#image_wrap a.gallery_prev { background: url('../img/arrow-left-80.png') no-repeat 0 0 ; left: 10px;  }
#image_wrap a.gallery_next { background: url('../img/arrow-right-80.png') no-repeat 0 0; right: 10px; }

.scrollable { position: relative; overflow: hidden; width: 511px; height: 111px; float: left; }
.scrollable .items { width: 20000em; position: absolute; clear: both; padding-top: 0px; }
.scrollable .items .window { float: left; width: 511px; }
.scrollable .items .window div { margin: 0 10px; float: left; text-align: center; width: 106px; line-height: 1.2em; font-size: 12px; cursor: pointer; padding-bottom: 20px; position: relative;  }
.scrollable .items .window div img { display: block; }
.scrollable .items .window div .arrow { width: 26px; height: 10px; background: url('../img/arrow-up.png') no-repeat; position: absolute; bottom: 0; left: 30px; padding: 0; }
.scrollable_warp { margin:0 auto; width: 620px; height:111px; background: #2a2a2a; padding-top: 24px; }
.scrollable_warp a.browse {  display: block; width: 34px; height: 30px; float: left; margin: 30px 10px; cursor: pointer; font-size: 1px; }
.scrollable_warp a.next { background: url('../img/arrow-right.png') no-repeat 0 0 ; }
.scrollable_warp a.prev { background: url('../img/arrow-left.png') no-repeat 0 0 ; }
.scrollable_warp a.disabled { background: transparent; }

#main .count { text-align: center; font-size: 12px; padding-top: 10px; clear: both; } 

#main img { border: 3px solid #fff; }
#main .logo { border: 0; }
.mobile_logo { display: none; }
#main .banner { margin-bottom: 40px; }
#main .imgRight { float: right; margin: 0 0 1.2em 1.2em; }
#main .imgLeft { float: left; margin: 0 1.2em 1.2em 0; }

#main .copy { margin: 0 10px 0 0; }
#main aside { margin: 0; width: 330px; }

aside .callout { color: #fff; display: block; text-align: center; font-size: 11px; font-weight: normal; text-transform: uppercase; margin-bottom: 20px; line-height: 2em; }
aside .callout:hover { color: #a04a21; }
aside .callout img { display: block; }
aside h2 { clear: both; font-size: 30px; text-transform: uppercase; background: url('../img/bg-banner.png') no-repeat right top; line-height: 44px; text-align: center; margin-bottom: 30px; }
aside h2.sm { font-size: 24px; }
aside .facebook { color: #fff; }
aside .facebook:visited { color: #fff; }
aside .contact { font-size: 14px; }
aside .box { margin-bottom: 60px; padding: 0 15px; }
aside a { color: #fff; text-decoration: none; }
aside a:visited { color: #fff; }
#main aside .facebook img { margin-right: 10px; float:left; border: 0;  }
aside .poem p { font-size: 12px; padding: 0 0 0 10px; }

.index_page header .nav { float: none; margin-top: 85px;  }
.index_page header .sub { float: none; display: block;  margin-bottom: 22px; }
.index_page header .menu { background: url('../img/div-full.png') no-repeat left 87px; }
.index_page #main  .copy { margin-right: 10px; margin-left: 10px; }
.index_page #main aside { margin-left: 10px; margin-right: 10px; width: 300px; padding-top: 80px; }
.index_page header .sub li a { padding-bottom: 20px }
.index_page h2 { font-size: 30px; }
.index_page #main p { font-size: 16px; margin-top: 30px; }

footer { margin-top: 30px; background: url('../img/div-full.png') no-repeat 49% top; padding-top: 40px; }
footer .logo { float: left; margin-right: 20px;  }
footer .address { float: left; margin-right: 20px; padding-top: 20px; }
footer .contact { float: left; margin-right: 20px; padding-top: 20px; }
footer a { color: #fff; text-decoration: underline;  }
footer a:visited { color: #fff; text-decoration: underline; }
footer .facebook { text-align: right;  padding-top: 15px; }  
footer .facebook img { float: right; margin-right: 10px; margin-left: 5px;  }
footer #credits { padding-top: 100px; text-align: center; font-size: 11px; color: #8d8d8d; padding-bottom: 4px; }
footer #credits a { color: #8d8d8d; }
footer #credits a:visited { color: #8d8d8d;  }


/* =============================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {
	/* Style adjustments for viewports that meet the condition */
}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {

   * {
      width: auto;
      max-width: 100%;
   }
    header {
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        position: fixed;
        background-color: #212121;
        width: 100vw;
        z-index: 999;
    }

    header .logo {
        width: 50px; /* Adjust logo size f$or mobile */
        margin-top: 15px;
    }

    #feature {
      padding-top: 80px;
      height: 200px;
    }
    #feature #slider {
      height: 200px;
    }
    #slider .items > div, #slider .items > img{
      height: 200px;
      width: auto;
      object-fit: cover;
      object-position: center;
      max-height: 200px;
      width: 100%;
    }
    #feature .feature_bottom {
      z-index: 999;
    }

    .nav, .sub, .container_12.menu {
        display: none; /* Hide desktop navigation and menu container */
    }

    .mobile-menu {
        display: block; /* Show mobile menu */
    }

    #main {
        display: flex;
        flex-direction: column;
        padding-top: 120px;  
    }
    .index_page #main {
      padding-top: 40px;
    }
    .index_page #main .logo {
      margin-bottom: 20px;
    }
    .grid_8.copy {
      padding: 20px;
    }

    #main .copy, #main aside {
        max-width: 100%;
        width: auto;
        margin: 0;
    }

    #main aside {
        order: 2; /* Move sidebar below main content */
    }

    #sidebar h2 {
      margin-left: 20px;
      margin-right: 20px;
      background: url(../img/bg-banner.png) no-repeat center top;
    }
    aside .gallery, .index_page #main aside  {
      display: grid; 
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, auto);
      gap: 10px;
      padding: 20px;
    }

    .index_page #main aside {
      width: auto;
    }

    

    aside .gallery .callout, .index_page #main aside  .callout {
      float: none;
      display: block;
      width: auto;
      text-align: center;
      margin: 0;
    }

    aside .callout img {
      display: block;
      margin: 0 auto;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    }

    footer .address, footer .contact {
      float: none;
      display: block;
      width: auto;
      text-align: center;
    }
    
}

/* Mobile Menu Styles */
.mobile-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 80px;
    right: 0;
    background: #333;
    color: #fff;
    width: 100%;
    
    z-index: 1000;
    height: auto;
    overflow-y: auto;
    
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu li {
    
    border-bottom: 1px solid #444;
}

.mobile-menu li.galleries{
   padding: 10px;
}

.mobile-menu .galleries ul {
    display: block; /* Ensure sub-menu is always visible */
    padding-left: 5px; /* Optional: Indent sub-menu items */
    margin-top: 10px;
    width: 100%;
}



.mobile-menu li a {
  color: #fff;
  display: block;
  padding: 10px;
  text-decoration: none;
}

.mobile-menu li.galleries  {
   color: #999;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    font-size: .9em;
    line-height: 1.4;
    font-family: 'Spinnaker', sans-serif;
    color: #fff;
    background: url('../img/bg-repeat.jpg') repeat;
    /* Remove padding-top: 80px; */
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
    .mobile-menu-button {
        display: block;
        margin: 20px; /* Show on mobile */
    }

    .mobile-menu {
        display: none; /* Hidden by default */
    }

    .mobile-menu.open {
        display: block; /* Show when open */
    }

    header .logo {
        width: 50px; /* Adjust logo size for mobile */
    }

    .nav, .sub {
        display: none; /* Hide desktop navigation */
    }

    header .sub {

    }

    header .sub li {
      float: none;
      display: block;
   }
   
   header .sub li a {
      text-transform: none;
      padding: 10px;
      margin: 0;
      color: #fff;
      font-size: 14px;
      display: block;
      float: none;
   }
   
   .mobile-menu li a {
     color: #fff;
     display: block;
     padding: 10px;
   }

}

/* Mobile Menu Button Styles */
.mobile-menu-button {
    display: none; /* Hidden by default */
    cursor: pointer;
    width: 30px;
    height: 25px;
    position: relative;
    z-index: 1001;
}

.mobile-menu-button span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: #fff;
    position: absolute;
    transition: all 0.3s ease;
}

.mobile-menu-button span:nth-child(1) {
    top: 0;
}

.mobile-menu-button span:nth-child(2) {
    top: 10px;
}

.mobile-menu-button span:nth-child(3) {
    top: 20px;
}

.mobile-menu-button.open span:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
}

.mobile-menu-button.open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.open span:nth-child(3) {
    transform: rotate(-45deg);
    top: 10px;
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
    .mobile-menu-button {
        display: block; /* Show on mobile */
    }

    .mobile-menu {
        display: none; /* Hidden by default */
    }

    
    header .logo {
        width: 50px; /* Adjust logo size for mobile */
    }

    .nav, .sub {
        display: none; /* Hide desktop navigation */
    }
    
}

.container_12, .container_16 {
    width: 100%; /* Use full width */
    max-width: 960px; /* Maintain max width for larger screens */
    margin: 0 auto;
    padding: 0 10px; /* Add padding for mobile */
}

.mobile_galleries { display: none; }

/* Mobile Styles */
@media only screen and (max-width: 768px) {
    /* ... existing mobile styles ... */

    .container_12 [class^="grid_"] {
        max-width: 100%; /* Ensure grid elements do not exceed 100% width */
        width: auto;
        float: none;
        display: block;
    }

    .container_12, .container_16 {
        padding: 0; /* Adjust padding for mobile */
        width: 100vw;
        max-width: 100%;
    }
    
    body{
      width: 100vw;
      max-width: 100%;
      min-width: 300px;
    }

    .mobile_logo { display: block; }  

    aside .box {
      padding: 0 20px;
    }

    footer .logo {
      display: block;
      float: none;
      margin: 0 auto;
    }

    footer .facebook, footer .grid_10 {
      padding-left: 20px;
      padding-right: 20px;
      margin-left: 0;
      margin-right: 0;
      text-align: center;
    }
    footer .facebook img {
      margin: 0 auto;
      display: inline-block;
      float: none;
      margin-right: 10px;
      height: 2em;
    }

    aside .contact {
      text-align: center;;
    }
    aside .contact p {
      margin-right: 0;
      text-align: center;
    }

    aside .facebook {
      display: flex;
      justify-content: center;
    }

     .mobile_galleries { display: block; }
    .scrollable_warp { display: none; }
    #image_wrap { display: none; }
    .count { display: none; }

    .index_page header .sub li a {
      padding-bottom: 10px;
    }

    header .sub li.active a {
      border-top: 0;
    }

    .fancybox__footer, .fancybox__footer * { max-width: unset; }

}

/* Mobile Gallery Overlay */
.mobile_gallery {
    position: relative;
    margin-bottom: 20px;
}

.mobile_gallery img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
}

.mobile_gallery::after {
    content: '';
    background: url('/img/magnifying-glass.png') no-repeat center center;
    background-size: 40px 40px; /* Adjust size as needed */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; /* Same as background-size */
    height: 40px; /* Same as background-size */
    pointer-events: none; /* Ensure the icon does not interfere with clicks */
    z-index: 1;
}
.