html, body {-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: 'Open Sans', sans-serif; Color: #000; background: #fff; padding: 0; margin-left: auto; margin-right: auto; text-align:center;}

/*  ********** header *********** */
.seek {padding:20px 0;  max-width: auto}
.searchform {float:right; height: auto; width: auto; padding-top: 15px} 
.logo {max-width: 100%; height: auto; margin: auto; text-align:center; z-index: 100; padding: 40px; 0;}
.hdrimg {max-width: 100%; height: auto; margin: auto; text-align:center; z-index: 100; padding-bottom: 20px}
#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;}
main {padding: 0; margin: 0}
header {background-color: #f6f9f4; margin-left: auto; margin-right: auto; text-align: center;}

/*  ********** top menu *********** */
#menu {display: inline-block; text-align: center; margin: auto; background: #f6f9f4; max-width: 100%; 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;}}

* {
  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: 'Open Sans', sans-serif; font-variant: small-caps; font-weight: 600; font-size: 1.2em;
  background-color: #f6f9f4;
  color: #354636; }
  nav > button {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 0;
    background-color: #f6f9f4;
    color: #354636;
    font-size: 2.5rem; }
  nav ul {
    display: none;
    margin: 0;
    padding: 0;
    background-color: #f6f9f4;
    color: #354636;
    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: left;
     padding: 0.75rem .50rem;
    transition: background-color 150ms ease-in-out;
    color: #354636;
    text-decoration: none; }
    nav a:hover {
      background-color: #36550e;
      color: #fff; }
 nav li {text-align: left; width: 220px;}
@media screen and (max-width: 1300px) {
nav li {width: 100%;  font-size:100%;}}
  nav li.dropdown {padding: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: 1.25rem; }
    nav li.dropdown ul li.dropdown ul a {
      padding-left: 1.375rem; }

@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: 'Cinzel Decorative', cursive; font-size: 3vw; font-weight: normal; color: #432415; background: url(../images/vinecrnr.png) no-repeat left top; text-align: left; padding: 10px; line-height: normal;}
@media screen and (max-width: 700px) {
  h1 {font-size: 7vw;}
}
h2 {font-family: 'Cinzel', serif; font-size: 1.8vw; font-weight: normal; color: #354636; text-align: center; line-height: 1.1; padding: 25px 5px;}
@media screen and (max-width: 700px) {
  h2 {font-size: 7vw;}}
h3 {font-family: 'Cinzel', serif; font-size: 1.5vw; font-weight: 600; color: #4b6b1e; text-align: left; line-height: 1.1; padding: 25px 5px;}
@media screen and (max-width: 700px) {
  h3 {font-size: 7vw;}}

/*  ********** front pics *********** */
.pics {margin-left: 5px; padding-right: 20px; padding-left: 20px; 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: 700px) {
   .pics {padding-right: 5px; padding-left: 5px; margin-left: auto; margin-right: auto; width: auto; display: block;}}
.picbdy {display:inline-block; overflow: hidden; width:100%;  height: auto: padding: 15px; text-align: center; margin: auto; font-family: arial, verdana, sans-serif; font-size: 1em; font-weight: normal; color: #432415;}
.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-left:5px; margin-right: 5px; padding; 10px; margin-bottom: 20px; text-align: center;}
@media screen and (max-width: 700px) {
  .lrgpics {max-width: 100%; min-width: 98%; margin-left:0}
}
.smpics {margin-left: 5px; padding-right: 10px; padding-left: 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: 650px) {
   .smpics {margin-left: auto; margin-right: auto; width: auto; padding-right: 3px; padding-left: 3px; }}
.feat_txt {display:inline-block; width: 98%; height: auto; font-size: 1rem; font-weight: 500; line-height: 1em; text-align: center; color: #043103; vertical-align: top;}
@media screen and (max-width: 850px) {
   .feat_txt {text-align:center; display: block;}}

/*  ********** wraps *********** */
#wrapfront {width: 100%;  margin: auto; text-align: center; padding: 0;}
#wrapfront a, #wrapfront a:visited {color:#A27960; background:transparent; text-decoration:underline; font-weight: 600;}
#wrapfront a:hover {color:#41A354; background:transparent; text-decoration:underline; cursor: pointer; font-weight: 600;}


/*  ********** front page *********** */

 .frntblurb {text-align:left; color: #5e7425; padding: 15px 70px; display: block; font-size: 1.2em;}
@media (max-width: 850px) {
  .frntblurb {padding: 5px 15px;}}

 .mobile {display: none;}
@media (max-width: 650px) {
  .mobile {color: #5e7425; padding: 5px 5px; display: block;}}
.news {background-color: #f6f9f4; width: 100%; height: auto; padding:35px 20px 5px; font-family: arial, verdana, sans-serif; font-size: 1em; font-weight: normal; color: #000; text-align: center; line-height: normal; margin-left: auto; margin-right: auto; margin-bottom: 35px;}
.news a:link, visited {color:#A27960; background:transparent; text-decoration:underline;}
.news a:hover {color:#41A354; background:transparent; 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: arial, verdana, sans-serif; font-size: 1em; font-weight: normal; color: #432415;}
.img {border: 0; max-width: 100%; max-height:auto;}
.imgset { display:block; border: 0; max-height:auto; max-width: 100%; border-radius: 20px;}
.imgbl {border: 0; max-height:auto; max-width: 100%; display:block; border-radius: 0}
.vdivider {padding: 20px; text-align: center; margin: auto;}
@media screen and (max-width: 588px) {
  .vdivider {display: none;}
}

/*  ********** footer *********** */
footer {width: 100%; background-image: linear-gradient(#fff, #f6f9f4); text-align:center; margin:0px auto; padding:10px 10px;}
footer a, #close a:visited {color:#354636; background:transparent; text-decoration:underline;}
footer a:hover {color:#fff; background:#354636; text-decoration:underline; cursor: pointer;}
.navcol {background: transparent; display:inline-block; margin-right: 40px; margin-top; 20px; max-width: 40%; text-align:center; vertical-align: top;}
@media screen and (max-width: 500px) {
.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: 500px) {
.bot ul {max-width: 98%; margin-bottom: 20px; padding-right: 20px; text-align: left;}
}
.bot li {display: block; margin-left: 0px; list-style-type:none; font: 600 100% 'Open Sans', sans-serif; color:#354636; text-align: left;line-height: 1.3;}
@media screen and (max-width: 500px) {
.bot li {}
}
#botinfo {text-align:center; margin: auto; max-width: 100% padding: 20px 20px;}
#close {padding:0px 0px; margin:10px auto; font-family: 'Open Sans', sans-serif; font-size:85%; font-weight: normal; color: #354636; line-height: normal; text-align: center;}
#anchor {padding:25px 0px;}
#toTop {
display:none;
 text-decoration:none;
 position:fixed;
 bottom:10px;
 right:10px;
 overflow:hidden;
 width:64px;
height:31px;
 border:none;
 text-indent:100%;
 background:url(../images/arrow_top.png) no-repeat left top;
}
#toTopHover {
background:url(../images/arrow_top.png) no-repeat left -162px;
 width:64px; height:31px;
 display:block;
 overflow:hidden;
 float:left;
 opacity: 0;
 -moz-opacity: 0;
 filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}
#cart {position: fixed; right: 0; top: 40%; z-index: 500}
.ctooltip{font-family: 'Open Sans', sans-serif; font-size:0.80em;}
a.ctooltip:hover {background:#CFD6BF;text-decoration:none;}
a.ctooltip span {display:none; padding:4px 4px 4px 4px; right:65px;  width:110px;}
a.ctooltip:hover span{display:inline; position:absolute; background:#CFD6BF; color:#236303; border-color: #236303; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;z-index:1;}
.dbh {margin-top: 20px; text-align: center: display: block;}
.dbh a:link, visited {color:#fff; background:transparent; text-decoration:none;}
a.dbh:hover {background:transparent;text-decoration:none;}





