/*
@font-face {
	font-family: "Source Sans 3";
	src: local("Source Sans Pro"), url("/components/fonts/SourceSans3-VariableFont_wght.ttf");
}
@font-face {
	font-family: "Source Sans 3";
	src: local("Source Sans Pro"), url("/components/fonts/SourceSans3-Italic-VariableFont_wght.ttf");
	font-style: italic;
}
*/
:root {
    --bs-font-sans-serif: "Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-body-font-weight: 300;
    /*--bs-body-font-size: 1.13rem;     moved to .horizontal-section*/

    --north-brand-color: #4982CF;
    --north-brand-color-rgb: 73,130,207;

    --north-brand-color-dark-10: color-mix(in oklab, var(--north-brand-color), black 10%);
    --north-brand-color-dark-10-rgb: 62,112,180; /* rgb(from var(--color) r g b) */
    --north-brand-color-dark-20: color-mix(in oklab, var(--north-brand-color), black 20%);
    --north-brand-color-dark-20-rgb: 51,95,154;
    --north-brand-color-dark-30: color-mix(in oklab, var(--north-brand-color), black 30%);
    --north-brand-color-dark-30-rgb: 42,78,127;
    --north-brand-color-dark-40: color-mix(in oklab, var(--north-brand-color), black 40%);
    
    --north-brand-color-darker: var(--north-brand-color-dark-10);
    --north-brand-color-darker-rgb: var(--north-brand-color-dark-10-rgb);

    --north-brand-color-light-30: color-mix(in oklab, var(--north-brand-color), white 30%);
    --north-brand-color-light-30-rgb: 127,168,233;
    --north-brand-color-light-40: color-mix(in oklab, var(--north-brand-color), white 40%);
    --north-brand-color-light-40-rgb: 145,180,228;
    --north-brand-color-light-50: color-mix(in oklab, var(--north-brand-color), white 50%);
    
    --north-brand-bg: color-mix(in oklab, var(--north-brand-color), black 8%);

    --bs-primary: var(--north-brand-color-darker);
    --bs-primary-rgb: var(--north-brand-color-darker-rgb);
    --bs-primary-text-emphasis: color-mix(in oklab, var(--north-brand-color), black 60%);
    --bs-primary-bg-subtle: color-mix(in oklab, var(--north-brand-color), white 80%);
    --bs-primary-border-subtle: color-mix(in oklab, var(--north-brand-color), white 60%);
    /*
    --bs-link-color: var(--north-brand-color);
    --bs-link-color-rgb: var(--north-brand-color-rgb);
    --bs-link-decoration: none;
    --bs-link-hover-color: color-mix(in oklab, var(--north-brand-color), black 20%);
    */
    --bs-link-color: var(--north-brand-color-dark-10);
    --bs-link-color-rgb: var(--north-brand-color-dark-10-rgb);
    --bs-link-decoration: none;
    --bs-link-hover-color: var(--north-brand-color-dark-30);
    --bs-link-hover-color-rgb: var(--north-brand-color-dark-30-rgb);

    --north-green-rgb: 54,125,59;
    --north-green: #367d3b;

    --north-red-rgb: 207,45,41;
    --north-red: #cf2d29;

    --swiper-theme-color: var(--north-brand-color);
}

.h1, .h2, .h3, .h4, .h5, .h6, th,
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--bs-body-font-weight);
}
.fw-normal {
    font-weight: var(--bs-body-font-weight) !important;
}
a:not([class*="link-underline"]) {
    text-decoration: none;
}

.link-underline a {
    text-decoration: underline; /* dotted var(--north-brand-color) !important; */
    text-underline-offset: 0.125em;
}


/* pause animations when not hovering */
a .fa-bounce, a .fa-jello {
    animation-play-state: paused;
}
a:hover .fa-bounce, a:hover .fa-jello {
    animation-play-state: running;
}
/*
.form-select, .form-control {
    font-weight: var(--bs-body-font-weight);
}
*/
.dropdown-noarrow::after {
    display: none;
}

/* header navbar */
.navbar-block {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0;
    --bs-bg-opacity: 0.9;
    --bs-navbar-nav-link-padding-x: 0.8rem;
    background-color: rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity));
}
.navbar-block .navbar-nav {
    --bs-nav-link-color:var(--bs-link-color);
    --bs-nav-link-hover-color:var(--bs-link-hover-color);
    --bs-nav-link-font-weight: 400;

    --bs-nav-link-padding-x: 0.5rem;
    --bs-nav-link-padding-y: 1.2rem;
}
.offcanvas.show .navbar-nav,
.offcanvas.showing .navbar-nav {
    --bs-nav-link-padding-y: 0.8rem;
}
.navbar-block .nav-link {
    height: 100%;
}
.navbar-block .nav-link:hover {
    background-color: rgba(var(--bs-tertiary-color-rgb),0.075);
}
.navbar-block .nav-link.active {
    --bs-navbar-active-color:#fff;
    background-color: var(--bs-primary);
}

/* no-js override on small devices .navbar-expand-md */
@media (max-width: 767px) {
    .no-js .navbar-expand-md {
        flex-wrap: nowrap;
        justify-content: flex-start;

        & .navbar-toggler {
            display: none;
        }
        & .offcanvas {
            position: static;
            z-index: auto;
            /*
            flex-grow: 1;
            width: auto !important;
            */

            /* swipe to scroll */
            flex-grow: 0;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */


            height: auto !important;
            visibility: visible !important;
            background-color: transparent !important;
            border: 0 !important;
            transform: none !important;
            transition: none;
        }
        & .offcanvas-header {
            display: none;
        }
        & .offcanvas .offcanvas-body {


            padding: 0;
/*            
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y:visible;
*/            
        }
        & .navbar-nav {
            flex-direction: row;
            /* swipe to scroll 
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch; */ /* Smooth scrolling on iOS */
        }
        & .nav-item {
            flex-shrink: 0;
            white-space: nowrap; /* Prevents text from wrapping to a second line */
        }
    }
}




/* sticky headers */
@media (min-width: 768px) {    /* medium */
    html {
    /* allow for sticky header when using <a href="#section"> links
        = (--bs-navbar-nav-link-padding-y * 2) + --bs-body-line-height
        = (1.2rem x 2) + 1.5rem
        = 3.9rem; plus a bit extra

        scroll-padding-top: 4.5rem;
    */
        scroll-padding-top: 5.5rem;
    }
    .navbar-breadcrumb-sticky {
        position: sticky;
        top: 4rem;
        z-index: 1000;   /* keep behind dropdown */
    }
    .navbar-pagination-sticky {
        position: sticky;
        top: 3rem;    /* needs 4rem, this allows overlap on header */
        z-index: 1020;
    }
}

/* overflowing pagination on mobile devices: swipe to scroll */
@media (max-width: 576px) {
    .pagination {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        
    }
    .pagination .page-item {
        flex-shrink: 0;
        white-space: nowrap; /* Prevents text from wrapping to a second line */
    }
}


main {
    min-height: 80vh;
}
.no-height {
    min-height: initial;
}
footer {
    background-color: #2c3643;
    color: #ccc;
    font-size: 0.9em;
    padding: 3rem 0 1.5rem 0;
}
footer h5 {
    color: #f2f2f2;
}
footer a {
    color: var(--north-brand-color-light-30);
    transition: all .3s ease;
}
footer a:hover {
    color: var(--north-brand-color-light-50);
}

.horizontal-section {
    text-align: center;
    padding: 3rem 0;
    min-height: 10rem;
    --bs-body-font-size: 1.13rem;
    font-size: var(--bs-body-font-size);
}
.horizontal-section .row {
    --bs-gutter-y: 1.5rem;
}
/* Background colours */
.section-body {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    --section-text-color-rgb: var(--bs-dark-rgb);
    --section-bg-color-rgb: var(--bs-body-bg-rgb);

    --swiper-navigation-color: var(--bs-light);
    --swiper-pagination-color: var(--bs-white);
    --swiper-pagination-bullet-inactive-color: var(--bs-dark);

    --fa-inverse: var(--north-brand-color);

    & .btn {
        /* from btn-outline-primary */
        --bs-btn-color: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
        --bs-btn-disabled-color: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
    }
}
/*
.section-light {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    --section-text-color-rgb: var(--bs-dark-rgb);
    --section-bg-color-rgb: var(--bs-light-rgb);

    --swiper-navigation-color: var(--bs-light);
    --swiper-pagination-color: var(--bs-white);
    --swiper-pagination-bullet-inactive-color: var(--bs-dark);

    --fa-inverse: var(--north-brand-color);

    & .btn {
        // from btn-outline-primary 
        --bs-btn-color: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
        --bs-btn-disabled-color: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
    }
}

.section-dark {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    --section-text-color-rgb: var(--bs-white-rgb);
    --section-bg-color-rgb: var(--bs-dark-rgb);

    --swiper-navigation-color: var(--bs-light);
    --swiper-pagination-color: var(--bs-white);
    --swiper-pagination-bullet-inactive-color: var(--bs-gray-300);

    --fa-inverse: rgba(var(--section-text-color-rgb),var(--bs-text-opacity));   

    & .btn {
        // from btn-outline-light 
        --bs-btn-hover-color: #000;
        --bs-btn-hover-bg: #f8f9fa;
        --bs-btn-hover-border-color: #f8f9fa;
        --bs-btn-focus-shadow-rgb: 248,249,250;
        --bs-btn-active-color: #000;
        --bs-btn-active-bg: #f8f9fa;
        --bs-btn-active-border-color: #f8f9fa;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #f8f9fa;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #f8f9fa;
        --bs-gradient: none;
        --bs-btn-color: #f8f9fa;
        --bs-btn-border-color: #f8f9fa;
    }
}
.section-red {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    --section-text-color-rgb: var(--bs-white-rgb);
    --section-bg-color-rgb: var(--north-red-rgb);

    --swiper-navigation-color: var(--bs-light);
    --swiper-pagination-color: var(--bs-white);
    --swiper-pagination-bullet-inactive-color: var(--bs-dark);

    --fa-inverse: rgba(var(--section-text-color-rgb),var(--bs-text-opacity));   

    & .btn {
        // from btn-outline-light 
        --bs-btn-hover-color: #000;
        --bs-btn-hover-bg: #f8f9fa;
        --bs-btn-hover-border-color: #f8f9fa;
        --bs-btn-focus-shadow-rgb: 248,249,250;
        --bs-btn-active-color: #000;
        --bs-btn-active-bg: #f8f9fa;
        --bs-btn-active-border-color: #f8f9fa;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #f8f9fa;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #f8f9fa;
        --bs-gradient: none;
        --bs-btn-color: #f8f9fa;
        --bs-btn-border-color: #f8f9fa;
    }
}
.section-green {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    --section-text-color-rgb: var(--bs-white-rgb);
    --section-bg-color-rgb: var(--north-green-rgb);

    --swiper-navigation-color: var(--bs-light);
    --swiper-pagination-color: var(--bs-white);
    --swiper-pagination-bullet-inactive-color: var(--bs-dark);

    --fa-inverse: rgba(var(--section-text-color-rgb),var(--bs-text-opacity));   

    & .btn {
        // from btn-outline-light 
        --bs-btn-hover-color: #000;
        --bs-btn-hover-bg: #f8f9fa;
        --bs-btn-hover-border-color: #f8f9fa;
        --bs-btn-focus-shadow-rgb: 248,249,250;
        --bs-btn-active-color: #000;
        --bs-btn-active-bg: #f8f9fa;
        --bs-btn-active-border-color: #f8f9fa;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #f8f9fa;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #f8f9fa;
        --bs-gradient: none;
        --bs-btn-color: #f8f9fa;
        --bs-btn-border-color: #f8f9fa;
    }
}
.section-blue {
    --bs-bg-opacity: 1;
    --bs-text-opacity: 1;
    --section-text-color-rgb: var(--bs-white-rgb);
    --section-bg-color-rgb: var(--north-brand-color-darker-rgb);

    --swiper-navigation-color: var(--bs-light);
    --swiper-pagination-color: var(--bs-white);
    --swiper-pagination-bullet-inactive-color: var(--bs-dark);

    --fa-inverse: rgba(var(--section-text-color-rgb),var(--bs-text-opacity));   

    & .btn {
        // from btn-outline-light 
        --bs-btn-hover-color: #000;
        --bs-btn-hover-bg: #f8f9fa;
        --bs-btn-hover-border-color: #f8f9fa;
        --bs-btn-focus-shadow-rgb: 248,249,250;
        --bs-btn-active-color: #000;
        --bs-btn-active-bg: #f8f9fa;
        --bs-btn-active-border-color: #f8f9fa;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #f8f9fa;
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: #f8f9fa;
        --bs-gradient: none;
        --bs-btn-color: #f8f9fa;
        --bs-btn-border-color: #f8f9fa;
    }
}
*/
.image-background .section-color {
    --bs-bg-opacity: 0.85;
}
.image-background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 490px;
    position: relative;
/*
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
*/
}
.image-background.focus-top {
    background-position: top center;
}
.image-background.focus-bottom {
    background-position: bottom center;
}
/* now default
.image-background.focus-center {
    background-position: center;
}
*/
.image-background.focus-zoom {
    background-position: center;
    height: 330px;
}
.image-background:not(.scroll-icon) [class*="container"] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.image-background.scroll-icon {
    /* display: flex; */
}
.image-background.scroll-icon [class*="container"] {
    /* flex: 1; */
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    & > * {
        grid-column: 1;
        grid-row: 1;
    }
    & .section-color {
        align-self: center;
    }
    & .nbt-hide-on-scroll {
        --bs-bg-opacity: 0.85;
        align-self: end;
        justify-self: center;
        position: sticky;
        z-index: 1020;
        /* margin-top: auto; */
        bottom: .5rem;
        cursor: pointer;
    }
}

.section-color {
    background-color: rgba(var(--section-bg-color-rgb),var(--bs-bg-opacity));
    color: rgba(var(--section-text-color-rgb),var(--bs-text-opacity));
    /* text-decoration-color: rgba(var(--section-text-color-rgb),var(--bs-text-opacity)); */
}
.section-icon-color {
    color: rgba(var(--section-bg-color-rgb),var(--bs-bg-opacity));
}

.background-cityscape { background-image: image-set(
    url(/img/section/cityscape_576w.webp) 1x,
    url(/img/section/cityscape_1152w.webp) 2x
); }
.background-products { background-image: image-set(
    url(/img/section/north_product_576w.webp) 1x,
    url(/img/section/north_product_1152w.webp) 2x
); }
.background-commander { background-image: image-set(
    url(/img/section/north_commander_576w.webp) 1x,
    url(/img/section/north_commander_1152w.webp) 2x
); }
.background-zip { background-image: image-set(
    url(/img/section/north_zip_576w.webp) 1x,
    url(/img/section/north_zip_1152w.webp) 2x
); }
.background-obsys { background-image: image-set(
    url(/img/section/north_obsys_576w.webp) 1x,
    url(/img/section/north_obsys_1152w.webp) 2x
); }
.background-training { background-image: image-set(
    url(/img/section/learning_576w.webp) 1x,
    url(/img/section/learning_1152w.webp) 2x
); }
.background-partners { background-image: image-set(
    url(/img/section/partners_576w.webp) 1x,
    url(/img/section/partners_1152w.webp) 2x
); }
.background-brighton { background-image: image-set(
    url(/img/section/brighton_576w.webp) 1x,
    url(/img/section/brighton_1152w.webp) 2x
); }
.background-teamwork { background-image: image-set(
    url(/img/section/teamwork_576w.webp) 1x,
    url(/img/section/teamwork_1152w.webp) 2x
); }
.background-open { background-image: image-set(
    url(/img/section/open_576w.webp) 1x,
    url(/img/section/open_1152w.webp) 2x
);}
.background-error-404 {         background-image: url(/img/section/error404_xs.jpg); }
.background-error-500 {         background-image: url(/img/section/error500_xs.jpg); }
.background-error-503 {         background-image: url(/img/section/error503_xs.jpg); }

@media (min-width: 576px) {

    .background-cityscape { background-image: image-set(
        url(/img/section/cityscape_768w.webp) 1x,
        url(/img/section/cityscape_1536w.webp) 2x
    ); }
    .background-products { background-image: image-set(
        url(/img/section/north_product_768w.webp) 1x,
        url(/img/section/north_product_1536w.webp) 2x
    ); }
    .background-commander { background-image: image-set(
        url(/img/section/north_commander_768w.webp) 1x,
        url(/img/section/north_commander_1536w.webp) 2x
    ); }
    .background-zip { background-image: image-set(
        url(/img/section/north_zip_768w.webp) 1x,
        url(/img/section/north_zip_1536w.webp) 2x
    ); }
    .background-obsys { background-image: image-set(
        url(/img/section/north_obsys_768w.webp) 1x,
        url(/img/section/north_obsys_1536w.webp) 2x
    ); }
    .background-training { background-image: image-set(
        url(/img/section/learning_768w.webp) 1x,
        url(/img/section/learning_1536w.webp) 2x
    ); }
    .background-partners { background-image: image-set(
        url(/img/section/partners_768w.webp) 1x,
        url(/img/section/partners_1536w.webp) 2x
    ); }
    .background-brighton { background-image: image-set(
        url(/img/section/brighton_768w.webp) 1x,
        url(/img/section/brighton_1536w.webp) 2x
    ); }
    .background-teamwork { background-image: image-set(
        url(/img/section/teamwork_768w.webp) 1x,
        url(/img/section/teamwork_1536w.webp) 2x
    ); }
    .background-open { background-image: image-set(
        url(/img/section/open_768w.webp) 1x,
        url(/img/section/open_1536w.webp) 2x
    ); }
}

@media (min-width: 768px) {
    .parallax {
        background-attachment: fixed;
    }
    .image-background {
        height: 600px;
    }
    .image-background.focus-zoom {
        height: 400px;
    }
    .background-cityscape { background-image: image-set(
        url(/img/section/cityscape_1200w.webp) 1x,
        url(/img/section/cityscape_1800w.webp) 1.5x,
        url(/img/section/cityscape_2400w.webp) 2x
    );}
    .background-products { background-image: image-set(
        url(/img/section/north_product_1200w.webp) 1x,
        url(/img/section/north_product_1800w.webp) 1.5x,
        url(/img/section/north_product_2400w.webp) 2x
    );}
    .background-commander { background-image: image-set(
        url(/img/section/north_commander_1200w.webp) 1x,
        url(/img/section/north_commander_1800w.webp) 1.5x,
        url(/img/section/north_commander_2400w.webp) 2x
    );}
    .background-zip { background-image: image-set(
        url(/img/section/north_zip_1200w.webp) 1x,
        url(/img/section/north_zip_1800w.webp) 1.5x,
        url(/img/section/north_zip_2400w.webp) 2x
    );}
    .background-obsys { background-image: image-set(
        url(/img/section/north_obsys_1200w.webp) 1x,
        url(/img/section/north_obsys_1800w.webp) 1.5x,
        url(/img/section/north_obsys_2400w.webp) 2x
    );}
    .background-training { background-image: image-set(
        url(/img/section/learning_1200w.webp) 1x,
        url(/img/section/learning_1800w.webp) 1.5x,
        url(/img/section/learning_2400w.webp) 2x
    );}
    .background-partners { background-image: image-set(
        url(/img/section/partners_1200w.webp) 1x,
        url(/img/section/partners_1800w.webp) 1.5x,
        url(/img/section/partners_2400w.webp) 2x
    );}
    .background-brighton { background-image: image-set(
        url(/img/section/brighton_1200w.webp) 1x,
        url(/img/section/brighton_1800w.webp) 1.5x,
        url(/img/section/brighton_2400w.webp) 2x
    );}
    .background-teamwork { background-image: image-set(
        url(/img/section/teamwork_1200w.webp) 1x,
        url(/img/section/teamwork_1800w.webp) 1.5x,
        url(/img/section/teamwork_2400w.webp) 2x
    );}
    .background-open { background-image: image-set(
        url(/img/section/open_1200w.webp) 1x,
        url(/img/section/open_1800w.webp) 1.5x,
        url(/img/section/open_2400w.webp) 2x
    );}
    .background-error-404 {     background-image: url(/img/section/error404_sm.jpg); }
    .background-error-500 {     background-image: url(/img/section/error500_sm.jpg); }
    .background-error-503 {     background-image: url(/img/section/error503_sm.jpg); }
}

@media (min-width: 1200px) {
    .image-background {
        height: 700px;
    }
    .image-background.focus-zoom {
        height: 490px;
    }

    .background-cityscape { background-image: image-set(
        url(/img/section/cityscape_1400w.webp) 1x,
        url(/img/section/cityscape_2100w.webp) 1.5x,
        url(/img/section/cityscape_2800w.webp) 2x
    );}
    .background-products { background-image: image-set(
        url(/img/section/north_product_1400w.webp) 1x,
        url(/img/section/north_product_2100w.webp) 1.5x,
        url(/img/section/north_product_2800w.webp) 2x
    );}
    .background-commander {  background-image: image-set(
        url(/img/section/north_commander_1400w.webp) 1x,
        url(/img/section/north_commander_2100w.webp) 1.5x,
        url(/img/section/north_commander_2800w.webp) 2x
    );}
    .background-zip { background-image: image-set(
        url(/img/section/north_zip_1400w.webp) 1x,
        url(/img/section/north_zip_2100w.webp) 1.5x,
        url(/img/section/north_zip_2800w.webp) 2x
    );}
     .background-obsys { background-image: image-set(
        url(/img/section/north_obsys_1400w.webp) 1x,
        url(/img/section/north_obsys_2100w.webp) 1.5x,
        url(/img/section/north_obsys_2800w.webp) 2x
    );}
    .background-training { background-image: image-set(
        url(/img/section/learning_1400w.webp) 1x,
        url(/img/section/learning_2100w.webp) 1.5x,
        url(/img/section/learning_2800w.webp) 2x
    );}
    .background-partners { background-image: image-set(
        url(/img/section/partners_1400w.webp) 1x,
        url(/img/section/partners_2100w.webp) 1.5x,
        url(/img/section/partners_2800w.webp) 2x
    );}
    .background-brighton { background-image: image-set(
        url(/img/section/brighton_1400w.webp) 1x,
        url(/img/section/brighton_2100w.webp) 1.5x,
        url(/img/section/brighton_2800w.webp) 2x
    );}
    .background-teamwork { background-image: image-set(
        url(/img/section/teamwork_1400w.webp) 1x,
        url(/img/section/teamwork_2100w.webp) 1.5x,
        url(/img/section/teamwork_2800w.webp) 2x
    );}
    .background-open { background-image: image-set(
        url(/img/section/open_1400w.webp) 1x,
        url(/img/section/open_2100w.webp) 1.5x,
        url(/img/section/open_2800w.webp) 2x
    );}
    .background-error-404 {     background-image: url(/img/section/error404_lg.jpg);  }
    .background-error-500 {     background-image: url(/img/section/error500_lg.jpg); }
    .background-error-503 {     background-image: url(/img/section/error503_lg.jpg); }
}


@media (min-width: 1400px) {

    .background-cityscape { background-image: image-set(
        url(/img/section/cityscape_1920w.webp) 1x,
        url(/img/section/cityscape_2880w.webp) 1.5x,
        url(/img/section/cityscape_3840w.webp) 2x
    );}
    .background-products { background-image: image-set(
        url(/img/section/north_product_1920w.webp) 1x,
        url(/img/section/north_product_2880w.webp) 1.5x,
        url(/img/section/north_product_3840w.webp) 2x
    );}
    .background-commander { background-image: image-set(
        url(/img/section/north_commander_1920w.webp) 1x,
        url(/img/section/north_commander_2880w.webp) 1.5x,
        url(/img/section/north_commander_3840w.webp) 2x
    );}
    .background-zip { background-image: image-set(
        url(/img/section/north_zip_1920w.webp) 1x,
        url(/img/section/north_zip_2880w.webp) 1.5x,
        url(/img/section/north_zip_3840w.webp) 2x
    );}
    .background-obsys { background-image: image-set(
        url(/img/section/north_obsys_1920w.webp) 1x,
        url(/img/section/north_obsys_2880w.webp) 1.5x,
        url(/img/section/north_obsys_3840w.webp) 2x
    );}
    .background-training { background-image: image-set(
        url(/img/section/learning_1920w.webp) 1x,
        url(/img/section/learning_2880w.webp) 1.5x,
        url(/img/section/learning_3840w.webp) 2x
    );}
    .background-partners { background-image: image-set(
        url(/img/section/partners_1920w.webp) 1x,
        url(/img/section/partners_2880w.webp) 1.5x,
        url(/img/section/partners_3840w.webp) 2x
    );}
    .background-brighton { background-image: image-set(
        url(/img/section/brighton_1920w.webp) 1x,
        url(/img/section/brighton_2880w.webp) 1.5x,
        url(/img/section/brighton_3840w.webp) 2x
    );}
    .background-teamwork { background-image: image-set(
        url(/img/section/teamwork_1920w.webp) 1x,
        url(/img/section/teamwork_2880w.webp) 1.5x,
        url(/img/section/teamwork_3840w.webp) 2x
    );}
    .background-open { background-image: image-set(
        url(/img/section/open_1920w.webp) 1x,
        url(/img/section/open_2880w.webp) 1.5x,
        url(/img/section/open_3840w.webp) 2x
    );}


}



.swiper {
    --swiper-pagination-bottom: 0px;
    /* other vars in .horizontal-section and .section-[color] */
}
/* format while swiper.js loading - stops FOUC */
.swiper:not([class*="swiper-initialized"]) {
    & .swiper-wrapper {
        display: flex;
        margin: calc(-1 * var(--bs-gutter-y)) calc(-.5 * var(--bs-gutter-x)) 0 calc(-.5 * var(--bs-gutter-x));

        flex-wrap: nowrap;
        overflow: auto hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    & .swiper-wrapper > * {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;

        white-space: nowrap; /* Prevents text from wrapping to a second line */
        padding-right: 1rem;
    }
    @media (min-width: 768px) {
        & .swiper-wrapper > * {
            width: 33.33333333%;
        }
    }
}
/* fallback if no js or load fails 
.swiper-failed .swiper-wrapper,
.no-js .swiper-wrapper {
    flex-wrap: wrap;
}
*/

.text-brand {
    color: var(--north-brand-color);
}
.badge {
    --bs-badge-font-weight: 400;
}
.dropdown-badge {
    font-size: var(--bs-body-font-size);
}
.no-js a[data-filter-category] {    /* no-js fallback, disable clicking driver list filter badges */
    pointer-events: none;
    cursor: default;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--north-brand-color-dark-30);
    --bs-btn-hover-border-color: var(--north-brand-color-dark-40);
    --bs-btn-focus-shadow-rgb: var(--north-brand-color-dark-30-rgb);
    --bs-btn-active-bg: var(--north-brand-color-dark-40);
    --bs-btn-active-border-color: var(--north-brand-color-dark-40);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* list-group - override for hidden items */
.list-group-item:not(.d-none) {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-top-width: var(--bs-list-group-border-width);
}
.list-group-item:not(.d-none) ~ .list-group-item:not(.d-none) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-width: 0;
}

.card {
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
}
.card-img-top {
   /*  aspect-ratio: 9/5;  prevents FOUC - set image width and height instead */
    height: auto;
    object-fit: cover;
}

.nav-pills {
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}
.pagination {
    --bs-pagination-padding-x: 1rem;
    --bs-pagination-padding-y: 0.5rem;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-border-color: var(--bs-primary);
    --bs-pagination-hover-border-color: var(--north-brand-color-dark-30);
/*
    --bs-pagination-hover-color: var(--north-brand-color);
    --bs-pagination-hover-bg: var(--north-brand-color);
*/    
    font-weight:400;
}
.pagination .page-item {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    /* can't get this to vertically centre */
}

.accordion {
    --bs-accordion-active-bg: inherit;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
}
.accordion-button {
    font-weight: var(--bs-body-font-weight); 
    /* font-size: var(--bs-body-font-size);    use fs-4 */
}
/*
.accordion-header.text-bg-primary {
    --bs-accordion-btn-bg: RGBA(var(--bs-primary-rgb),var(--bs-bg-opacity,1));
    --bs-accordion-btn-color: #fff;
    --bs-accordion-active-bg: RGBA(var(--bs-primary-rgb),var(--bs-bg-opacity,1));
    --bs-accordion-active-color: #fff;
    // copied icon from bs, to change stroke color to #fff 
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon: var(--bs-accordion-btn-active-icon);
}
*/
.accordion-header.text-bg-light {
    --bs-accordion-btn-bg: RGBA(var(--bs-light-rgb),var(--bs-bg-opacity,1));
    --bs-accordion-btn-color: #000;
    --bs-accordion-active-bg: RGBA(var(--bs-light-rgb),var(--bs-bg-opacity,1));
    --bs-accordion-active-color: #000;
}
.compact p {
    margin-bottom: 0.25rem;
}
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
}
.accordion-body.divider > .row {
    padding-bottom: 1.5rem;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
@media (min-width: 768px) {
    /* Adds a subtle dot between summary items only when side-by-side on desktop */
    .separator-md-dot:not(:last-child)::after {
        content: "•";
        margin-left: 1rem;
        color: var(--bs-tertiary-color);
    }
}

/* override .accordion if no-js */
.no-js .accordion .collapse:not(.show) {
    display: inherit;
}
.no-js .accordion-button.collapsed {
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
@media print {
    .accordion .collapse:not(.show) {
        display: inherit;
    }
    .accordion-button.collapsed {
        box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
    }
}

.list-hanging {
    text-indent: 1.70rem hanging;
}
.list-space li+li {
    margin-top: 1rem;
}

/* map InfoWindow */
.north-logo {
    width: 75px;
    height: 40px;
    margin: 10px 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 75px 40px;
    background-image: url('/img/logo/north.png');
}

/* driver manual - portrait */
.pdf-page {
    width: 100%;
    max-width: 714px;
    height: auto;
    /*
    width: auto;
    max-height: 90vh;
    */
}
.pdf-thumb {
    width: 100%;
    height: 7lh;
    object-fit: cover;
    object-position: 20% 50%;
}
.alert.breaking-changes {
    --bs-alert-padding-y: 0.5rem;
    display: flex;
    align-items: flex-start;
    border-left-width: 0.25rem;
}
.alert.breaking-changes .fa-circle-exclamation {
   margin-right: .5rem;
   margin-top: .25rem 
}
.text-bg-alert-primary {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.alert.border-left-success {
    border-left: 0.25rem solid var(--bs-success);
}

/* md articles */
.article > p:first-of-type {      /*  */
    font-size: 1.25rem;     /* .fs-5 */
}
.article img {
    max-width: 100%;        /* .img-fluid */
    height: auto;
}

.permalink a {
    visibility: hidden;
}
.js .permalink:hover {
    & a {
        visibility: initial;
    }
    & .permalink-icon {
        --bs-text-opacity: 1;
        color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity));
    }
    & .permalink-icon:hover {
        color: rgb(var(--bs-link-hover-color-rgb));
    }
}
/*
.pdf-page-sm {
    width: 100%;
    max-width: 297px;
    height: auto;
}
.pdf-page-sm-landscape {
    width: 100%;
    max-width: 420px;
    height: auto;
}
*/

/* driver list */
/*
.driver-list {
    table-layout: fixed;
    width: 100%;
}
.driver-list td:first-child {
    width: 70%;
}
.driver-list td:nth-child(3) {
    display: none;
}

@media (min-width: 768px) {
    .driver-list td:first-child {
        width: 60%;
    }
    .driver-list td:nth-child(3) {
        display: table-cell;
    }
}
*/

/* responsive stack - based on bs hstack and vstack */
/*
.rstack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch;
}
@media (min-width: 768px) {
    .rstack {
        align-items: center;
        flex-direction: row;
    }
}
*/

/* navpage - article format */
.navpage-wrapper {
    display: grid;
    /*
    gap: 1.5rem;
    */
    column-gap:1.5rem;
    grid-template-areas: "intro" "toc" "content";
    grid-template-rows: auto 1fr;
}
.navpage-intro {
    grid-area: intro;
}
.navpage-content {
    grid-area: content;
}
.navpage-toc {
    grid-area: toc;
}
/* can use navpage-toc within bs row/column grid */
.navpage-toc-title {
    display: none;
}

@media (min-width: 768px) { /* medium */
    .navpage-toc-title {
        display: block;
    }
    .navpage-toc-toggle {
        display: none;
    }
    .navpage-toc-collapse {
        display: block !important;
    }
}
@media (min-width: 992px) { /* large */
    .navpage-wrapper {
        grid-template-areas: "intro   toc" "content toc";
        grid-template-columns: 4fr 1fr;
        grid-template-rows: auto 1fr;
    }
    .navpage-toc {
        position: -webkit-sticky;
        position: sticky;
        top: 5.5rem;  /* see also scroll-padding-top */
        right: 0;
        z-index: 2;
        height: calc(100vh - 7rem);
        overflow-y: auto;
    }
    .navbar-block .nav-link {
        --bs-nav-link-color:var(--bs-link-color);
        --bs-nav-link-hover-color:var(--bs-link-hover-color);
    }
    .navpage-toc .nav-link:hover {
        background-color: rgba(var(--bs-tertiary-color-rgb),0.075);
    }
    .navpage-toc .nav-link.active {
        --bs-nav-link-color:#fff;
        --bs-nav-link-hover-color:#fff;
        background-color: var(--bs-primary);
    }

}

/* User authenticated display */
.show-auth {
    display: none;
}
.user-auth .show-auth {
    display: initial;
}
.user-auth .show-noauth {
    display: none;
}


/* screen override */
@media screen {
    .no-screen {
        display: none;
    }
}

/* print override */
@media print {
    body {
        position: static;
        min-height: auto;
    }
    footer,
    #controls-find,
    #navbar-menu,
    .navbar-toggler,
    .dropdown,
    .popover,
    .pagination,
    .swiper-pagination,
    .swiper-button-next,
    .swiper-button-prev,
    .no-print,
    button,
    a[role="button"] {
        display: none;
    }
    main {
        margin: 0 !important;
        padding: 0;
        width: 100% !important;
    }
    .container,
    .container-xl {
        max-width: none;
    }
    .navpage-wrapper {
        display: block;
    }
    .navpage-toc {
        display: none !important;
    }
    h1, h2, h3, h4, h5 {
        break-before: auto;
        break-after: avoid;
    }
    ul, ol, img, svg, .card, .list-group-item {
        break-inside: avoid;
    }
    .page-break-before {
        break-before: page;
    }
    .page-break-after {
        break-after: page;
    }
    .h-100 {
        height: auto;
    }
    .image-background {
        break-inside: avoid;
        print-color-adjust: exact;
    }
    a.print-href::after {
        content: " [" attr(href) "]";
    }
    .accordion-header {
        break-after: avoid;
    }
    .swiper-wrapper {
        display: flex;
        flex-wrap: wrap;
        margin: calc(-1 * var(--bs-gutter-y)) calc(-.5 * var(--bs-gutter-x)) 0 calc(-.5 * var(--bs-gutter-x));
    }
    .swiper-wrapper > * {
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        margin: var(--bs-gutter-y) 0 0 0 !important;
    }
    .swiper-slide {
        break-inside: avoid;
        break-after: auto;
    }
    @media (min-width: 768px) {
        .swiper-wrapper > * {
            width: 33.33333333% !important;
        }
    }
}