/* ---------- PAGE LAYOUT ---------- */

body{
height: 100%;
margin:0;
display:flex;
flex-direction:column;
min-height:100vh;
font-family:Calibri;
}

/* ---------- PRINT LAYOUT ---------- */
@media print {

  .header,
  .footer {
    display: none !important;
  }

  /* optional: remove background video in print */
  #bg-video {
    display: none !important;
  }

  /* optional: make main content full width when printing */
  .main-content {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    overflow: visible !important;
  }

  body {
    background: white !important;
  }
}

/* ---------- Main content LAYOUT ---------- */
/* Middle area (shows video) */
.main-content {
  position: absolute;
  top: 90px;   /* height of header */
  bottom: 70px; /* height of footer */
  left: 10px;
  right: 10px;
  padding: 10px
  overflow-y: auto;
  overflow-x: hidden;
}

body {
overflow-x: hidden;
}

table {
  max-width: 100%;
}

/* ---------- Text styling ---------- */
td {
    font-size: clamp(14px, 2vw, 18px);
    font-family: Calibri
  }
td.medium {
    font-size: clamp(16px, 2vw, 28px);
    font-family: Verdana
  }
td.large {
    font-size: clamp(32px, 2vw, 42px);
    font-family: Verdana
  }
p {
  /* Minimum 14px, Scales with 2% of screen width, Maximum 20px */
  font-size: clamp(14px, 2vw, 18px);
  font-family: Calibri
}
h1 {
  /* Minimum 20px, Scales with 2% of screen width, Maximum 30px */
  font-size: clamp(18px, 2vw, 28px);
  font-family: Arial
}
h2 {
  /* Minimum 18px, Scales with 2% of screen width, Maximum 28px */
  font-size: clamp(16px, 2vw, 24px);
  font-family: Arial
}
h3 {
  /* Minimum 16px, Scales with 2% of screen width, Maximum 26px */
  font-size: clamp(14px, 2vw, 20px);
  font-family: Arial
}
ul {
  /* Minimum 16px, Scales with 2% of screen width, Maximum 20px */
  font-size: clamp(14px, 2vw, 18px);
  font-family: Calibri
}
ul.drop {
    font-size: clamp(14px, 2vw, 18px);
    font-family: Verdana		
  } 

/* ---------- Image styling ----------  */
.logoWide {
    height: clamp(20px, 2vw, 40px);
  }
.logoTall {
    height: clamp(60px, 5vw, 120px);
  }
img.photo {
width: 25vw;  /* Always 25% of the viewport width */
  height: auto; /* Keeps the aspect ratio perfect */
  }
.photo-right {
  float: right;
  margin: 20px 0 15px 20px; /* space between image and text */
  width: 25vw;        /* responsive sizing */
  height: auto;
  border: 1px solid #000;
}
.photo-staff {
  float: right;
  margin: 20px 0 15px 20px; /* space between image and text */
  width: 12vw;        /* responsive sizing */
  height: auto;
  border: 1px solid #000;
}

/* ---------- Link styling ---------- */
/* 1. The normal state of the link */
a:link {
  color: blue; /* Deep Sky Blue (or your choice) */
  text-decoration: none;
}

/* 2. Style for visited links (Yellow) */
a:visited {
  color: #4D9FFB;
}

/* 3. Style for when you hover over the link (Red) */
a:hover {
  color: green;
}

/* 4. Style for when the link is being clicked/is active (White) */
a:active {
  color: #00BFFF;
}


/* 1. The normal state of the link */
a:link.dark {
  color: white; /* Deep Sky Blue (or your choice) */
  text-decoration: none;
}

/* 2. Style for visited links (Yellow) */
a:visited.dark {
  color: yellow;
}

/* 3. Style for when you hover over the link (Red) */
a:hover.dark {
  color: red;
}

/* 4. Style for when the link is being clicked/is active (White) */
a:active.dark {
  color: #00BFFF;
}


/* ---------- VIDEO BACKGROUND ---------- */
/* -----------------------------
   VIDEO WRAPPER APPROACH
----------------------------- */

#bg-video {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  object-fit: cover;
  object-position: center;

  z-index: -2;
}

/* -----------------------------
   OVERLAY
----------------------------- */

.video-overlay {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0);
  z-index: -1;
}

/* -----------------------------
   PORTRAIT FIX (IMPORTANT CHANGE)
   DO NOT SCALE VIDEO ON MOBILE
----------------------------- */

@media (orientation: portrait) {
  #bg-video {
    width: 100vw;
    height: 100vh;
    height: 100dvh;

    object-fit: contain;
    object-position: center center;

    transform: none !important; /* 🔥 key fix */
  }
}

/* -----------------------------
   LANDSCAPE MODE
----------------------------- */

@media (orientation: landscape) {
  #bg-video {
    width: 100vw;
    height: 100vh;
    height: 100dvh;

    object-fit: cover;
    transform: none !important;
  }
}

/* ---------- HEADER / FOOTER ---------- */

/* HEADER FIXED */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #2C2B61;
}

/* FOOTER FIXED */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #2C2B61;
}

/* ---------- MENU ---------- */

/*---- CROSS BROWSER DROPDOWN MENU ----*/
ul#nav {
margin: 0 0 0 0px;}
ul.drop a {
display:block; color: #fff; text-decoration: none;}
ul.drop, ul.drop li, ul.drop ul {
list-style: none; margin: 0; padding: 0; border: 0px solid #fff; background: #000; color: #fff;}
ul.drop {
position: relative; z-index: 597; float: left; }
ul.drop li {
float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
ul.drop li.hover, ul.drop li:hover {
position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
ul.drop ul {
visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 155px; /* 245px; */
background: #000; border: 1px solid #fff; }
ul.drop ul li {
float: none; }
ul.drop ul ul {
top: -2px; left: 100%; }
ul.drop li:hover > ul {
visibility: visible }
/* This rule will be applied to hide element on the page */
.hidden { display: none; }
#toggled_0 { height:100px; width:500px; border:1px solid blue; overflow:auto; }