/* -- Site-wide font: Open Sans family across every element in the page body.
Font-size is only enforced on the body-text containers so headings keep
their own sizes (and so tags inside headings inherit the heading
size, not the body size). */
body,
body p, body li, body td, body div, body span, body a {
font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
}
body,
body > *,
.item-page p, .item-page li, .item-page td,
#s5_component_wrap p, #s5_component_wrap li, #s5_component_wrap td {
font-size: 15px !important;
}
/* -- Headings: use Open Sans Semibold (not condensed) for a rounder, more
evenly-weighted look. The template originally applied Open Sans Condensed
(narrow / elongated) to every heading class. These selectors mirror the
template's heading selector list so no heading gets missed. */
#s5_component_wrap h1,
#s5_component_wrap h2,
#s5_component_wrap h3,
#s5_component_wrap h4,
.contentheading,
.page-header h1,
.page-header h2,
.s5_mod_h3,
.s5_am_toggler,
.s5_am_toggler a,
.highlight_font,
.s5_va_element_inner h1,
.s5_va_accordion_inner h3,
.s5_is_display h3,
.slideInfoZone h2 {
font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
font-weight: 600 !important;
}
/* -- Top nav labels: Open Sans Regular (400). Standard proportions, same
weight as the body text for a uniform feel across the site. */
#s5_nav > li > span > span > a,
#s5_nav > li > span > span > a > span,
#s5_nav > li > a {
font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
font-weight: 400 !important;
}
/* -- Top-row tiles: equal height, consistent sizing ------------------------ */
#s5_top_row1_inner {
display: flex !important;
align-items: stretch !important;
gap: 10px;
}
#s5_top_row1_inner > div[id^="s5_pos_top_row1_"] {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
float: none !important;
}
#s5_top_row1_inner .module_round_box_outer,
#s5_top_row1_inner .module_round_box-dark_less_padding,
#s5_top_row1_inner .s5_module_box_1,
#s5_top_row1_inner .s5_module_box_2,
#s5_top_row1_inner .custom-dark_less_padding,
#s5_top_row1_inner .s5_is { height: 100%; }
#s5_top_row1_inner .s5_is {
display: block;
height: 240px;
background: #ffffff;
overflow: hidden;
}
/* The around the image is inline-level by default; make it fill the tile. */
#s5_top_row1_inner .s5_is a {
display: block;
width: 100%;
height: 100%;
}
#s5_top_row1_inner .s5_is img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
max-width: none !important;
max-height: none !important;
}
/* The template's module_round_box-dark_less_padding adds a 2px gray padding
strip around each tile. Zero it so the tiles sit flush. */
#s5_top_row1_inner .module_round_box-dark_less_padding {
background: transparent !important;
padding: 0 !important;
}
#s5_top_row1_inner .yt-embed {
position: relative;
width: 100%;
height: 100%;
padding-top: 0;
background: #000;
overflow: hidden;
}
#s5_top_row1_inner .yt-embed > iframe {
position: absolute;
top: 0; left: 0;
width: 100% !important;
height: 100% !important;
border: 0;
}
/* -- X (formerly Twitter) icon: replace the old bird PNG with an inline SVG
X mark. Scoped override, same geometry as the LinkedIn/Facebook tiles. */
#s5_twitter {
background: #333 no-repeat center / 13px 13px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
#s5_twitter:hover {
background: #000 no-repeat center / 13px 13px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* -- LinkedIn icon (matches #s5_twitter/#s5_facebook sizing) --------------- */
#s5_linkedin {
height: 23px;
width: 22px;
cursor: pointer;
margin-left: 8px;
float: right;
background: #333 no-repeat center / 15px 15px;
background-image: url("data:image/svg+xml;utf8,");
}
/* Clean dropdown menu for #s5_nav.
Replaces the stripped Joomla MenuMatic/MooTools behavior with a plain
CSS-hover menu. Nothing fancy: no transitions, no color/background shifts,
just bolder text on hover. */
/* Let dropdowns escape clipping containers --------------------------------- */
#s5_nav li,
#s5_menu_wrap,
#s5_menu_wrap_inner,
#s5_top_menu,
#s5_header_right_wrap,
#s5_center_column_wrap,
#s5_center_column_wrap_inner { overflow: visible !important; }
/* Wipe template styling off every submenu element -------------------------- */
#s5_nav ul,
#s5_nav ul li,
#s5_nav ul li span,
#s5_nav ul li a {
all: unset;
box-sizing: border-box;
}
/* Structural layout on top-level ------------------------------------------- */
#s5_nav { list-style: none; margin: 0; padding: 0; }
#s5_nav > li {
position: relative;
display: inline-block;
vertical-align: top;
/* No padding-bottom hover-area extension here; the dropdown's own ::before
pseudo-element (18px taller than its visual top) handles the hover-gap
bridge without inflating the active/hover box around top-level items. */
}
/* Template parks submenus with `margin-left: -1000em` and `margin-top: 2.2em`
and even re-applies the negative margin on `#s5_nav li:hover ul ul` -- we need
!important on margins and width to beat that. */
/* First-level dropdown panel ---------------------------------------------- */
#s5_nav > li > ul,
#s5_nav li:hover > ul {
position: absolute;
top: 100%;
left: 0;
margin: 0 !important;
width: auto !important;
min-width: 300px;
padding: 6px 0;
z-index: 99999;
background: #ffffff;
border: 1px solid #cfcfcf;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
list-style: none;
}
#s5_nav > li > ul { display: none; }
/* Nested panel: appears flush to the RIGHT of its parent row --------------- */
#s5_nav ul ul,
#s5_nav li:hover ul ul {
position: absolute;
top: 0;
left: 100%;
margin: 0 !important;
width: auto !important;
min-width: 240px;
padding: 6px 0;
z-index: 100000;
background: #ffffff;
border: 1px solid #cfcfcf;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
list-style: none;
}
#s5_nav ul ul { display: none; }
/* Open on hover ----------------------------------------------------------- */
#s5_nav li:hover > ul,
#s5_nav li:focus-within > ul { display: block; }
/* Transparent overshoot bridge above the first-level panel so hover is
forgiving while the mouse crosses from the tab into the panel. */
/* Transparent "overshoot" zone that extends 18px above the dropdown's visible
top edge so the mouse can safely cross the gap between the top-level item
and the dropdown without losing hover. */
#s5_nav > li > ul::before {
content: "";
position: absolute;
top: -18px;
left: 0;
right: 0;
height: 18px;
background: transparent;
}
/* Submenu rows ------------------------------------------------------------ */
#s5_nav ul li {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
background: #ffffff;
}
/* Only the inner owns the row's padding. The .S5_submenu_item SPAN
wrapper and the .s5_sub_a_span inner SPAN are transparent passthroughs so
stacked padding can't drift on hover. */
#s5_nav ul li a {
display: block !important;
padding: 10px 18px !important;
color: #333 !important;
font-family: 'Open Sans', 'Open Sans Condensed', Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
text-decoration: none !important;
text-transform: none !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
background: transparent !important;
cursor: pointer !important;
border: 0 !important;
margin: 0 !important;
}
#s5_nav ul li .S5_submenu_item,
#s5_nav ul li .s5_sub_a_span {
display: block !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
font: inherit !important;
color: inherit !important;
}
#s5_nav ul li a .s5_sub_a_span {
display: inline !important;
}
/* Hover state: ONLY change text colour to the site accent blue, and ONLY on
the row the cursor is directly over. Using `li:hover` here would propagate
up to every ancestor (since :hover bubbles through descendants), so
SERVICES-hover would turn every dropdown item blue. Keying off `a:hover`
instead isolates the colour change to the actually-hovered . */
#s5_nav ul li a:hover,
#s5_nav ul li a:hover * {
color: #2f71b3 !important;
}
/* The template adds `box-shadow: 0 0px 3px #DAD9D9` on `#s5_nav li:hover`.
On DROPDOWN rows this manifested as the stray gray halo above/below.
On the TOP-LEVEL nav items the same shadow produces the subtle lifted-card
effect around HOME/ABOUT US/etc that the original site shows. Keep the
shadow on top-level items, strip it only from items INSIDE a dropdown
panel (any nested under a descendant of #s5_nav). */
#s5_nav ul li:hover,
#s5_nav ul li.mainMenuParentBtnFocused {
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
}
/* The template adds a padding reduction + 1px border to .S5_submenu_item:hover
and .S5_grouped_child_item .S5_submenu_item:hover. Lock them to the resting
state (0 padding, 0 border) so there's zero geometry change on hover. */
#s5_nav .S5_submenu_item,
#s5_nav .S5_submenu_item:hover,
#s5_nav .S5_grouped_child_item .S5_submenu_item,
#s5_nav .S5_grouped_child_item .S5_submenu_item:hover {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
display: block !important;
}
/* Chevron indicator (absolute so it never wraps). Add generous right padding
so even the longest labels ("Environmental Regulatory Compliance") don't
smush into the chevron glyph. */
#s5_nav ul li:has(> ul) > a,
#s5_nav ul li:has(> ul) > .S5_submenu_item {
padding-right: 44px !important;
}
#s5_nav ul li:has(> ul) > a::after,
#s5_nav ul li:has(> ul) > .S5_submenu_item::after {
content: "\203A";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
line-height: 1;
}
/* ============================================================
MOBILE (<= 900px): swap desktop header for the template's
hamburger bar and show the drop-down menu it already contains.
============================================================ */
/* Desktop defaults: keep the responsive bar hidden */
#s5_responsive_mobile_top_bar_wrap { display: none; }
@media (max-width: 900px) {
/* Hide the desktop header strip, top menu row and the body nav */
#s5_top_menu_wrap,
#s5_menu_wrap,
#s5_header_right_wrap { display: none !important; }
/* Show the template's mobile top bar (JS un-parks it from -50000px) */
#s5_responsive_mobile_top_bar_wrap {
display: block !important;
position: fixed !important;
top: 0; left: 0; right: 0;
width: 100% !important;
background: #222 !important;
z-index: 99999 !important;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
#s5_responsive_mobile_top_bar {
height: 48px;
padding: 0 12px;
}
#s5_responsive_mobile_toggle_click_menu {
display: block !important;
float: left !important;
width: 44px; height: 44px;
cursor: pointer;
position: relative;
}
/* Hamburger glyph (CSS, no icon font needed) */
#s5_responsive_mobile_toggle_click_menu::before {
content: "";
position: absolute;
left: 10px; top: 14px;
width: 24px; height: 3px;
background: #fff;
box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
}
#s5_responsive_mobile_toggle_click_menu span { display: none !important; }
#s5_responsive_mobile_bar_active { display: none !important; }
/* Push the page body down so content isn't under the fixed bar */
#s5_responsive_mobile_top_bar_spacer {
display: block !important;
height: 48px !important;
}
/* Drop-down menu: hidden until body gets .s5-mobile-menu-open */
#s5_responsive_mobile_drop_down_wrap {
position: fixed !important;
top: 48px !important; left: 0; right: 0;
width: 100% !important;
max-height: calc(100vh - 48px);
overflow-y: auto;
background: #fff;
display: none;
z-index: 99998;
box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
body.s5-mobile-menu-open #s5_responsive_mobile_drop_down_wrap { display: block !important; }
/* The template's inner wrapper AND the drop_down_menu div both set width:225px
plus a dark background. Override both so the menu fills the viewport. */
#s5_responsive_mobile_drop_down_menu,
#s5_responsive_mobile_drop_down_menu .s5_responsive_mobile_drop_down_inner {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
background: #fff !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
/* Hide the search / login / register panels; nothing to serve them */
#s5_responsive_mobile_drop_down_search,
#s5_responsive_mobile_drop_down_login,
#s5_responsive_mobile_drop_down_register { display: none !important; }
/* Mobile menu list: full width, large tap targets */
#s5_responsive_mobile_drop_down_menu ul,
#s5_responsive_mobile_drop_down_menu ul.menu {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#s5_responsive_mobile_drop_down_menu li {
display: block !important;
width: 100% !important;
border-bottom: 1px solid #eee;
}
#s5_responsive_mobile_drop_down_menu a {
display: block !important;
padding: 14px 20px !important;
color: #333 !important;
font-family: 'Open Sans', Arial, sans-serif !important;
font-size: 15px !important;
text-decoration: none !important;
background: #fff !important;
}
/* Nested submenu items: indent so hierarchy is visible */
#s5_responsive_mobile_drop_down_menu li li a { padding-left: 36px !important; background: #fafafa !important; font-size: 14px !important; }
#s5_responsive_mobile_drop_down_menu li li li a { padding-left: 52px !important; background: #f4f4f4 !important; }
#s5_responsive_mobile_drop_down_menu a:hover { color: #2f71b3 !important; }
/* The template colors every item in the current/active branch pure white
(color:#FFFFFF !important), which disappears against our white panel.
Force dark text on all mobile menu rows regardless of active state. */
#s5_responsive_mobile_drop_down_menu .active a,
#s5_responsive_mobile_drop_down_menu .active ul li,
#s5_responsive_mobile_drop_down_menu .active ul li a,
#s5_responsive_mobile_drop_down_menu .current a,
#s5_responsive_mobile_drop_down_menu .current ul li,
#s5_responsive_mobile_drop_down_menu .current ul li a,
#s5_responsive_mobile_drop_down_wrap {
color: #333 !important;
}
/* Keep the current page's own label highlighted in the accent blue so the
user can still tell where they are. */
#s5_responsive_mobile_drop_down_menu li.current > a,
#s5_responsive_mobile_drop_down_menu li.active > a {
color: #2f71b3 !important;
}
/* Stack the top-row tiles vertically on mobile */
#s5_top_row1_inner {
display: block !important;
}
#s5_top_row1_inner > div[id^="s5_pos_top_row1_"] {
display: block !important;
width: 100% !important;
margin-bottom: 10px;
}
#s5_top_row1_inner .s5_is { height: auto !important; max-height: 260px; }
#s5_top_row1_inner .s5_is img { height: auto !important; }
/* Keep anything else from forcing horizontal scroll */
html, body { overflow-x: hidden !important; }
#s5_outer_wrap, #s5_wrapper, #s5_center_column_wrap { max-width: 100% !important; }
}