:root
{
  --header-background: RGBA(129,191,188, .4);
  --header-background-dark: RGBA(129, 191, 188, .8);
  --header-text: rgb(100,98,96);
  --header-menuItem-padding: 20px;
  height: 100%;
}

.Page-Header a, .Page-Header .menu-item
{
  text-decoration: none;
  color: var(--header-text);
}

body {
  height: 100%;
}

.main-container
{
  overflow: visible;
  display: flex;
  flex-direction: row;
  height: 100%;
  align-content: center;
}

.Page-Content
{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.Page-Header
{
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--header-background);
  min-height: 150px;
}

.footer
{
  background-color: var(--header-background);
  min-height: 50px;
  font-size: 1.1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer .contactInfoBar
{
  /*position: relative;
  top: 50px;*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px dotted var(--header-text);
  border-bottom: 1px dotted var(--header-text);
}

.footer .contactInfoBar div
{
  padding: 4px 15px;
}

.footer .contactInfoBar a,
.footer .contactInfoBar a:visited,
.footer .contactInfoBar a:link
{
  color: var(--header-text);
}

.SiteTitle
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--header-text);
}

.SiteMenu
{
  margin: 0px 50px 0px 50px;
  display: flex;
}

/*.SiteMenu a
{
  text-decoration: none;
  color: var(--header-text);
}*/

.menu-item > a, .menu-item > .hover-menu-item
{
  padding: var(--header-menuItem-padding);
  font-size: 1.5em;
}

.Header-Photo img
{
  margin: 20px;
  max-height: 200px;
  text-align: center;
  vertical-align: middle;
  display: none;
}

.Spacer-Bar
{
  margin: 0px 5px 0px 50x;
  height: 20px;
  width: 100%;
  background-color: rgba(200,200,200,0);
  display: none;
}

.SiteMenu .menu-item > a:hover, .SiteTitle a:hover, .SiteMenu .menu-item:hover
{
  color: white;
  text-shadow: 1px 1px 3px rgba(100,98,96, .25);
  cursor: pointer;
}

.SiteMenu .menu-item:hover > a, .SiteMenu .menu-item:hover > span 
{
  background-color: var(--header-background-dark);

}

.SiteMenu .menu-item:hover .menu-FlyoutContainer,
.SiteMenu .menu-item-toggled .menu-FlyoutContainer
{
  opacity: 1;
  transform: scale(1,1);
  transition: opacity 100ms ease-out, transform 200ms ease-out;
}

.menu-FlyoutContainer
{
  position: absolute;
  opacity: 0;
  transform: scale(0,0);
  transition: opacity 100ms linear 150ms, transform 250ms ease-out;
  z-index: 3;
}

.menu-Flyout
{
  width: 150%;
  margin-top: 15px;
  position: relative;
  display: flex;
  left: calc(var(--header-menuItem-padding) - 50%);
  background-color: white;
  flex-direction: column;
  box-shadow: -3px 3px 8px rgba(0,0,0,.25);
  border-radius: 5px;
}

.menu-Flyout > a
{
  margin: 0px;
  padding: 0px;
}

.menu-Flyout > a:not(:last-child)
{
  border-bottom: 1px solid rgba(100,100, 100, .2);
}

.menu-Flyout div
{
  padding: 12px 12px 12px 8px;
  text-align: center;
}

.menu-Flyout div:hover
{
  background-color: rgba(0,0,0,.1);
}

.menu-Flyout
{
  font-size: 1.4em;
}

.Page-Body
{
  /*min-height: 800px;*/
  
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.Body-Content
{
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1280px;
  padding: 20px 20px;
  /*min-width: 800px;*/
  font-family: Garamond, "Times New Roman", Calibri, Arial, serif;
  font-size: 1.5em;
}

.Body-Content  h1
{
  text-align: center;
}

/* .Body-Content  h2,
.Body-Content  p
{
  max-width: 1000px;
}  */

.tag
{
  font-size: 2.75em;
  overflow-wrap: normal;
  word-wrap: normal;
}

pictureTable a {
  cursor: pointer;
}