html, body {scroll-behavior: smooth;-webkit-font-smoothing: subpixel-antialiased; font-smoothing: subpixel-antialiased; -webkit-text-size-adjust: none; text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;}
body {font-family: 'Overpass', sans-serif; Color: #0b2f17; background: #fff; padding: 0; margin-left: auto; margin-right: auto; text-align:center;}

/*  ********** header *********** */
#skip a {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; color: #fff; background: #000;} 
#skip a:focus {position:absolute; left:20px; top:5px; width:auto; height:auto; color: #fff; background: #000;}
header {background: #b92811 url(../img/redbg.png); margin-left: auto; margin-right: auto; text-align: center;}

/*  ********** top menu *********** */
#logo {display:block; position: relative;  margin-left: auto; margin-right: auto; max-width: 100%; height: auto;  z-index: 100; padding: 15px; 0 10px;}
#menu {display: inline-block; text-align: center; margin: auto; height: auto; max-width: 100%; padding: 0; position:relative; z-index:2000; padding-bottom: 0px;}
@media screen and (max-width: 1000px) {
#menu {display: inline; max-width: 100%; margin-left:0; margin-right: 0;}}
.hdrimage {display: block; top: 0px; left: 0px; z-index: 3000; float: left; position: absolute; max-width: 230px;}
* {
  box-sizing: border-box; margin: 0; padding: 0; }
  *:focus {
    outline: 2px dotted #000;
    outline-offset: -2px;
    box-shadow: 0 0 2px 0 inset #fff; }
    *:focus:not(:focus-visible) {
      outline: none;
      box-shadow: none; }
.lead { font-size: 24px; font-weight: 300; }
nav {font-family: 'Francois One', sans-serif; font-variant: small-caps; font-weight: 500; font-size: 1.6em; text-align:center;}
  nav > button {
    display: none;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 0;
    background: #b92811 url(../img/redbg.png);
    color: #fff;
    font-size: 2.0rem; padding-top: 10px; padding-bottom: 10px; padding-right: 20px;}
  nav ul {text-align:center; 
    display: none;
    margin: 0;
   padding:0;
    background: #b92811 url(../img/redbg.png);
    color: #fff;
    list-style: none; }
    nav ul.show {
      display: grid;
      grid-auto-flow: row;
      grid-auto-rows: max-content; }
  nav a {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: justify;
     padding: 1.15rem .20rem;
    transition: background-color 150ms ease-in-out;
    color: #fff;
    text-decoration: none; }
    nav a:hover {border: 1px solid red; 
      background-color: #fff;
      color: #b92811; }
 nav li {text-align: center; width: 220px;}
@media screen and (max-width: 1200px) {
nav li {width: 100%; font-size:100%; }}
  nav li.dropdown {padding-top:0; 
    position: relative; }
    nav li.dropdown > a::after {
      content: "▼";
      display: block;
      margin-left: 0.5rem;
      transition: transform 250ms linear;
      font-size: 0.8em; padding-top: 5px;}
    nav li.dropdown > a[aria-expanded="true"]::after {
      transform: rotate(-180deg); }
    nav li.dropdown ul a {line-height: 1;
      padding-left: .95rem;}
    nav li.dropdown ul li.dropdown ul a {
      padding-left: 1.2rem;}
@media screen and (min-width: 1080px) {
 nav button {
    display: none; }
  nav > ul,
  nav > ul.show {
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: column; }
  nav .dropdown ul.show {
    position: absolute; }
  nav .dropdown ul ul {
    top: 0;
    left: 100%; }}

/*  ********** titles *********** */
h1 {font-family: 'Cardo', serif; font-size: 2vw; font-weight: normal; color: #fff; text-align: center; line-height: normal;  text-shadow: 3px 2px 2px rgba(0,0,0, 0.1); background: #b92811 url(../img/redbg.png); padding: 0;}
@media screen and (max-width: 700px) {
  h1 {font-size: 7vw;}
}
h2 {font-family: 'Francois One', serif; font-size: 1.8vw; font-weight: 500; color: #1E5E33; text-align: center; line-height: 1.1; padding: 15px 5px;}
@media screen and (max-width: 700px) {
  h2 {font-size: 7vw;}}
h3 {font-family: 'Cardo', serif; font-size: 1.4vw; font-weight: 600; color: #b92811; text-align: center; line-height: 1.1; padding: 25px 5px;}
@media screen and (max-width: 700px) {
  h3 {font-size: 7vw;}}

/*  ********** front pics *********** */
.pics {margin-right: 10px; margin-bottom: 25px; text-align: center; display:inline-block; font-family: 'Open Sans', sans-serif; font-weight: 500;  font-size :.09em; color:#236303;}
@media screen and (max-width: 400px) {
   .pics {margin-right: 0;}
}
.picbdy {display:inline-block; overflow: hidden; width:99%;  height: auto: padding: 25px; text-align: center; margin: auto; font-family: arial, verdana, sans-serif; font-size: 1em; font-weight: normal; color: #0b2f17;}
.tooltip{font-family:arial, helvetica, sans-serif; font-size:0.80em;}
a.tooltip:hover {background:#fff;text-decoration:none;}
a.tooltip span {display:none; padding: 2px 4px 2px 2px; margin-top:165px; margin-left:0px; margin-right: 10px; width:200px;}
a.tooltip:hover span{display:inline; position:absolute; background:#fff; color:#236303; z-index:1;}
.lrgpics {display: inline-block; margin: 0 30px 20px; padding; 20px; text-align: center;}
@media screen and (max-width: 700px) {
  .lrgpics {max-width: 100%; min-width: 98%; margin-left:0}
}

/*  ********** wraps *********** */
#wrapfront {max-width: 100%;  margin: auto; text-align: center; min-width: 98%; margin-left:0}
#wrapfront a, #wrapfront a:visited {color:#b92811; background:transparent; text-decoration:underline;}
#wrapfront a:hover {color:#fff; background:#b92811; text-decoration:underline; cursor: pointer;}
#wrapevents {width: 100%;  min-width: 98%; margin: auto; text-align: center; display: inline-block;}
#wrapevents a, #wrapevents a:visited {color:#b92811; background:transparent; text-decoration:underline;}
#wrapevents a:hover {color:#fff; background:#b92811; text-decoration:underline; cursor: pointer;}

/*  ********** front page *********** */

#heroimage {display:block; position: relative;  margin-left: auto; margin-right: auto; max-width: 100%; height: auto;  z-index: 100; padding: 0;}
#heroimagealt {display:block; position: relative;  margin-left: auto; margin-right: auto; max-width: 100%; height: auto;  z-index: 100; padding: 10px;}
.news {width: 100%; height: auto; padding:20px 20px; font-family: 'Overpass', sans-serif; font-size: 1em; font-weight: normal; color: #0b2f17; text-align: center; line-height: normal; margin: auto;}
.news a:link, visited {color:#b92811; background:transparent; text-decoration:underline;}
.news a:hover {color:#fff; background:#b92811; text-decoration:none; cursor: pointer; font-style: normal}
@media screen and (max-width: 700px) {
  .news {max-width: 100%; text-align: center; min-width: 98%; margin:0; padding:5px 5px;}
}
.newstuff {width: 100%; overflow: hidden; height: auto: text-align: center; margin: auto; font-family: 'Overpass', sans-serif; font-size: 1em; font-weight: normal; color: #432415;}
.imgset {border: 0; max-height:auto; max-width: 100%;}
.imgbl {border: 0; max-height:auto; max-width: 100%; display:block; text-align: center; margin: auto;}
.vdivider {padding: 40px; text-align: center; margin: auto;}
@media all and (max-width:1024px) {
    .vdivider {padding: 20px 0;}
}
.textnbg {max-width:90%; padding:0px 20px;  font-size: 1.2em; font-weight: normal; color: #000; text-align: left; line-height: 1.2; margin: auto;}
@media all and (max-width:1024px) {
    .textnbg {max-width: 96%;}
}
.imgbloc {display: block; max-width: 100%; max-height: auto; border: 0;}
.imgshad {display: block; border: 0; max-width: 100%; max-height: auto; margin: auto; text-align: center; border: 4px solid #b92811;}
.clearfix {clear: both;}

/*  ********** slide *********** */
#slideone {position: relative;
  margin-left: auto; margin-right: auto; text-align: center; padding:35px 15px 25px 0;}
.rslides {
position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;}

.rslides li:first-child {position: relative;
  display: block;}

.rslides img {
display: block;
  height: auto; width: 100%;
  border: 4px solid #b92811;}
@media screen and (max-width: 400px) {   #slide {float: none;    margin-left:-1%; min-width: 95%}}

/*  ********** interior *********** */
.frm {border: 4px solid #b92811; max-height:auto; max-width: 100%;}
.floatl {float: left; width: auto; height: auto; padding-right: 20px; padding-bottom: 20px;}
@media screen and (max-width: 400px) {
.floatl {float: none; text-align: center; margin: auto; padding;right: 0;}}
.bdyint {display: inline-block; width: 90%; padding:25px 50px; text-align: center; margin: auto;}
@media screen and (max-width: 1200px) {
   .bdyint {width:98%; padding:25px 5px; }
}
.bdytext {width: 80%; padding:25px 50px; text-align: center; margin: auto;}
@media all and (max-width:1400px) {
    .bdytext{width: 98%; padding:25px 10px; text-align: justify; margin: auto;}}
.bdytext ul {margin-top: 5px; list-style-type: none; padding: 0; type: none; text-align: left;}
.bdytext ul li {font-weight: 600; list-style-type: none; padding-right: 5px; padding-top: 5px; text-align: left;}
.bdytext ul li a {text-decoration: none; border: none}
.bdytext ul li a:hover {text-decoration: none; border: none}
.evntxtcent {font-family: 'Overpass', sans-serif; font-size: 1.3em; font-weight: 500; color: #152810; line-height: 1.1em; padding: 5px 5px; text-align: center; margin: auto;}
@media all and (max-width:1050px) {
    .evntxtcent{width: 96%; padding:25px 10px; text-align: justify; margin: auto;}}
.evntext {width: 40%; padding:25px 25px; text-align: center; margin: auto; display: inline-block; vertical-align: top}
@media all and (max-width:1050px) {
    .evntext{width: 98%; padding:25px 10px; text-align: center; margin: auto;}}
.evntext ul {margin-top: 10px; padding: 0; type: none; text-align: left;}
.evntext ul li {font-family: 'Overpass', sans-serif; font-weight: 500; font-size: 1.2em; color:#b92811; line-height: 1.1em; list-style-type: none; padding-right: 5px; padding-top: 5px; text-align: left;}
.calendar {width: 70%; padding:15px 15px; text-align: center; margin: auto; display: block;}
@media all and (max-width:1050px) {
    .calendar{width: 98%; padding:25px 10px; text-align: center; margin: auto;}}
.evntextgr {width: 40%; padding:25px 25px; text-align: center; margin: auto; display: inline-block; vertical-align: top}
@media all and (max-width:1050px) {
    .evntextgr{width: 98%; padding:25px 10px; text-align: center; margin: auto;}}
.evntextgr ul {margin-top: 10px; padding: 0; type: none; text-align: left;}
.evntextgr ul li {font-family: 'Overpass', sans-serif; font-weight: 500; font-size: 1.2em; color:#1E5E33; line-height: 1.1em; list-style-type: none; padding-right: 5px; padding-top: 5px; text-align: left;}
.grntxt {font-family: 'Overpass', sans-serif; font-size: 1.2em; font-weight: 500; color: #152810; line-height: 1.1em; padding: 0 20px 20px; text-align: left; clear: both}
.grntxt a:link, visited {text-decoration: none; color: #be6f0c;}
.grntxt a:hover {text-decoration: none; color: #717a5e; cursor: pointer;}
@media all and (max-width:1050px) {
    .grntxt{text-align:left; padding:10px; }}
.leftcol {position:relative; display:inline-block; padding:25px 50px; text-align: center; width:40%; vertical-align: middle;}
@media screen and (max-width: 1480px) {
   .leftcol {width:98%; padding:10px 5px; }
}
.leftcolnarow {position:relative; display:inline-block; padding:25px 50px; text-align: center; width:30%; vertical-align: middle;}
@media screen and (max-width: 1200px) {
   .leftcolnarow {width:98%; padding:10px 5px; }
}
.lftcont {position: relative; margin-left: auto; margin-right: auto; text-align: center; padding:0 15px 0;}
.hdr   {position: relative; text-align: left; padding:0 15px 0;}
.rtcol {position:relative; display:inline-block; padding:25px 30px; width:60%;  text-align: center; margin: auto; vertical-align: middle;}
@media screen and (max-width: 1200px) {
   .rtcol {width:98%; padding:25px 0; }
}
.rtcolwide {position:relative; display:inline-block; padding:25px 50px; width:60%;  text-align: center; margin: auto; vertical-align: middle;}
@media screen and (max-width: 1200px) {
   .rtcolwide {width:98%; padding:25px 0; }
}
p {padding-bottom: 10px;}
input[type=text] {width: 95%; height: 40px; line-height: 40px;}
textarea {width: 95%; height: auto; line-height: 40px;}
.formfrnt {font-family: 'Overpass', sans-serif; font-size: 14px; font-weight: normal; color:#152810; border: 1px solid #b92811; padding-bottom: 2px; padding-top: 2px; padding-right: 3px; padding-left: 3px; background: #fff;}
.treesec {max-width: 75%; margin: auto; text-align: center; padding: 0 0 25px;}
.treebl {height: auto; max-width: 400px; display: inline-block; text-align: left; padding: 2% 2%;  vertical-align: top}
.shopfrm {font-family: arial, verdana; font-size: 90%; font-weight: bold; color:#b92811; border: 1px solid #b92811; padding-bottom: 2px; padding-top: 2px; padding-right: 4px; padding-left: 4px; background: #fff;}
.cart {text-align: left; margin-top: 10px;}
@media screen and (max-width: 400px) {.cart {min-width: 90%; margin-top: 3%; padding-bottom: 4%; max-width: 95%;}}

/*  ********** footer *********** */
footer {width: 100%; background: #1E5E33 url(../img/greenbg.png); text-align:center; margin:0px auto; padding:35px 5px 10px;}
footer a, footer a:visited {color:#fff; background:transparent; text-decoration:underline;}
footer a:hover {color:#fff; background:#b92811; text-decoration:underline; cursor: pointer;}
.navcol {background: transparent; display:inline-block; margin-right: 40px; margin-top; 20px; max-width: 45%; text-align:center; vertical-align: top;}
@media screen and (max-width: 1129px) {
.navcol {text-align:left; display: block; max-width: 98%; margin: 20px 10px 20px 5px;}
}
.bot ul {display: inline; text-align:left padding-bottom: 10px;  vertical-align: top;}
@media screen and (max-width: 1090px) {
.bot ul {max-width: 98%; margin-bottom: 20px; padding-right: 20px; text-align: left;}
}
.bot li {display: block; margin-bottom: 5px; list-style-type:none; font: 600 100% 'Open Sans', sans-serif; color:#fff; text-align: left;line-height: 1.3;}
@media screen and (max-width: 1090px) {
.bot li {max-width: 98%; margin-bottom: 5px; padding-right: 20px; text-align: left;}
}
.botpic li {display: block; margin-bottom: 10px; list-style-type:none; font: 600 100% 'Open Sans', sans-serif; color:#fff; text-align: left;line-height: 1.3;}
@media screen and (max-width: 1090px) {
.botpic li {max-width: 98%; margin-bottom: 5px; padding-right: 20px; text-align: left;}
}
#botinfo {text-align:center; margin: auto; max-width: 100% padding: 20px 20px;}
#botinfo a, #botinfo a:visited {color:#fff; background:transparent; text-decoration:underline;}
#botinfo a:hover {color:#fff; background:#b92811; text-decoration:underline; cursor: pointer;}
#close {padding:0px 0px; margin:10px auto; font-family: 'Overpass', sans-serif; font-size:65%; font-weight: normal; color: #fff; line-height: normal; text-align: center;}
#close a, #close a:visited {color:#fff; background:transparent; text-decoration:underline;}
#close a:hover {color:#fff; background:#b92811; text-decoration:underline; cursor: pointer;}
#myBtn {display: none; position: fixed; bottom: 20px; right: 10px; z-index: 99; font-size: 18px; border: 2px solid #b92811; outline: none; background-color: red; color: white; cursor: pointer; padding: 6px; border-radius: 4px;}
#myBtn:hover {background-color: #1f6436; color: #b92811; border: 2px solid #b92811;}
.gowrap {border: 0; position: relative; overflow: auto; width:100%;  height: 100%; margin: 0; text-align: center; background: #b92811 url(../img/redbg.png);}
#frame {border: 0; width: 100%; height: 300px;}
#view {position: fixed; right: 0; top: 50%; z-index: 200}