body,html{
margin: 0;
padding:0;
height: 100%;
color: saddlebrown;
}


button:focus,
button:hover,
input:focus,
input:hover {
  outline: 2px solid black;
}

.hidden
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}

.fullpage{
height: 100%;
display: flex;
}

#cycle{
  margin: 0;
 
  width: 100%;
  z-index: 1;
  overflow: hidden;

}

.footer{

position: absolute;
bottom: 0;
background-color: white;
background-color: rgba(139,69,19, 0.6);
z-index: 100;
width: 100%;
}
.footerline{
padding: 6px 0px 6px 0px;
display: flex;
flex-direction: row;
background-color: white;
}
.footerleft{
margin-left: 10px;

}

.footerright{
white-space:nowrap;
margin: 0;
padding-right: 10px;
position: absolute;
right: 10px;
}

.footerright li{
display: inline;
}

.footernews{
width: 100%;
text-align: center;
 background-color: rgba(77,0,0,.7);
color: white;
padding-top: 2px;
padding-bottom: 2px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
letter-spacing: 1px;
}

.footernews a{
color: white;
}

.socialicons{
  vertical-align: middle;
  margin-left: 10px;
}


a, a:link, a:visited, a:hover, a:active {
  color: white !important;
  text-decoration: none;
}

a {
text-decoration: none;
}



@media screen and (min-width: 800px) {

.sm{
display: none;
}

.menu_button{
display: none;
}

box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;


}

.box-content {
    background-color: rgba(77,0,0,.7);
    color: #fff;
    padding-top: 10px;
    padding-bottom: 17px;
height: 5em;
color: white;
font-weight: bold;
font-size: 14px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
letter-spacing: 1px;
line-height: 1.8em;
}

.brownbox{
max-width: 450px;
width: 100%;
background-color: rgba(139,69,19, 0.6);
position: absolute;
top: 40px;
left: 90px;
z-index: 10;
text-align: center;
line-height: 1;
}

.wlogo{
       max-width: 350px; 
       height: auto;
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       margin-top: 25px;
       margin-bottom: 25px;
}


#homemenulg ul{
list-style-type: none;
margin: 0;
margin-left: -30px;
display: inline-block;
}

#homemenulg li{
display: inline;
padding-right: 13px;
color: white;
font-size: 14px;
}

#homemenulg a {
color: white;
}



}




@media screen and (max-width: 799px) {

.body{
text-align: center;
}
 

.footerleft{
width: 100%;
text-align: center;
}

.footerright{
display: none;
}

.lg{
display: none;
}

#cycle{
top: 160px;
height: calc(100% - 160px);
}

.mobileheader{
position: absolute;
top:0;
text-align: center;
width: 100%;
}

.logo{
margin-top: 5px;
width: 200px;
height: auto;
}

}




body,html{
   font-family: "Averia Libre", system-ui;
  font-weight: 700;

}

.covid{
display: block;
 width: 100%;
 padding: 4px;
 background-color: black;
 color: white;
 position: absolute;
 bottom: 32px;
 text-align: center;
 font-size: 26px;
 font-family: arial,helvetica,sans-serif;
 margin-right: auto;
 margin-left: auto;
}

.showmobile{
display: none;
}
.showpc{
display: inline-block;
}

.winespectator{
width: 150px;
height: auto;
position: absolute;
top: 30px;
right: 30px;
z-index: 10;
}

.c7-personalization a{
text-decoration: underline;
}


@media screen and (max-width: 800px) {

.showmobile{
display: inline-block;
}
.showpc{
display: none;
}


.footerline,.footerleft{
text-align: center;
width: 100%;
}

.winespectator{
width: 80px;
height: auto;
position: absolute;
top: 170px;
right: 6px;
z-index: 10;
}

}






  /* Flex container */

  .foldseparator{
    background-color: rgba(130,76,76);
    height: 30px;
    width: 100%;
   }


  .belowfoldcontainer {
    display: flex;
    flex-wrap: wrap;
    gap: 2px; /* White gap between items */
    background-color: white; /* Shows the gap color */
    cmargin-top: 2px;
  }

  /* Card styles */
  .card {
    position: relative;
    flex: 1 1 calc(50% - 2px); /* 2 across layout */
    height: 600px;
    overflow: hidden;
  }

  .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #about{
     object-position: 30% 0%; /* slightly right, favor bottom; also use things like top center bottom left right */
  }
  #wines{
     object-position: 20% center;  /first is horiz pos. from left
     
  }

  #visit{
     object-position: center right;
  }

 #club{
     object-position: 40% center;
  }



  /* Overlay button */
  .overlay-button {
    position: absolute;
    xtop: 50%;
    xleft: 50%;
    bottom: 30px;
    right: 5px;;
    transform: translate(-50%, -50%);
    padding: 8px 16px;
    background-color: rgba(0,0,0,.7);
    color: white;
    border: none;
 border: 1px solid silver;
  border-radius: 20px 20px;
 min-width: 150px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.3s;
    padding: 20px;
    font-size: 18px;
    font-family: "Averia Libre", system-ui;
    font-weight: 700;

  }
  
  .overlay-button:hover {
    opacity: 1;
  }

  /* Bottom black bar */
  .bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: saddlebrown;
    background-color: black;
    color: white;
    padding: 6px 10px;
    font-size: 14px;
    text-align: center;
    font-family: "Averia Libre", system-ui;
  font-weight: 700;
  font-style: normal;
  }

  footer{
  padding: 30px; 
  background-color: saddlebrown;
  width: 100%;
  color: white;
}

  .footernews{
  text-align: center;
  background-color: saddlebrown;
   font-family: "Averia Libre", system-ui;
  font-weight: 700;

}




.footercontainer {
  display: flex;
  flex-wrap: wrap; /* allows stacking */
  width: 100%;
  margin: 0;
}

.left {
  order: `; /* Last when wrapping */
  flex: 1 1 200px; /* can shrink and wrap */
}

.center {
  order: 1; /* Always first when wrapping */
  flex: 1 1 200px;
}

.right {
  order: 3; /* Second when wrapping */
  flex: 1 1 200px;
}



.left,.right,.center{
text-align: center;
width: 33.33%;
font-size: 16px;
}

a:visited{
color: white;
}

.center a{
color: white;
}

.center a:visited, .tel{
color: white;
}


.footerlinks {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center; /* optional, for centering the list */
}

.footerlinks li {
  display: inline-block;
  padding: 0 10px; /* spacing between items */
}




  /* Stack into single column on narrower screens */
  @media (max-width: 600px) {
    .card {
      flex: 1 1 100%;
    }
.left {
  order: 3;
  flex-shrink: 1; /* Shrinks first */
  min-width: 0;
 margin-bottom: 10px;

}
.center {
  order: 1;
  flex-shrink: 0; /* Does not shrink */
  margin-bottom: 10px;
}



.right {
  order: 2;
  flex-shrink: 1; /* Shrinks after left */
  min-width: 0;
margin-bottom: 10px;

}

  }