@charset "utf-8";

#HeaderPicture {
  display: none !important;
}

#HeaderSpacer {
  display: none !important;
}

/* ==========================================================================
   1. GLOBAL CONTAINER & HEADER FLOW WITHIN CENTERED-CONTENT
   ========================================================================== */
html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body {
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 1066px !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.centered-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

table.centered-content {
  margin: 0 auto !important;
  max-width: 1066px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  table-layout: fixed !important;
}

.RedBorderTD {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  position: relative !important;
}

header,
.centered-content header {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}

header ul,
header li,
#rColTop,
#rColMid {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  list-style: none !important;
  list-style-type: none !important;
  float: none !important;
  clear: both !important;
}

#nameplate {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
}

/* ==========================================================================
   2. THREE-SECTION HORIZONTAL MASTHEAD (TOP OF HEADER, ABOVE absDiv1)
   ========================================================================== */
#mastheadTop {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 100px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 4px 6px !important;
  position: static !important;
  float: none !important;
}

.mastheadTopLeft {
  flex: 3 1 45% !important;
  width: auto !important;
  max-width: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  padding: 0 5px 0 0 !important;
  margin: 0 !important;
  float: none !important;
}

.mastheadTopLeft img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 85px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
}

.mastheadTopMiddle {
  flex: 2 1 30% !important;
  width: auto !important;
  max-width: 35% !important;
  height: 100px !important;
  min-height: 100px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  padding: 0 5px !important;
  margin: 0 auto !important;
  float: none !important;
}

.mastheadTopMiddle img,
img[src*="Bridge-animation"],
img[src*="BridgeDraw"],
img[src*="bridge-animation"] {
  height: 100px !important;
  max-height: 100px !important;
  min-height: 100px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

.mastheadTopRight {
  flex: 2 1 30% !important;
  width: auto !important;
  max-width: 40% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: right !important;
  box-sizing: border-box !important;
  padding: 0 0 0 5px !important;
  margin: 0 !important;
  float: none !important;
}

.mastheadTopRight p,
#mastheadTop .mastheadTopRight p,
#mastheadTop p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-size: clamp(28px, 3.8vw, 40px) !important;
  line-height: 1.15 !important;
  font-weight: bold !important;
  width: auto !important;
  display: block !important;
  float: none !important;
}

/* ==========================================================================
   3. GLOBAL #absDiv1 (RED STRIP) DIRECTLY BELOW MASTHEAD
   ========================================================================== */
#absDiv1 {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 2.2em !important;
  padding: 6px 0 !important;
  margin: 10px 0 15px 0 !important;
  background-color: #9a3433 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  clear: both !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
  float: none !important;
}

.littleBox {
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 16px !important;
  border: 1px solid #e7d4d4 !important;
  margin: 0 4px !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   4. MENU CONTAINER (ON THE LEFT BELOW absDiv1)
   ========================================================================== */
.menu,
#InsideMenu,
header .menu,
header #InsideMenu,
section.menu {
  position: relative !important;
  float: left !important;
  width: 288px !important;
  min-width: 288px !important;
  max-width: 288px !important;
  margin: 0 0 0 45px !important;
  padding: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  clear: none !important;
  box-sizing: border-box !important;
  z-index: 100 !important;
}

/* Vertical pagetag (to the left of menu, last word aligned with top of menu) */
.pagetag,
.menu .pagetag,
h5.pagetag {
  display: block !important;
  position: absolute !important;
  left: -38px !important;
  top: 320px !important;
  right: auto !important;
  bottom: auto !important;
  width: 320px !important;
  height: 35px !important;
  line-height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  transform: rotate(-90deg) !important;
  transform-origin: 0 0 !important;
  font: 28px/1 Helvetica, Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: bold !important;
  color: #cc9999 !important;
  background: transparent !important;
  letter-spacing: 0.5px !important;
  z-index: 50 !important;
  pointer-events: none !important;
}

/* ProfilePhoto (On top of absDiv1, left-aligned flush with menu) */
header .ProfilePhoto,
.menu .ProfilePhoto,
div.ProfilePhoto,
.ProfilePhoto {
  position: relative !important;
  width: 116px !important;
  height: 116px !important;
  max-width: 116px !important;
  max-height: 116px !important;
  min-width: 116px !important;
  min-height: 116px !important;
  margin: -68px auto 14px 0 !important; /* Left-aligned flush with menu */
  top: auto !important;
  left: 0 !important;
  display: block !important;
  float: none !important;
  box-sizing: border-box !important;
  z-index: 500 !important;
}

header .ProfilePhoto img,
.menu .ProfilePhoto img,
div.ProfilePhoto img,
.ProfilePhoto img,
.ProfilePhoto .RedBorder,
.ProfilePhoto .rotating-item {
  width: 116px !important;
  height: 116px !important;
  max-width: 116px !important;
  max-height: 116px !important;
  min-width: 116px !important;
  min-height: 116px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Menu items reset inside .menu container - flush with left edge of ProfilePhoto */
.MenuChildTop,
.menu .MenuChildTop,
.menu-overlay,
.menu .menu-overlay,
.embededMenu,
.menu .embededMenu,
#InsideMenu,
.menu #InsideMenu,
#middleUL,
.menu #middleUL,
#middleUL li,
.menu #middleUL li,
#mainNav,
.menu #mainNav,
#mainNav ul,
.menu #mainNav ul,
#mainNav li,
.menu #mainNav li,
#left,
#leftDiv,
.card,
.card-header,
.hover-dropdown {
  position: relative !important;
  top: auto !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  float: none !important;
  text-align: left !important;
}

/* ==========================================================================
   5. TITLESECTION (RIGHT SIDE OF MENU, WITHIN CENTERED-CONTENT)
   ========================================================================== */
.TitleSection,
header .TitleSection,
section.TitleSection {
  margin-left: 345px !important;
  margin-top: 0 !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  position: relative !important;
  width: calc(100% - 355px) !important;
  min-width: 0 !important;
  clear: none !important;
  box-sizing: border-box !important;
  float: none !important;
}

.flex-container2 {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin-left: 0px !important;
  clear: both !important;
  box-sizing: border-box !important;
}

.flex-container2 .menu {
  flex: 0 0 288px !important;
  width: 288px !important;
  float: none !important;
  margin: 0 0 0 45px !important;
}

.flex-container2 .TitleSection {
  flex: 1 1 auto !important;
  margin-left: 15px !important;
  width: auto !important;
  float: none !important;
}

/* Desktop Video dimensions */
.TitleVideoOperaHome,
.TitleVideoHome,
.TitleVideo,
.vimeo-responsive-container,
.TitleSection .TitleVideoOperaHome,
.TitleSection .TitleVideo {
  position: relative !important;
  width: 466px !important;
  max-width: 100% !important;
  height: 255px !important;
  max-height: 255px !important;
  margin: 0 auto 15px auto !important;
  background: #000 !important;
  border: 1.4px solid #9a3433 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.TitleVideoOperaHome iframe,
.TitleVideoHome iframe,
.TitleVideo iframe,
.vimeo-responsive-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* Main Content and other section containers within centered-content */
.mainContent,
.section2,
.section3,
.section4 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.mainContent table,
.section2 table,
.section3 table,
.section4 table {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.mainContent img,
.section2 img,
.section3 img,
.section4 img,
img.RedBorder {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   6. TABLET QUERY (<= 844px) - CONTENT CONSTRAINTS
   ========================================================================== */
@media only screen and (max-width : 844px) {
  .TitleSection,
  header .TitleSection,
  section.TitleSection {
    margin-left: 0 !important;
    left: 0 !important;
    width: 97vw !important;
  }

  .mainContent .section3hide {
    display: none !important;
  }
  section.menu.menu-tree-active {
    /* height: 0px !important; */
    display: none;
}
}

/* ==========================================================================
   7. RESTORED AUG 27 MOBILE VIEWPORTS (<= 531px)
   ========================================================================== */
@media only screen and (max-width : 531px) {
  #rColTop {
    position: static !important;
    height: auto !important;
    margin-bottom: 0px !important;
  }

  #nameplate {
    padding: 0.5em 0 !important;
    height: auto !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }

  /* Aug 27 Horizontal Masthead Flow */
  #mastheadTop {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 4px !important;
    height: fit-content !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .mastheadTopLeft {
    width: 94% !important;
    display: flex !important;
    flex: 1 1 auto !important;
    padding: 0px !important;
    height: auto !important;
    margin: auto !important;
    box-sizing: border-box !important;
  }

  .mastheadTopLeft img {
    max-height: 42px !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .mastheadTopMiddle {
    width: 80% !important;
    display: flex !important;
    flex: 1 1 auto !important;
    height: fit-content !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  .mastheadTopMiddle img,
  img[src*="Bridge-animation"],
  img[src*="BridgeDraw"],
  img[src*="bridge-animation"] {
    height: auto !important;
    max-height: 42px !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .mastheadTopRight {
    display: flex !important;
    flex: 1 1 auto !important;
    height: auto !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .mastheadTopRight p,
  #mastheadTop .mastheadTopRight p,
  #mastheadTop p {
    font-size: 6vw !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: right !important;
    margin: 0 !important;
  }

  /* Red separator bar */
  #absDiv1 {
    margin: 5px 0 10px 0 !important;
    min-height: 2em !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Menu and ProfilePhoto in natural flow on mobile */
  .menu,
  #InsideMenu,
  header .menu,
  section.menu {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 auto 15px auto !important;
    left: auto !important;
    box-sizing: border-box !important;
  }

  .pagetag,
  .menu .pagetag,
  h5.pagetag {
    display: none !important;
  }

  header .ProfilePhoto,
  .menu .ProfilePhoto,
  div.ProfilePhoto,
  .ProfilePhoto {
    position: relative !important;
    width: 116px !important;
    height: 116px !important;
    max-width: 116px !important;
    max-height: 116px !important;
    min-width: 116px !important;
    min-height: 116px !important;
    margin: 10px auto 14px auto !important;
    left: auto !important;
    top: auto !important;
    float: none !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  header .ProfilePhoto img,
  .menu .ProfilePhoto img,
  div.ProfilePhoto img,
  .ProfilePhoto img,
  .ProfilePhoto .RedBorder,
  .ProfilePhoto .rotating-item {
    width: 116px !important;
    height: 116px !important;
    max-width: 116px !important;
    max-height: 116px !important;
    min-width: 116px !important;
    min-height: 116px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .TitleSection,
  header .TitleSection,
  section.TitleSection {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    clear: both !important;
    float: none !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
  }

  .TitleVideoOperaHome,
  .TitleVideoHome,
  .TitleVideo,
  .vimeo-responsive-container,
  .TitleSection .TitleVideoOperaHome,
  .TitleSection .TitleVideo {
    width: 84vw !important;
    max-width: 310px !important;
    height: auto !important;
    max-height: 175px !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto 15px auto !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  .mainContent,
  .section2,
  .section3,
  .section4 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
  }

  .mainContent table,
  .section2 table,
  .section3 table,
  .section4 table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .mainContent img,
  .section2 img,
  .section3 img,
  .section4 img {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   8. HAMBURGER MENU & FLOATING OVERLAY (<= 531px)
   ========================================================================== */
.hamburger-menu-btn {
  display: none;
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1000000;
  width: 44px;
  height: 44px;
  padding: 8px 6px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  cursor: pointer;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  outline: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.hamburger-menu-btn:hover,
.hamburger-menu-btn:focus {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

.hamburger-bar {
  display: block;
  width: 24px;
  height: 2.5px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Animate Hamburger into "X" when open */
.hamburger-menu-btn.open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-menu-btn.open .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.hamburger-menu-btn.open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media only screen and (max-width: 531px) {
  .hamburger-menu-btn {
    display: flex !important;
  }

  .menu-overlay {
    position: fixed !important;
    top: 68px !important;
    left: 15px !important;
    width: 285px !important;
    max-width: calc(100vw - 30px) !important;
    max-height: calc(100vh - 85px) !important;
    overflow-y: auto !important;
    background: rgba(102, 102, 102, 0.25) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45) !important;
    padding: 16px 14px 18px 14px !important;
    margin: 0 !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .menu-overlay::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  .menu-overlay.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .menu-overlay .MenuChildTop {
    margin-top: 0 !important;
    width: 100% !important;
  }
}