body{
display:flex;
background-color:var(--body-bg-color);
max-width:var(--main-max-width);
margin:0 auto;
flex-direction: column;
min-height: 100vh; /* or 100dvh for modern browsers */
}

.bw-table{
 max-width:900px;
 margin:auto;
}

.bw-table td {height:50px;text-align:center;width:100px;border:2px solid gray; padding: 20px; margin: 20px;}

.bw-table td:hover {border:2px solid #99cc99; padding: 20px; margin: 20px;}

.bw-content-wrapper {
        flex-grow: 1;
    }
    
body,h1,h2,h3,h4,h5,h6{
font-family: var(--main-txt-font);
}

h1,h2,h3,h4,h5,h6{
font-family: var(--masthead-font);
}

.hr{
    width:80%;
    margin:auto;
}

/* new */
/*W3 override buttons for site*/
.bw-forms{
 background-color:var(--form-bg-color); 
 color:var(--main-txt-color);
 width:500px;
 margin:0 auto;
 }    
 
.bw-modal{
 background-color:var(--popup-bg-color);
color:var(--main-txt-color);
 } 
 
.w3-button{
background-color:var(--button-bg-color);
color:var(--button-txt-color);
border-radius:4px;
}

.w3-button:hover{
background-color:var(--button-bg-hover-color) !important;
color:var(--button-txt-color) !important;
 }
 
.bw-footer{
color:var(--footer-color);
background-color:var(--footer-bg-color);

border:var(--border-width) solid red; 
} 
/* main content colors */
.bw-main{ 
background-color:var(--main-bg-color);
color:var(--main-txt-color);
width:100%;
} 
 
 /*masthead parameters*/
.bw-mast{ 
display: flex;
align-items: center; /* Centers vertically */
justify-content: center; /* Centers horizontally (optional) */
color:var(--masthead-color);
font-size:var(--masthead-txt-size);
font-family: var(--masthead-font);
border:var(--border-width) solid blue;
height: var(--masthead-height);
background-color:var(--header-bg-color);
max-width:var(--main-max-width);
}

.bw-menu{
font-family:var(--menu-font);
font-size:var(--menu-txt-size);
color: var(--menu-color);
margin:10px;
    
}
/* menubar colors and typography */
.bw-menuBar{
width:100%;
display:flex;
justify-content:center;
border:0px solid red;
gap:20px;
}

/* LINKS ------------------------------------------------- */

a:link {text-decoration:none;color: var(--link-active-color);}
a:visited {color: var(--link-active-color);}
a:hover {color: var(--link-hover-color);font-size:100%;}
a:active {color: var(--link-active-color);}

.alink a:link {text-decoration: none; color: var(--link-active-color);font-size:100%;z-index: 10;}
.alink a:visited {color: var(--link-active-color);}
.alink a:active {color: var(--link-active-color);}
.alink a:hover {color: var(--link-hover-color);}


/* MASTHEAD ------------------------------------------------- */
.masthead
{
font-size:var(--masthead-txt-size);
font-family: var(--masthead-font);
border:var(--border-width) solid blue;
height: var(--masthead-height);
background-color:var(--header-bg-color);
}


/* -------------------- Fixed header and sub menu -----------------*/
.stick {
        position:fixed;
        top:0;
        z-index:500;
        width:100%;
    }
    
.subMenu{
    display:none;
        position:relative;
        max-width:400px;
        text-align:left;
        margin:10px;
        font-size:200%;
        font-family:var(--menu-font);
        color:var(--menu-color);
        
    }
    
.subMenu ul{
        list-style:none;
    }
    
 .subMenu li{
        margin-top:15px;
    }
    
.stack{
        z-index: 9;
        margin:0;
        /* for demo purpose  */
    }


/* HORIZONTAL RULE ---------------------------------------------*/

hr{
height:1px;
border-width:0;
color:var(--main-txt-color);
background-color:var(--main-txt-color);
margin:0 auto;
}



.bw-gallerybox{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-evenly;
    border:var(--border-width) solid orange;
    width:100%;
}

.bw-gallerybox img{
/*height:var(--gallery-img-height);*/
/*width:var(--gallery-img-height);*/
max-width:20vw;
max-height:20vw;
opacity: 0.8;      
margin:10px;
object-fit:cover;
cursor:pointer;  
}

.bw-gallerybox img:hover{
opacity: 1.0; 
transition: all 0.5s ease;
}


.bw-modalOverlay {
  width: 80vw; 
  height: 80vh;
  top:10vh;
  left:10vw;
  position: fixed;
  z-index: 1;
  background-color: rgba(0.6,0.6,0.6, 0.9);
  transition: 0.5s;
}

.bw-slider {
  position:relative;
  width:75%;
  height:50%;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  overflow-y:hidden;
  border:var(--border-width) solid green; 
  margin: 0 auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.bw-slider::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.bw-slider {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.bw-slide{
    display:none;
    overflow:hidden;
    border:var(--border-width) solid red; 
    margin:20px;
}

.bw-slide img{
    width:100%;
    max-height:400px;
    
    object-fit: contain;
    
}

.bw-slide-container{
    background-color:var(--slide-bg-color);
    color:var(--slide-txt-color);
}
.bw-gCaption{
    font-size:2vh;
}

.bw-alertPanel{
    display:none;
}

.bw-gallerycard
{
    opacity:0.8;
    cursor:pointer; 
}

.bw-gallerycard:hover{   
 opacity:1.0;   
}

.bw-gallerycard img{
 width:150px;
 height:150px;
 object-fit:cover;
 margin:10px;   
}
/* for gallery main page cards */
.bw-flexbox{
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
   
}

.bw-camera{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-evenly; 
    max-width:400px;
    margin:0 auto;
}

.bw-camera img{
    width:64px;
    margin:5px;
    border:1px solid #dddddd;
}
/*media adjustments*/


@media screen and (max-width: 800px) {
  .bw-gallerybox img{
    max-width: 30%;
  }
}

@media screen and (max-width: 600px) {
  .bw-gallerybox img{
    max-width: 50%;
  }
  
  .bw-mast{
      font-size:8vw;
  }
}

@font-face {
  font-family: 'BW_ICON'; /* Choose a name for your font */
  src: url('font/BW_Icon.woff2') format('woff2');
  font-weight: normal; /* Define font weight if applicable */
  font-style: normal; /* Define font style if applicable */
}

.bw_printer::after{
    content:'A';
    font-style: normal;
}

.bw-menuFont{
  font-family:BW_ICON;
  font-size:45px;
  
}

/*used for fontawesome*/
.bw-btn{ 
cursor:pointer;
background-color:transparent;
}

.bw-btn:hover{
color:  var(--button-bg-hover-color);  
}