/* ==========================================================================
   Products: navbar mega-menu + category sidebar
   Loaded after style.min.css / responsive.min.css, so the selectors here are
   written specifically enough to win over the theme defaults.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Home slider: the frame is read in thirds
   The caption takes the left third and the photo keeps the other two, so the
   shade is held over that first third and fades away across the boundary.
   -------------------------------------------------------------------------- */

.slider-home-one {
    /* The logo's own two colours, used for the caption and its rule. */
    --bm-teal: #24b4b4;
    --bm-red: #de0c18;

    /* Where the panel ends and the photo begins. Everything below is measured
       from this, so a breakpoint only has to move the one number.

       It is a little past a third because the panel has two jobs: hold the
       words, and give the fade enough room to reach white without the eye
       catching it. At exactly a third one of the two had to give. */
    --bm-split: 38%;

    /* The height of the photo band once the two are stacked. */
    --bm-photo-height: clamp(190px, 44vw, 320px);
}

/* The frame is split outright: the first part is a panel that carries the
   words and no picture at all, and the photo is painted into the rest on its
   own, where nothing is written over it.

   The panel runs dark at the far left and lifts towards the picture, and the
   gradient finishes at the seam rather than at the frame's edge.

   The stops crowd together towards the end on purpose. A straight ramp into
   white that then stops dead at the seam leaves a rate change there, and the
   eye reads that as a line even though both sides are the same colour. Easing
   the last stretch, and arriving at white a hair before the seam so the join
   itself sits in flat white, is what takes the line away.

   The height follows the screen, so a short laptop is not swallowed. */
#minimal-bootstrap-carousel.slider-home-one .carousel-inner .item {
    position: relative;
    min-height: clamp(460px, 76vh, 730px);

    background: linear-gradient(
        to right,
        #09343e 0%,
        #1a5362 calc(var(--bm-split) * 0.30),
        #3e7380 calc(var(--bm-split) * 0.50),
        #558d9b calc(var(--bm-split) * 0.65),
        #85b1bc calc(var(--bm-split) * 0.78),
        #cdd7da calc(var(--bm-split) * 0.90),
        #ffffff var(--bm-split),
        #ffffff 100%
    );
}

/* The picture is fitted whole rather than cropped, so the machine is seen in
   full, and it keeps a plain ground since the photos are shot on white.

   No fade is needed on its left edge. The panel gradient finishes on white at
   the seam, and this ground is white too, so the two meet white on white and
   the join cannot be seen. Carrying the teal past the seam instead would tint
   the picture, which is what a mask here used to do. */
#minimal-bootstrap-carousel.slider-home-one .carousel-inner .item:after {
    position: absolute;
    inset: 0 0 0 var(--bm-split);
    z-index: 1;
    content: "";
    background-image: var(--bm-slide-photo);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-color: #ffffff;
}

.slider-home-one .carousel-caption {
    z-index: 3;
}

/* The caption is measured against the whole frame rather than the centred
   container, so the words end exactly where the picture starts. */
/* The id is carried here so this beats the theme's own centred container. */
#minimal-bootstrap-carousel.slider-home-one .carousel-caption .container {
    max-width: none;
    width: 100%;
    padding-left: 5%;
    padding-right: 0;
}

/* The column stops where the panel starts lifting towards white, not at the
   seam, so no line can ever run into the pale end and disappear. It is written
   against the split, so it follows by itself whenever that moves. */
#minimal-bootstrap-carousel.slider-home-one .carousel-caption .container .box .content {
    float: none;
    width: calc(var(--bm-split) * .9 - 4%);
    padding-right: clamp(8px, 2.5vw, 40px);
    text-align: left;
}

/* The whole caption is white on the banner, whatever colour the editor saved.
   The captions carry their colours inline, on span and font tags, so nothing
   short of !important reaches them. This is the one place the editor's colour
   is deliberately overruled: the panel behind runs from deep blue to white and
   only white text holds up along all of it. Colours picked in the editor still
   apply everywhere else on the site. */
.slider-home-one .carousel-caption .main-banner-content,
.slider-home-one .carousel-caption .main-banner-content * {
    color: #ffffff !important;
}

/* The caption is printed exactly as the editor saved it, so the heading and
   paragraph levels it offers each need a size of their own. The theme puts
   .main-banner-content h1 at 120px, which is why h1 is restated here. */
.slider-home-one .carousel-caption .main-banner-content h1,
.slider-home-one .carousel-caption .main-banner-content h2,
.slider-home-one .carousel-caption .main-banner-content h3,
.slider-home-one .carousel-caption .main-banner-content h4,
.slider-home-one .carousel-caption .main-banner-content h5,
.slider-home-one .carousel-caption .main-banner-content h6,
.slider-home-one .carousel-caption .main-banner-content p,
.slider-home-one .carousel-caption .main-banner-content li {
    color: inherit;
    font-family: inherit;
}

/* Each size is given a floor, a rate and a ceiling rather than a fixed value,
   so the caption grows with the screen instead of stepping at a breakpoint. */
/* The heading grows more slowly than it did. At 2.3vw it reached 40px by the
   time the screen was 1200 wide, which is a lot of type for a column about
   300px across - it was the size, as much as the width, that made the caption
   feel packed. */
.slider-home-one .carousel-caption .main-banner-content h1 {
    font-size: clamp(26px, 1.7vw + 12px, 40px);
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 12px;
}

.slider-home-one .carousel-caption .main-banner-content h2 {
    font-size: clamp(23px, 1.9vw + 10px, 36px);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 12px;
}

.slider-home-one .carousel-caption .main-banner-content h3 {
    font-size: clamp(20px, 1.4vw + 9px, 28px);
    line-height: 1.25;
    font-weight: 600;
    margin: 0 0 10px;
}

.slider-home-one .carousel-caption .main-banner-content h4 {
    font-size: clamp(18px, 1vw + 8px, 22px);
    line-height: 1.3;
    font-weight: 600;
    margin: 0 0 10px;
}

.slider-home-one .carousel-caption .main-banner-content h5 {
    font-size: clamp(17px, 0.6vw + 8px, 19px);
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 8px;
}

.slider-home-one .carousel-caption .main-banner-content h6 {
    font-size: clamp(16px, 0.4vw + 8px, 17px);
    line-height: 1.4;
    font-weight: 600;
    margin: 0 0 8px;
}

.slider-home-one .carousel-caption .main-banner-content p {
    font-size: clamp(15px, 0.5vw + 11px, 17px);
    line-height: 1.7;
    margin: 0 0 12px;
}

.slider-home-one .carousel-caption .main-banner-content ul,
.slider-home-one .carousel-caption .main-banner-content ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.slider-home-one .carousel-caption .main-banner-content li {
    font-size: clamp(15px, 0.5vw + 11px, 17px);
    line-height: 1.7;
}

.slider-home-one .carousel-caption .main-banner-content a {
    color: var(--bm-teal);
    text-decoration: underline;
}

/* The rule the caption hangs off takes the logo's red. */
.slider-home-one .carousel-caption .main-banner-content {
    border-left-color: var(--bm-red);
}

.slider-home-one .carousel-caption .main-banner-content > *:last-child {
    margin-bottom: 0;
}

/* A laptop cannot spare a full third for the words, so the panel takes a
   little more and the picture gives it up.

   The step at 1200 used to go straight from 48% to 38%, which made the column
   NARROWER on a laptop than on a tablet - 301px against 337px - while the
   heading was growing at the same time. That band was the most cramped on the
   whole site. This middle step keeps the column widening as the screen does. */
@media only screen and (max-width: 1439px) {
    .slider-home-one {
        --bm-split: 44%;
    }
}

@media only screen and (max-width: 1199px) {
    .slider-home-one {
        --bm-split: 48%;
    }
}

/* From tablet portrait down the two no longer read side by side: a column that
   narrow breaks a heading over four lines. They are stacked instead, the photo
   across the top and the words underneath, so nothing is laid over the picture
   and the machine stays fully visible. */
@media only screen and (max-width: 991px) {
    #minimal-bootstrap-carousel.slider-home-one .carousel-inner .item {
        min-height: 0;
        height: auto;
        padding-top: var(--bm-photo-height);
        padding-bottom: clamp(38px, 7vw, 60px);
        background-image: linear-gradient(to bottom, #2d6675 0%, #134e5e 100%);
    }

    /* Stacked, the photo is a band across the top with the words below it. */
    #minimal-bootstrap-carousel.slider-home-one .carousel-inner .item:after {
        inset: 0 0 auto 0;
        height: var(--bm-photo-height);
    }

    /* The caption leaves the overlay and simply follows the photo. */
    #minimal-bootstrap-carousel.slider-home-one .carousel-caption {
        position: static;
        padding: clamp(20px, 4vw, 34px) 0 0;
    }

    #minimal-bootstrap-carousel.slider-home-one .carousel-caption .container {
        display: block;
        height: auto;
        padding-left: clamp(18px, 5vw, 40px);
        padding-right: clamp(18px, 5vw, 40px);
    }

    #minimal-bootstrap-carousel.slider-home-one .carousel-caption .container .box {
        display: block;
    }

    /* Capped so a line does not run the full width of a wide tablet. */
    #minimal-bootstrap-carousel.slider-home-one .carousel-caption .container .box .content {
        width: 100%;
        max-width: 640px;
        padding-right: 0;
    }

    /* The theme puts a near-white box behind the caption on a small screen, to
       lift it off the photo it used to sit on. The words have their own dark
       panel now, so that box only hides them. */
    #minimal-bootstrap-carousel.slider-home-one .carousel-caption .main-banner-content {
        background: none;
        padding: 0 0 0 18px;
    }

    /* The arrows belong over the photo now, and the dots sit under the text. */
    #minimal-bootstrap-carousel .carousel-control {
        top: calc(var(--bm-photo-height) / 2);
        margin-top: -20px;
    }

    #minimal-bootstrap-carousel .custom-navigation {
        bottom: 18px;
    }

    /* The captions were pasted in from the old theme and carry their desktop
       sizes inline, alongside leftovers like background-clip and outline. Those
       sizes overflow a stacked column, and an inline style can only be answered
       with !important. The size is capped here and left alone on a wide screen,
       so what the editor shows still holds where there is room for it. */
    .slider-home-one .carousel-caption .main-banner-content h1 {
        font-size: clamp(26px, 4.4vw + 8px, 40px) !important;
    }

    .slider-home-one .carousel-caption .main-banner-content h2 {
        font-size: clamp(23px, 3.6vw + 7px, 34px) !important;
    }

    .slider-home-one .carousel-caption .main-banner-content h3 {
        font-size: clamp(19px, 2.4vw + 6px, 26px) !important;
    }

    .slider-home-one .carousel-caption .main-banner-content h4 {
        font-size: clamp(18px, 1.6vw + 6px, 22px) !important;
    }

    .slider-home-one .carousel-caption .main-banner-content h5,
    .slider-home-one .carousel-caption .main-banner-content h6 {
        font-size: clamp(16px, 1vw + 7px, 19px) !important;
    }

    .slider-home-one .carousel-caption .main-banner-content p,
    .slider-home-one .carousel-caption .main-banner-content li {
        font-size: clamp(15px, 1vw + 11px, 17px) !important;
    }
}

/* A phone held sideways has height to spare nowhere, so the photo band is
   measured against what little there is rather than against the width. */
@media only screen and (max-width: 991px) and (max-height: 520px) {
    .slider-home-one {
        --bm-photo-height: clamp(150px, 40vh, 230px);
    }
}

/* The caption is animated in on arrival; that is decoration, not information. */
@media (prefers-reduced-motion: reduce) {
    .slider-home-one .main-banner-content {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   0b. Editor output: product, blog and service copy
   Bootstrap 3 fixes h1 at 36px and h2 at 30px whatever the screen, so a
   heading written in the editor arrived on a phone at its desktop size and ran
   to five lines. The class is put on the wrapper the editor's HTML is printed
   into, so only that copy is touched and the theme's own headings are left be.
   -------------------------------------------------------------------------- */

.bm-rich-text h1 {
    font-size: clamp(24px, 2.4vw + 14px, 36px);
    line-height: 1.2;
}

.bm-rich-text h2 {
    font-size: clamp(21px, 1.9vw + 13px, 30px);
    line-height: 1.25;
}

.bm-rich-text h3 {
    font-size: clamp(19px, 1.4vw + 12px, 24px);
    line-height: 1.3;
}

.bm-rich-text h4 {
    font-size: clamp(17px, 0.8vw + 12px, 18px);
    line-height: 1.35;
}

/* A picture or a table pasted in at a fixed width is the other way this copy
   breaks a narrow screen, so both are held inside it. */
.bm-rich-text img {
    max-width: 100%;
    height: auto;
}

.bm-rich-text table {
    max-width: 100%;
}

.bm-rich-text .table-responsive,
.bm-rich-text > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   0c. Filled buttons
   White reads better on a button than the theme's near-black did, but white on
   the logo's own teal is only 2.5:1, which is under the 4.5:1 normal text needs
   and comes out looking washed. The fill is dropped to a deeper shade of the
   same teal, where white reaches 4.9:1; the brand teal is left alone
   everywhere else, so only the buttons darken.
   -------------------------------------------------------------------------- */

:root {
    --bm-btn: #157d7d;
    --bm-btn-hover: #0f6d6e;

    /* For teal sitting on a photo or a mid-grey band, where the brand teal is
       too close in weight to the ground behind it. */
    --bm-teal-light: #5ecfcf;
}

/* The breadcrumb runs over the page-title photo, which falls back to a mid
   grey. The brand teal only reaches 3.5:1 there, and darkening it would make
   that worse rather than better, so this one lightens instead. */
.page-title .page-breadcrumb li,
.page-title .page-breadcrumb li a:hover {
    color: var(--bm-teal-light);
}

/* The teal used for text was darkened so it reads on the white the site is
   mostly built from. The footer is one of the few dark panels, and a link
   there falls back to that same global colour, where darker means less
   contrast rather than more. The bright teal is put back for those.

   Only links with no colour of their own are affected: the theme's own footer
   link rules carry more classes than this one and still win. */
.main-footer a {
    color: #24b4b4;
}

.btn-style-one,
.btn-style-three,
.btn-style-four,
.scroll-to-top,
.main-header .info-box .order-btn,
.main-header.style-three .outer-box .search-box-btn,
.contact-form .form-group input[type="submit"],
.contact-form button,
.faq-form .form-group input[type="submit"],
.faq-form button,
.pricing-table.active .theme-btn,
.pricing-table .inner-box:hover .theme-btn,
.range-slider-one .theme-btn {
    color: #ffffff;
    background: var(--bm-btn);
}

.btn-style-three {
    border-color: var(--bm-btn);
}

/* The theme already swaps to a dark fill on hover and that reads well, so only
   the buttons whose hover kept the old light text are restated. */
.btn-style-one:hover,
.scroll-to-top:hover,
.contact-form button:hover,
.faq-form button:hover {
    color: #ffffff;
    background: var(--bm-btn-hover);
}

/* The menu paints the open and current items with a teal fill and white on top,
   which is the same 2.5:1 pairing, so those fills take the deeper shade too. */
.main-header .sticky-header .main-menu .navigation > li:hover > a,
.main-header .sticky-header .main-menu .navigation > li.current > a,
.main-header .sticky-header .main-menu .navigation > li.current-menu-item > a,
.main-menu .navigation > li > ul > li:hover > a,
.main-menu .navigation > li > ul > li > ul > li:hover > a {
    color: #ffffff;
    background: var(--bm-btn);
}

/* On a small screen the collapsed menu is a teal panel with white links, and
   the first two levels of link carry a teal fill of their own on top of it.
   Panel and links are deepened together; the third level is already clear and
   simply sits on the panel. Hover goes a step darker again so it stays
   tellable from the fill behind it.

   This has to stay inside the same breakpoint the theme fills the menu at.
   The selectors match on a wide screen too, where the bar is transparent over
   the dark header, and unscoped they painted a teal slab across the navbar. */
@media only screen and (max-width: 767px) {
    .main-menu .navbar-collapse > .navigation,
    .main-menu .navbar-collapse > .navigation > li > a,
    .main-menu .navbar-collapse > .navigation > li > ul > li > a {
        background: var(--bm-btn);
    }

    .main-menu .navbar-collapse > .navigation > li > a:hover,
    .main-menu .navbar-collapse > .navigation > li > a:active,
    .main-menu .navbar-collapse > .navigation > li > a:focus,
    .main-menu .navbar-collapse > .navigation > li:hover > a,
    .main-menu .navbar-collapse > .navigation > li.current > a,
    .main-menu .navbar-collapse > .navigation > li.current-menu-item > a,
    .main-menu .navbar-collapse > .navigation > li > ul > li:hover > a,
    .main-menu .navbar-collapse > .navigation > li > ul > li.current > a,
    .main-menu .navbar-collapse > .navigation > li > ul > li > ul > li:hover > a {
        color: #ffffff;
        background: var(--bm-btn-hover);
    }
}

/* --------------------------------------------------------------------------
   1. Navbar mega-menu
   -------------------------------------------------------------------------- */

/* NOTE: no background is set here on purpose. On mobile the theme paints the
   collapsed dropdown amber with white text, so the white panel is applied in
   the desktop media query only. */

.main-menu .navigation > li > ul.bm-megamenu:after {
    content: "";
    display: block;
    clear: both;
}

/* Columns ------------------------------------------------------------------ */

.main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-col {
    position: relative;
    float: left;
    width: 25%;
    padding: 0 18px 20px 0;
    border-top: 0;
    border-bottom: 0;
}

.main-menu .navigation > li > ul.bm-megamenu > li:before {
    display: none;
}

.main-menu .navigation > li > ul.bm-megamenu > li:hover > a {
    padding-left: 0;
    background: transparent;
}

/* Column heading ----------------------------------------------------------- */

.main-menu .navigation > li > ul.bm-megamenu > li > a.bm-megamenu-heading {
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #0a1e3c;
    background: transparent;
    padding: 0 0 10px;
    margin-bottom: 8px;
    border-bottom: 2px solid #24b4b4;
}

.main-menu .navigation > li > ul.bm-megamenu > li > a.bm-megamenu-heading:hover {
    color: #157d7d;
}

/* Sub-category list -------------------------------------------------------- */

/* The theme turns any third-level ul into an absolute fly-out; keep ours inline. */
.main-menu .navigation > li > ul.bm-megamenu > li > ul.bm-megamenu-list {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    padding: 0;
    display: block;
    visibility: visible;
    opacity: 1;
    background: transparent;
    box-shadow: none;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.main-menu .navigation > li > ul.bm-megamenu > li > ul.bm-megamenu-list > li {
    width: 100%;
    padding: 0;
    border-top: 0;
    border-bottom: 0;
}

.main-menu .navigation > li > ul.bm-megamenu > li > ul.bm-megamenu-list > li:before {
    display: none;
}

.main-menu .navigation > li > ul.bm-megamenu > li > ul.bm-megamenu-list > li > a {
    position: relative;
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #5b6472;
    background: transparent;
    text-transform: none;
    padding: 6px 0 6px 15px;
}

.main-menu .navigation > li > ul.bm-megamenu > li > ul.bm-megamenu-list > li > a:before {
    position: absolute;
    left: 0;
    top: 6px;
    content: "\f105";
    font-family: "FontAwesome";
    font-size: 13px;
    line-height: 20px;
    color: #c7ccd4;
    transition: all 300ms ease;
}

.main-menu .navigation > li > ul.bm-megamenu > li > ul.bm-megamenu-list > li:hover > a {
    color: #157d7d;
    background: transparent;
    padding-left: 20px;
}

.main-menu .navigation > li > ul.bm-megamenu > li > ul.bm-megamenu-list > li:hover > a:before {
    color: #157d7d;
}

/* Footer row --------------------------------------------------------------- */

.main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-footer {
    float: none;
    clear: both;
    width: 100%;
    padding: 12px 0 0;
    border-top: 1px solid #eceff3;
    border-bottom: 0;
}

.main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-footer > a {
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #0a1e3c;
    background: transparent;
    padding: 0;
}

.main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-footer:hover > a {
    color: #157d7d;
    padding-left: 0;
    background: transparent;
}

/* Desktop: stretch the panel across the full container instead of a 260px
   column. The li, the ul.navigation and .main-menu are all taken out of the
   positioning chain so the panel anchors to .nav-outer, which spans the whole
   container. The other dropdowns are unaffected because they anchor to their
   own li, which keeps position: relative. */
@media only screen and (min-width: 1200px) {
    .main-menu,
    .main-menu .navigation {
        position: static;
    }

    .main-menu .navigation > li.bm-has-megamenu {
        position: static;
    }

    /* The sticky header has no .nav-outer, so without this the panel would
       escape the container and span the whole viewport. */
    .sticky-header .auto-container {
        position: relative;
    }

    /* Every category heading sits on one row. align-items: flex-start keeps a
       short category from being stretched to the height of its row. */
    .main-menu .navigation > li.bm-has-megamenu > ul.bm-megamenu {
        left: 0;
        right: 0;
        width: auto;
        padding: 30px 34px 22px;
        background: #fff;
        /* responsive.min.css forces display: block !important on every
           dropdown, so the flex container has to match that weight. */
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 40px;
    }

    .main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-col {
        float: none;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding: 0 0 20px 30px;
        border-left: 1px solid #eceff3;
    }

    .main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-col:first-child {
        padding-left: 0;
        border-left: 0;
    }

    /* A category with a long sub-list keeps its place in the row but takes
       double the width, and splits its list into two columns, so the panel
       does not grow into one very tall column. */
    .main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-col.is-wide {
        flex: 2 1 0;
    }

    .main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-col.is-wide > ul.bm-megamenu-list {
        column-count: 2;
        column-gap: 30px;
    }

    .main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-col.is-wide > ul.bm-megamenu-list > li {
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }

    /* The footer sits under every column, not inside one. */
    .main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-footer {
        flex: 1 1 100%;
    }
}

/* Tablet / mobile: single column inside the collapsible menu, keeping the
   theme's amber background and white link colours. */
@media only screen and (max-width: 1199px) {
    .main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-col {
        float: none;
        width: 100%;
        padding: 0;
    }

    .main-menu .navigation > li > ul.bm-megamenu > li > a.bm-megamenu-heading {
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }

    .main-menu .navigation > li > ul.bm-megamenu > li > ul.bm-megamenu-list > li > a:before,
    .main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-footer > a:before {
        display: none;
    }

    .main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-footer {
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
    }

    .main-menu .navigation > li > ul.bm-megamenu > li.bm-megamenu-footer > a {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   2. Products sidebar
   -------------------------------------------------------------------------- */

.bm-product-sidebar {
    position: relative;
    margin-bottom: 40px;
}

.bm-sidebar-widget {
    position: relative;
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(10, 30, 60, 0.05);
}

/* The category panel has no heading of its own, so it needs no card chrome. */
.bm-sidebar-widget--flush {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.bm-sidebar-widget > h4 {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: #0a1e3c;
    padding: 16px 20px;
    margin: 0;
}

/* Category tree ------------------------------------------------------------ */

.bm-cat-tree {
    padding: 6px 0;
}

.bm-cat-tree > li {
    position: relative;
    margin-bottom: 6px;
}

.bm-cat-tree > li:last-child {
    margin-bottom: 0;
}

/* Each main category reads as its own dark bar, with its children listed under
   it. The right padding leaves room for the open/close chevron. */
.bm-cat-tree > li > a {
    position: relative;
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 23px;
    font-weight: 700;
    text-align: left;
    color: #fff;
    background: #0a1e3c;
    border-radius: 4px;
    padding: 16px 42px 16px 18px;
    transition: all 300ms ease;
}

.bm-cat-tree > li > a:hover,
.bm-cat-tree > li.is-active > a {
    color: #ffffff;
    background: var(--bm-btn);
}

.bm-cat-tree .bm-cat-toggle {
    position: absolute;
    right: 14px;
    top: 16px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: transform 300ms ease;
}

.bm-cat-tree > li > a:hover .bm-cat-toggle,
.bm-cat-tree > li.is-active > a .bm-cat-toggle {
    color: #ffffff;
}

.bm-cat-tree > li.is-open .bm-cat-toggle {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Children sit on a tinted panel under their category bar, separated by hair
   lines — the reference does the same with a grey block and <hr> rules. */
.bm-cat-tree > li > ul {
    display: none;
    padding: 6px 16px;
    background: #f1f2f4;
}

.bm-cat-tree > li.is-open > ul {
    display: block;
}

.bm-cat-tree > li > ul > li {
    position: relative;
}

.bm-cat-tree > li > ul > li + li {
    border-top: 1px solid #dcdee2;
}

/* A sub-category holding a third level gets a caret to advertise it. The site
   loads Font Awesome 6, whose family name is not the old "FontAwesome", so a
   plain character is used here instead of an icon glyph. */
.bm-cat-tree > li > ul > li.has-flyout > a:after {
    position: absolute;
    right: 4px;
    top: 9px;
    content: "\203A";
    font-size: 18px;
    line-height: 23px;
    color: #9aa3ae;
}

.bm-cat-tree > li > ul > li.has-flyout:hover > a:after {
    color: #157d7d;
}

.bm-cat-tree > li > ul > li > a {
    display: block;
    font-size: 15px;
    line-height: 23px;
    color: #333;
    padding: 9px 4px;
    transition: color 300ms ease;
}

.bm-cat-tree > li > ul > li > a:hover,
.bm-cat-tree > li > ul > li.is-active > a {
    color: #157d7d;
}

.bm-cat-tree > li > ul > li.is-active > a {
    font-weight: 600;
}

/* Third level: opens beside its sub-category, the way the reference sidebar
   does it.

   It is hidden with visibility rather than display so that closing can be held
   back a moment. The row is only about 40px tall and the panel opens hard
   against its right edge, so moving across to it at any angle takes the pointer
   out of the row for a frame or two; with display:none that is enough to close
   the panel before it can be reached. The delay on hiding gives that crossing
   time to finish, while opening stays immediate. */
.bm-cat-flyout {
    visibility: hidden;
    opacity: 0;
    /* The delays are on the closing direction. The panel holds fully solid for
       250ms after the pointer leaves, then fades; hiding lands at 400ms. Fading
       it out straight away, even with the hiding deferred, still looked like it
       was vanishing before it could be reached, because what the eye reads is
       the opacity, not whether it is still hoverable. */
    transition: opacity 150ms ease 250ms, visibility 0s linear 400ms;
    position: absolute;
    left: 100%;
    top: -7px;
    z-index: 20;
    min-width: 250px;
    padding: 4px 16px;
    background: #fff;
    border: 1px solid #e3e5e9;
    box-shadow: 0 6px 20px rgba(10, 30, 60, 0.12);
}

/* The panel's bottom lines up exactly with the row's, so there is no room at
   all for the pointer to drop while it travels across: a few pixels of drift
   and it is over the next row instead. This is an invisible strip bridging the
   two, tall enough to absorb that drift. It exists only while the row is
   hovered, so it can never sit over the page and swallow a click. */
.bm-cat-tree > li > ul > li.has-flyout:hover::before {
    content: "";
    position: absolute;
    top: -14px;
    bottom: -14px;
    left: 100%;
    width: 26px;
    z-index: 19;
}

/* The panel keeps itself open while the pointer is on it, so it survives the
   crossing even if the row underneath is no longer hovered. */
.bm-cat-tree > li > ul > li:hover > .bm-cat-flyout,
.bm-cat-tree > li > ul > li > .bm-cat-flyout:hover {
    visibility: visible;
    opacity: 1;
    /* Opening carries no delay at all. */
    transition: opacity 120ms ease 0s, visibility 0s linear 0s;
}

.bm-cat-flyout > li + li {
    border-top: 1px solid #ebedf0;
}

.bm-cat-flyout > li > a {
    display: block;
    font-size: 14px;
    line-height: 22px;
    color: #333;
    padding: 8px 4px;
    transition: color 300ms ease;
}

.bm-cat-flyout > li > a:hover,
.bm-cat-flyout > li.is-active > a {
    color: #157d7d;
}

.bm-cat-flyout > li.is-active > a {
    font-weight: 600;
}

/* Touch screens have no hover, so the third level just nests inline. */
@media only screen and (max-width: 991px) {
    /* No hover to wait on here, so it is simply shown; the visibility and the
       delay used on a desktop are undone. */
    .bm-cat-flyout {
        visibility: visible;
        opacity: 1;
        transition: none;
        position: static;
        min-width: 0;
        padding: 0 0 4px 18px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Nothing to bridge once the third level is nested inline. */
    .bm-cat-tree > li > ul > li.has-flyout:hover::before {
        content: none;
    }

    .bm-cat-tree > li > ul > li.has-flyout > a:after {
        display: none;
    }
}

/* Sidebar call to action --------------------------------------------------- */

.bm-sidebar-cta-body {
    padding: 20px;
}

.bm-sidebar-cta-body p {
    font-size: 14px;
    line-height: 1.7em;
    color: #69727d;
    margin-bottom: 16px;
}

/* Sidebar contact bars ----------------------------------------------------- */

.bm-sidebar-contact {
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    color: #0a1e3c;
    background: #fdf6e3;
    border: 1px solid #f6e6bb;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 14px;
    word-break: break-word;
    transition: all 300ms ease;
}

.bm-sidebar-contact:hover {
    color: #ffffff;
    background: var(--bm-btn);
    border-color: var(--bm-btn);
}

.bm-sidebar-contact i {
    margin-right: 10px;
    color: #157d7d;
}

.bm-sidebar-contact:hover i {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. Sub-category chips on a main category page
   -------------------------------------------------------------------------- */

.bm-subcategory-bar {
    margin-bottom: 30px;
}

.bm-subcategory-bar a {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #0a1e3c;
    background: #f4f6f8;
    border: 1px solid #e6eaef;
    border-radius: 50px;
    padding: 7px 18px;
    margin: 0 8px 8px 0;
    transition: all 300ms ease;
}

.bm-subcategory-bar a:hover {
    color: #ffffff;
    background: var(--bm-btn);
    border-color: var(--bm-btn);
}

.bm-subcategory-bar a span {
    color: #9aa3ae;
    font-weight: 400;
}

.bm-subcategory-bar a:hover span {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   4. Layout for the product listing pages
   -------------------------------------------------------------------------- */

.bm-products-layout {
    position: relative;
    padding: 70px 0 50px;
}

.bm-category-intro {
    font-size: 16px;
    line-height: 1.8em;
    color: #69727d;
    margin-bottom: 26px;
}

.bm-empty-state {
    padding: 60px 0;
    text-align: center;
}

/* Product card ------------------------------------------------------------- */

.bm-product-card {
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    transition: all 300ms ease;
}

.bm-product-card:hover {
    border-color: #157d7d;
    box-shadow: 0 6px 20px rgba(10, 30, 60, 0.1);
}

/* Product shots are studio images, so contain them instead of cropping. The
   reference frames the photo in its own thin-bordered box. */
.bm-product-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
    overflow: hidden;
}

.bm-product-card-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 300ms ease;
}

.bm-product-card:hover .bm-product-card-media img {
    transform: scale(1.05);
}

/* Title on the left, the call to action pinned bottom-right, as on the
   reference layout where the button sits opposite the spec list. */
.bm-product-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-end;
    padding: 18px 20px 20px;
}

.bm-product-card-title {
    display: block;
    align-self: stretch;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #0a1e3c;
    margin-bottom: 16px;
    transition: color 300ms ease;
}

.bm-product-card-title:hover {
    color: #157d7d;
}

/* Squared-off block button, 135x32 like the reference. */
.bm-product-card-btn {
    margin-top: auto;
    display: inline-block;
    min-width: 135px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    background: var(--bm-btn);
    border-radius: 2px;
    padding: 5px 16px;
    transition: all 300ms ease;
}

.bm-product-card-btn:hover {
    color: #fff;
    background: #0a1e3c;
}

.bm-product-card-btn i {
    margin-left: 4px;
}

/* Pagination --------------------------------------------------------------- */

.bm-products-layout .pagination {
    margin: 10px 0 0;
    flex-wrap: wrap;
}

.bm-products-layout .pagination .page-link {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0a1e3c;
    background: #f4f6f8;
    border: 1px solid #e6eaef;
    margin: 0 4px 8px 0;
    border-radius: 4px;
    padding: 9px 16px;
    transition: all 300ms ease;
}

.bm-products-layout .pagination .page-link:hover {
    color: #ffffff;
    background: var(--bm-btn);
    border-color: var(--bm-btn);
    box-shadow: none;
}

.bm-products-layout .pagination .page-item.active .page-link {
    color: #fff;
    background: #0a1e3c;
    border-color: #0a1e3c;
}

.bm-products-layout .pagination .page-item.disabled .page-link {
    color: #b3bac4;
    background: #fafbfc;
    border-color: #eceff3;
}

/* --------------------------------------------------------------------------
   5. "Related Information" block under the product listings
   -------------------------------------------------------------------------- */

.bm-related-info {
    margin-top: 45px;
}

.bm-related-info > h3 {
    font-size: 25px;
    line-height: 32px;
    color: #0a1e3c;
    margin-bottom: 20px;
}

.bm-related-info-panel {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 8px;
    padding: 24px;
}

/* Featured post: image on the left, summary panel on the right. */
.bm-related-info-feature {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.bm-related-info-thumb {
    display: block;
    width: 40%;
    max-height: 210px;
    overflow: hidden;
    border-radius: 6px;
}

.bm-related-info-thumb img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: center;
    transition: transform 300ms ease;
}

.bm-related-info-thumb:hover img {
    transform: scale(1.05);
}

.bm-related-info-summary {
    width: 60%;
    padding: 20px 22px;
    background: #fdf6e3;
    border-radius: 6px;
}

.bm-related-info-summary > h4 {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    margin: 0 0 10px;
}

.bm-related-info-summary > h4 > a {
    color: #0a1e3c;
    transition: color 300ms ease;
}

.bm-related-info-summary > h4 > a:hover {
    color: #157d7d;
}

.bm-related-info-summary > p {
    font-size: 14px;
    line-height: 1.7em;
    color: #69727d;
    margin-bottom: 10px;
}

.bm-related-info-link {
    font-size: 14px;
    font-weight: 700;
    color: #0a1e3c;
    text-decoration: underline;
    transition: color 300ms ease;
}

.bm-related-info-link:hover {
    color: #157d7d;
}

/* Post list ---------------------------------------------------------------- */

.bm-related-info-list > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid #f1f3f6;
    padding: 11px 0;
}

.bm-related-info-list > li > a {
    font-size: 15px;
    line-height: 22px;
    color: #0a1e3c;
    padding-right: 20px;
    transition: color 300ms ease;
}

.bm-related-info-list > li > a:hover {
    color: #157d7d;
}

.bm-related-info-list > li > span {
    flex: 0 0 auto;
    font-size: 14px;
    color: #9aa3ae;
}

.bm-related-info-more {
    text-align: right;
    padding-top: 14px;
}

.bm-related-info-more > a {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #0a1e3c;
    transition: color 300ms ease;
}

.bm-related-info-more > a:hover {
    color: #157d7d;
}

@media only screen and (max-width: 767px) {
    .bm-related-info-thumb,
    .bm-related-info-summary {
        width: 100%;
    }

    .bm-related-info-summary {
        margin-top: 14px;
    }
}

/* --------------------------------------------------------------------------
   6. Product details: photo, specification table, tabs and brochures
   -------------------------------------------------------------------------- */

.bm-product-head {
    margin-bottom: 40px;
}

/* Thumbnail strip on the left, main photo filling the rest. */
.bm-product-gallery {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.bm-product-thumbs {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
}

.bm-product-thumb {
    display: block;
    width: 62px;
    height: 62px;
    padding: 3px;
    background: #fff;
    border: 1px solid #dcdcdc;
    cursor: pointer;
    transition: border-color 300ms ease;
}

.bm-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bm-product-thumb:hover,
.bm-product-thumb.is-active {
    border-color: #157d7d;
}

.bm-product-figure {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    height: 460px;
    padding: 20px;
    background: #fff;
    border: 1px solid #dcdcdc;
    overflow: hidden;
    cursor: zoom-in;
}

.bm-product-figure img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 200ms ease;
}

/* The magnifier: the photo grows past the frame, which clips it, while the
   origin follows the pointer. */
.bm-product-figure.is-zooming img {
    transform: scale(2.2);
}

.bm-zoom-hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    font-size: 12px;
    line-height: 1;
    color: #69727d;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    padding: 6px 12px;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.bm-product-figure.is-zooming .bm-zoom-hint {
    opacity: 0;
}

/* Full screen viewer --------------------------------------------------- */

.bm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 30, 60, 0.92);
    padding: 40px 70px;
}

/* display: flex above would otherwise beat the browser's own
   [hidden] { display: none }, leaving the overlay stuck on screen. */
.bm-lightbox[hidden] {
    display: none;
}

.bm-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bm-lightbox-close,
.bm-lightbox-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a1e3c;
    background: #24b4b4;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 200ms ease;
}

.bm-lightbox-close {
    top: 22px;
    right: 26px;
    width: 42px;
    height: 42px;
    font-size: 26px;
    line-height: 1;
}

.bm-lightbox-nav {
    top: 50%;
    width: 48px;
    height: 48px;
    font-size: 34px;
    line-height: 1;
    transform: translateY(-50%);
}

.bm-lightbox-prev {
    left: 20px;
}

.bm-lightbox-next {
    right: 20px;
}

.bm-lightbox-close:hover,
.bm-lightbox-nav:hover {
    color: #fff;
    background: #0a1e3c;
}

.bm-lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    font-size: 14px;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 20px;
    padding: 5px 16px;
}

.bm-product-title {
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    color: #0a1e3c;
    margin: 0 0 18px;
}

/* Specification table --------------------------------------------------- */

.bm-spec-table {
    width: 100%;
    margin-bottom: 24px;
}

.bm-spec-table tr {
    border-bottom: 1px solid #e6e8ec;
}

/* One measurement given in two units is two rows but one fact, so the rule
   between them comes off and the pair sits together under its single label.
   The dividing line falls after the whole group instead. */
.bm-spec-table tr.bm-spec-joined {
    border-bottom: 0;
}

/* The continuation carries no label, so its value is nudged to sit under the
   one above rather than floating against an empty column. */
.bm-spec-table tr.bm-spec-cont th {
    padding-top: 0;
}

.bm-spec-table tr.bm-spec-cont td {
    padding-top: 0;
}

.bm-spec-table th,
.bm-spec-table td {
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    color: #333;
    padding: 9px 8px 9px 0;
    vertical-align: top;
}

.bm-spec-table th {
    width: 42%;
    font-weight: 600;
    color: #0a1e3c;
}

.bm-spec-table .bm-spec-unit {
    width: 26%;
    color: #69727d;
    white-space: nowrap;
}

.bm-product-cta {
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: var(--bm-btn);
    border-radius: 2px;
    padding: 10px 24px;
    transition: all 300ms ease;
}

.bm-product-cta:hover {
    color: #fff;
    background: #0a1e3c;
}

/* Tabs ------------------------------------------------------------------ */

.bm-product-tabs {
    margin-bottom: 10px;
}

.bm-tab-nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #24b4b4;
}

.bm-tab-nav > li {
    min-width: 200px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: #0a1e3c;
    padding: 10px 22px;
    margin-right: 4px;
    cursor: pointer;
    transition: background 300ms ease;
}

.bm-tab-nav > li.is-active,
.bm-tab-nav > li:hover {
    color: #ffffff;
    background: var(--bm-btn);
}

.bm-tab-panel {
    display: none;
    padding: 26px 0 6px;
}

.bm-tab-panel.is-active {
    display: block;
}

/* Brochure cards -------------------------------------------------------- */

.bm-catalogue-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #eceff3;
    padding: 16px;
    margin-bottom: 24px;
}

.bm-catalogue-cover {
    flex: 0 0 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    background: #f4f6f8;
    overflow: hidden;
}

.bm-catalogue-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-catalogue-icon {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #9aa3ae;
}

.bm-catalogue-body {
    flex: 1 1 auto;
    min-width: 0;
}

.bm-catalogue-body > h4 {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #0a1e3c;
    margin: 0 0 14px;
}

.bm-catalogue-body > a {
    display: inline-block;
    min-width: 150px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    background: var(--bm-btn);
    border-radius: 2px;
    padding: 7px 18px;
    transition: all 300ms ease;
}

.bm-catalogue-body > a:hover {
    color: #fff;
    background: #0a1e3c;
}

@media only screen and (max-width: 767px) {
    /* Thumbnails run under the photo where there is no room beside it. */
    .bm-product-gallery {
        flex-direction: column-reverse;
    }

    .bm-product-thumbs {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
    }

    .bm-product-figure {
        height: 300px;
        width: 100%;
        margin-bottom: 12px;
    }

    /* No hover on a touch screen, so the tap opens the full screen view. */
    .bm-product-figure.is-zooming img {
        transform: none;
    }

    .bm-zoom-hint {
        display: none;
    }

    .bm-lightbox {
        padding: 20px 12px 60px;
    }

    .bm-lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 28px;
    }

    .bm-tab-nav > li {
        min-width: 0;
        flex: 1 1 auto;
    }

    .bm-catalogue-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------------------
   7. Related products under a product page
   -------------------------------------------------------------------------- */

.bm-related-products {
    margin-top: 55px;
    padding-top: 35px;
    border-top: 1px solid #eceff3;
}

.bm-related-products > h3 {
    font-size: 24px;
    line-height: 32px;
    color: #0a1e3c;
    margin-bottom: 6px;
}

.bm-related-products > h3:after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #24b4b4;
    margin-top: 12px;
}

.bm-related-products > p {
    font-size: 15px;
    color: #69727d;
    margin-bottom: 26px;
}

@media only screen and (min-width: 992px) {
    .bm-product-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 20px;

        /* Sticky always opens a stacking context, whatever its z-index, so the
           third-level panel inside was sealed in with it: its z-index of 20
           counted only against its siblings in here, never against the product
           column, which is later in the document and so painted over it. The
           whole sidebar is lifted instead, which is the only level that can
           carry the panel out. Well under the header's 999. */
        z-index: 5;
    }
}