html{
     
     --logo-header-wrapper-height: 205px;
     --logo_header-wrapper-margin-top: 0px;
     --logo_header-margin-bottom: 0px;
     --logo-header-wrapper-min-height: 205px;
     
     --total-logo-header-wrapper-height: calc(var(--logo-header-wrapper-height) + var( --logo_header-wrapper-margin-top) + var(--logo_header-margin-bottom));
     
     --site-menu-height:80px;
     --site-menu-margin-top: 0px;
     --site-menu-margin-bottom: 0px;
     
     --total-site-menu-height:calc(var(--site-menu-height) + var(--site-menu-margin-top) + var(--site-menu-margin-bottom))  ;
     
     --logo-bar-height: 140px;
     --navigation-topmenu-height: 55px;
     
     --footer-wrapper-height: 80px;
     --footer-wrapper-margin-top: 50px;
     --footer-wrapper-padding-top: 30px;
     
     /* calculate for remaining height to be used for height of #feature */
     --feature-wrapper-height-reducer: calc(var(--logo-bar-height) + 
                                            var(--navigation-topmenu-height) + 
                                            var(--footer-wrapper-height) + 
                                            var(--footer-wrapper-margin-top) + 
                                            var(--footer-wrapper-padding-top)
                                           );    
 }    
 
  
 #logo.header-wrapper{
                      box-sizing: border-box;
                      height: var(--logo-header-wrapper-height);
                      margin-top: var(--logo_header-wrapper-margin-top);
                      margin-bottom: var(--logo_header-margin-bottom);
                      min-height: var(--logo-header-wrapper-min-height);
                     }
 
 .site-menu{
            box-sizing: border-box;
            height:var(--site-menu-height);
            margin-top:var(--site-menu-margin-top);
            margin-bottom:var(--site-menu-margin-bottom);
           }
          
  /*******set the page position for content to start beneath banners and menus **************/
  #head-height{height: calc( var(--total-logo-header-wrapper-height) + var(--total-site-menu-height) );}
  
  /* option for sticky header 
  #head-height{position: sticky; top: 0;} 
  */
  
  header {}     /* contained in #head-height */

  #logo{
   min-width:150px;
   background-position: left;
   background-image:url('/assets/img/logoimage_edited.webp');
   background-repeat: no-repeat;
   background-position: left 20px top 10px;    
   z-index:999;
  }

  .head_newsletter{
   font-family: var(--nav-menu-fonts);
   font-size:1em; 
   padding: 4px 2vw; 
   float: right;
  }

            
  /*content */
  /*#feature{min-height: calc(100vh - var(--feature-wrapper-height-reducer));} /* height pushes down footer */
  
  /*overrided on page for background images */
  /*#feature-art{height: 100%;} /* fill the #feature block to take up calculated space*/
  
  
  /*footer*/ 
  /* top position controlled by #feature height*/
  #footerwrapper{ height: var(--footer-wrapper-height);
                  margin-top: var(--footer-wrapper-margin-top); 
                  padding-top: var(--footer-wrapper-padding-top);
                }