:root {

    /* UI element colours */
    --colour-background: black;
    --colour-body: white;
    --colour-header: rgba(255,255,255,1.0);
    --colour-footer: rgba(255,255,255,1.0);
    --colour-text: #021F2E;
    --colour-primaryaccents: #1D4A5C; 
    --colour-secondaryaccents: #38838F;
    --colour-tertiaryaccents: #B20109;
    --colour-navMenu: rgba(255,255,255,0.85);
    --colour-navMobileSubMenu: rgba(56,131,143,0.85);
    --colour-navWideScreenSubMenu: rgba(255,255,255,0.85);
    /* Viewport Height Variable */
    --banner-height: clamp(4.75rem, 6rem, 14vh);
}

/* DEBUGGING STYLES -----------------------------------------*/
/* ----------------------------------------------------------*/
.debug_border-yellow {
    border: 1px solid yellow;
}

.debug_border-green {
    border: 1px solid green;
}

.debug_border-blue {
    border: 1px solid blue;
}

.debug_border-red {
    border: 1px solid red;
}

.debug_border-black {
    border: 1px solid black;
}

.debug_border-purple {
    border: 1px solid purple;
}

/* PRINTED PAGE MEDIA STYLE -------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/
@media only print {

} /* END:  PRINTED PAGE MEDIA STYLE ---------------------------------------------- */

/* PREFERS REDUCED MOTION ---------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  * {
		/*CSS transitions*/
		-o-transition-property: none !important;
		-moz-transition-property: none !important;
		-ms-transition-property: none !important;
		-webkit-transition-property: none !important;
		transition-property: none !important;
		/*CSS transforms*/
		-o-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
  }
}

/* BASELINE STYLE FOR MOBILE: 300 px to 575px -------------------------------------*/
/*---------------------------------------------------------------------------------*/
svg#svg-inline {
    display: none;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

:root {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

html {
    box-sizing: border-box;
    width: clamp(275px,100%,100%);
    height: auto;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

/*BODY ---------------------------------*/
/*--------------------------------------*/
body {
    position: relative;
    box-sizing: border-box;
    width: clamp(275px,100%,100%);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    scroll-behavior: smooth;
}

.body-block-padding {
    padding-left: 4vw;
    padding-right: 4vw;
    transition: padding ease 500ms;
}

/*HEADER -------------------------------*/
/*--------------------------------------*/
header.banner {
    position: relative;
    box-sizing: border-box;
    width: clamp(275px,100%,100%);
    height:  clamp(4.75rem, 6rem, 14vh);
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    flex: 0 0 auto;
    justify-content: space-between;
    align-content: center;
}

.header-block-padding {
    padding-left: 4vw;
    padding-right: 2vw;
    transition: padding ease 500ms;
}

#flex-header {
    position: fixed;
    top: 0%;
    transition: top 0.5s;
    z-index: 1;
    box-sizing: border-box;
    width: clamp(275px,100%,100%);
    margin: 0;
    /*GRID DEFINITION*/
    display: grid;
    grid:   "logohdr navhdr" minmax(4.75rem, 20vw)
        /   auto auto;    
}

.scroll {
    top: -100% !important;
    transition: top 0.5s;
}

/* LOGO ----------------------------------------------------*/
#flex-header>.link-logo-header {
    position: relative;
    grid-area: logohdr;
    justify-self: start;
    align-self: center;
    justify-items: start;
}

.logo-header {
    display: inline-block;
    position: relative;
    height:  clamp(3.15rem, 3.5rem, 10vh);
    justify-self: start;
    margin: 0;
    padding: 0;
    z-index: +20;
}

/* JAVASCRIPT ENHANCED MENU BUTTON -------------------------*/
#flex-header>.menu-button {
    position: relative;
    grid-area: navhdr;
    justify-self: end;
    align-self: end;
    justify-content: end;
    box-sizing: border-box;
    width: clamp(75px,5rem,20vw);
    height: 100%;
    margin: auto 0;
    padding-right: 0;
    background: none;
    border: none;      
    z-index: +50;
    cursor: pointer;
}

.menu-button-label {
    display: block;
    position: relative;
    margin: auto;
    padding-right: 0;
    cursor: pointer;
}

.menu-button-arrow {
    display: block;
    position: relative;
    height: 1.85rem;
    margin: auto;
    padding-right: 0;
    cursor: pointer;
    transition: all ease 500ms;
}

#flex-header>.css-only-menu-button {
    position: relative;
    grid-area: navhdr;
    justify-self: end;
    align-self: end;
    justify-content: end;
    box-sizing: border-box;
    width: clamp(75px,5rem,20vw);
    height: 100%;
    margin: auto 0;
    padding-right: 0;
    background: none;
    border: none;      
    z-index: +50;
    cursor: pointer;
}

.css-only-menu-button-label {
    display: block;
    position: relative;
    margin: auto;
    padding-right: 0;
    cursor: pointer;
}

.css-only-menu-button-arrow {
    display: block;
    position: relative;
    height: 1.85rem;
    margin: auto;
    padding-right: 0;
    cursor: pointer;
}

#flex-header>.navigation {
    grid-area: navhdr;
    align-self: start;
    align-items: start;
}

/* NAVIGATION ---------------------------*/
/*---------------------------------------*/
button#skip-navigation-button {
    padding: 0.1rem 1rem;
}

.navigation {
    position: absolute;
    top: 100%;
    right: 0%;
    height: 0;
    overflow: hidden;
    display: inline-block;
    box-sizing: border-box;
    width: max-content;
    opacity: 0;
    z-index: -1;
}

@media only screen and (max-height: 510px){
    #navigation-list {
        position: relative;
        max-height: calc(100vh - var(--banner-height));
        overflow-y: scroll;
        -webkit-overflow-scrolling:touch;
    }
}

.navigation ul{
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.navigation li {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: auto;
}

.navigation a{
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 0.75rem 1.75rem;
    width: auto;
}

.navigation .about-button {
    box-sizing: border-box;
    display: block;
    background: none;
    border: none;
    margin: 0;
    margin-right: auto;
    padding: 0.75rem 1.75rem;
    width: 100%;
}

.navigation #about-link {
    box-sizing: border-box;
    display: block;
    background: none;
    border: none;
    margin: 0;
    margin-right: auto;
    padding: 0.75rem 1.75rem;
    width: 100%;
}
    
.navigation span#text {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
}

.navigation-submenu
{   
    transition: all ease 500ms;
    width: auto;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

img#css-sub-menu-arrow {
    display: inline-block;
    height: 0.9rem;
    padding-left: 0.25rem;
    padding-top: 0.15rem;
    padding-bottom: 0;
}

img#sub-menu-arrow {
    display: inline-block;
    height: 0.9rem;
    padding-left: 0.25rem;
    padding-top: 0.15rem;
    padding-bottom: 0;
}

.navigation button {
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 0.75rem 1.75rem;
    width: auto;
    cursor: pointer;
    }

.navigation-submenu a
{   
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.navigation-submenu a:hover {
    border-bottom: 0.2rem solid var(--colour-primaryaccents);
}

.navigation-submenu a:focus {
    color: var(--colour-primaryaccents);
    border-bottom: 0.2rem solid var(--colour-tertiaryaccents);
}

/* OPEN NAVIGATION MENU (CSS-ONLY MENU BUTTON) -------------------*/
/*----------------------------------------------------------------*/
button.css-only-menu-button:focus-within+.navigation#navigation {
    display: block !important;
    opacity: 1 !important;
    z-index: +50 !important;
    height: auto !important;
    overflow: visible !important;
    transition: all ease 500ms !important;
}

nav.navigation#navigation:focus-within {
    display: block !important; 
    opacity: 1 !important;
    z-index: +50 !important;
    height: auto !important;
    overflow: visible !important;
    transition: all ease 500ms !important;
}

/* OPEN NAVIGATION MENU (JAVASCRIPT-ENHANCED MENU BUTTON) --------*/
/*----------------------------------------------------------------*/
.navigation-open {
    transition: all ease 500ms;
    opacity: 1;
    z-index: +50;
    height: auto;
    overflow: visible;
}

.menu-button-arrow-open {
    transition: all ease 500ms;
    transform: rotateZ(180deg);
    transform-origin: center;
    transform-style: preserve-3d;
}

/* OPEN ABOUT MENU (CSS-ONLY ABOUT MENU BUTTON) -------------------*/
/*----------------------------------------------------------------*/
.navigation li#about:focus-within .navigation-submenu#about-submenu, 
.navigation button#about-link:focus-within ~ .navigation-submenu#about-submenu {
    transition: all ease 500ms;
    width: auto;
    height: auto;
    opacity: 1;
    z-index: +50;
    overflow: visible;
}

/* OPEN ABOUT MENU (JAVASCRIPT-ENHANCED ABOUT MENU BUTTON) --------*/
/*----------------------------------------------------------------*/
.submenu-open { /* Class used to display sub-menu via javascript event handlers. */
    transition: all ease 500ms;
    height: auto;
    opacity: 1;
    z-index: +50;
    overflow: visible;
}

.placeholder_headerBanner {
    height: clamp(4.75rem, 6rem, 14vh);
    width: 100%;
    background-color: white;
}

/*MAIN BOX -----------------------------*/
/*--------------------------------------*/
main {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: max-content;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 auto;
    align-items: center;
    justify-content: start;
}

/*FOOTER BOX ---------------------------*/
/*--------------------------------------*/
footer.page-footer {
    position: relative;
    box-sizing: border-box;
    width: clamp(275px,100%,100%);
    height: auto;
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
}

#flex-footer {
    position: relative;
    box-sizing: border-box;
    width: clamp(275px,100%,100%);
    margin: 0;
    /*GRID DEFINITION*/
    display: grid;
    grid: "breadcrumbnav breadcrumbnav"
            "address topofpagelink"
            "copyright copyright"
            /   auto auto;    
}

#flex-footer>nav.breadcrumb-nav {
    position: relative;
    grid-area: breadcrumbnav;
    justify-self: stretch;
    align-self: center;
}

#flex-footer > .footer-content {
    position: relative;
    grid-area: address;
    justify-self: start;
    align-self: start;
}

#flex-footer > .footer-sidebar {
    position: relative;
    grid-area: topofpagelink;
    justify-self: end;
    align-self: start;
}

#flex-footer > .copyright {
    position: relative;
    grid-area: copyright;
    justify-self: end;
    align-self: center;
}

.breadcrumb-nav ol {
    align-content: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0;
    padding-top:.25rem;
    padding-bottom: 0.5rem;
}

.breadcrumb-nav li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.breadcrumb-nav li:first-child::before {
    content: "";
    margin: 0;
    padding: 0;
}

.breadcrumb-nav li::before {
    content: "> ";
    margin: 0;
    padding: 0;
}

.footer-address-block {
    text-align: left;
}

a.link-logo-footer {
    position: relative;
    margin: 0;
    padding: 0;
}

svg.logo-footer {
    position: relative;
    top: 0%;
    left: 0%;
    margin: auto;
}

address {
    margin: 1rem 0;
    margin-bottom: 0;
    padding: 0;
}

.address-footer {
    margin: 0;
    padding: 0;
}

.email-link {
    padding-right: 4rem;
    padding-bottom: 2rem;
}

.email-icon {
    display: inline-block;
    width: 1.75rem;
    vertical-align: text-top;
    margin: 0.25rem 0.6rem;
}

a.top-of-page-link {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    align-content: end;
    margin:0;
    padding-top: 1rem;
    width: clamp(48px, 5rem, 20vw);
    height: clamp(75px, 5rem, 20vw);
    text-decoration: none;
    text-align: right;
    cursor: pointer;
}

.top-of-page-button-label {
    display: block;
    position: relative;
    right: 0%;
    margin-top: 0;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: 0;
    text-align: end;
    cursor: pointer;
}

.top-of-page-button-arrow {
    display: block;
    position: relative;
    right: 0.5rem;
    margin-top: 0;
    margin-right:0;
    margin-left: auto;
    height: 1.35rem;
}

.copyright {
    display: inline;
    margin: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
    text-align: right;
}

.display_none {
    display: none !important;
    z-index: -20 !important;
}
/* SCREEN-READER VISUALLY HIDDEN STYLE ------------------------------------------- */
/* -------------------------------------------------------------------------------
/** 
 * Visually hide an element, but leave it available for screen readers
 * @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
 * @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
button.screen-reader {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/**
 * Extends the .screen-reader class to allow the element to be focusable when navigated to via the keyboard
 * @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
 * @link https://www.drupal.org/node/897638
 */
button.screen-reader-focusable:active,
button.screen-reader-focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	white-space: normal;
	width: auto;
}

/**
 * @workaround Remove focus from <main> element when using tabindex="-1" hack for skipnav link
 * @link https://code.google.com/p/chromium/issues/detail?id=37721
 */
.tabindex:focus {
	outline: none;
}  
/* END: BASELINE MOBILE/ SMALL SCREENS STYLE --------------------------------------*/

/* MID-SIZE SCREEN & PORTRAIT ORIENTATION BREAKPOINT --------------------------------------*/
/*-----------------------------------------------------------------------------------------*/
@media only screen and (min-width: 730px) and (orientation: portrait) {
    /*BODY ---------------------------------*/
    /*--------------------------------------*/
    /*HEADER --------------------------*/
    /*---------------------------------*/
    header.banner {
        position: relative;
        box-sizing: border-box;
        width: clamp(275px,100%,100%);
        height: clamp(4.75rem, 6rem, 14vh);
        margin: 0;
        display: flex;
        flex-flow: row nowrap;
        flex: 0 0 auto;
        justify-content: space-between;
        align-content: center;
    }

    .body-block-padding {
        padding-left: 4vw;
        padding-right: 4vw;
        transition: padding ease 500ms;
    }

    .header-block-padding {
        padding-left: 4vw;
        padding-right: 2vw;
        transition: padding ease 500ms;
    }

    #flex-header {
        position: fixed;
        top: 0%;
        transition: top 0.5s;
        z-index: 1;
        box-sizing: border-box;
        width: clamp(275px,100%,100%);
        margin: 0;
        /*GRID DEFINITION*/
        display: grid;
        grid:   "logohdr navhdr" minmax(4.75rem, 20vw)
            /   auto auto;    
    }

    .scroll {
        top: -100% !important;
        transition: top 0.5s;
    }

    /* LOGO ----------------------------------------------------*/
    #flex-header>.link-logo-header {
        position: relative;
        grid-area: logohdr;
        justify-self: start;
        align-self: center;
        justify-items: start;
    }

    .logo-header {
        display: inline-block;
        position: relative;
        height:  clamp(3.15rem, 3.5rem, 10vh);
        justify-self: start;
        margin: 0;
        padding: 0;
        z-index: +20;
    }
    /* MENU BUTTONS -------------------------*/
    /*---------------------------------------*/
    #flex-header>.menu-button {
        display: none;
    }

    #flex-header>.css-only-menu-button {
        display: none;
    }

    /* NAVIGATION ---------------------------*/
    /*---------------------------------------*/

    #flex-header>.navigation {
        grid-area: navhdr;
        align-self: start;
        align-items: start;
    }

    .navigation {
        position: relative;
        top: clamp(1.5rem,2.5rem,4.75vh);
        right: 0%;
        height: auto;
        overflow: visible;
        display: inline-block;
        box-sizing: border-box;
        width: max-content;
        opacity: 1;
        z-index: +50;
    }

    .navigation ul {
        padding: 0;
    }

    .navigation li {
        display: inline-block;
        vertical-align: text-top;
    }

    .navigation a {
        vertical-align: text-bottom;
        width: auto;
        padding: 0.5rem 0.5rem;
        margin: 0;
    }

    .navigation .about-button {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: text-bottom;
        background: none;
        border: none;
        width: 100%;
        padding: 0.5rem 0.5rem;
        margin: 0;
    }
    
    .navigation #about-link {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: text-bottom;
        background: none;
        border: none;
        width: 100%;
        padding: 0.5rem 0.5rem;
        margin: 0;
    }

    .navigation span#text {
        margin-left: 0;
        padding-left: 0;
        text-align: left;
    }

    .navigation-submenu {
        position: relative;
        width: auto;
        text-align: left;
        height: 0;
        opacity: 0;
        z-index: -10;
        overflow: hidden;
        background-color: var(--colour-navWideScreenSubMenu); /* Match the main nav bar background */
    }

    img#css-sub-menu-arrow {
        display: inline-block;
        height: 0.9rem;
        padding-left: 0.25rem;
        padding-top: 0.15rem;
        padding-bottom: 0;
    }

    img#sub-menu-arrow {
        display: inline-block;
        height: 0.9rem;
        padding-left: 0.25rem;
        padding-top: 0.15rem;
        padding-bottom: 0;
    }

    .navigation-submenu a:focus {
        color: var(--colour-primaryaccents);
        border-bottom: 0.2rem solid var(--colour-tertiaryaccents);
    }

    .navigation button {
        box-sizing: border-box;
        display: block;
        margin: 0;
        padding: 0.5rem 0.5rem;
        width: auto;
        cursor: pointer;
    }
    .navigation-submenu li {
        display: block;
        position: relative;
        left: 0;
        width: auto;
    }

    .navigation-submenu a {
        display: block;
        position: relative;
        left: 0;
        width: auto;
        margin: 0rem 0rem;
        padding: 0.75rem 1rem;
    }

    /* OPEN ABOUT MENU (CSS-ONLY ABOUT MENU BUTTON) -------------------*/
    /*----------------------------------------------------------------*/
    .navigation li#about:focus-within .navigation-submenu#about-submenu, 
    .navigation button#about-link:focus-within ~ .navigation-submenu#about-submenu {
        transition: all ease 500ms;
        width: auto;
        height: auto;
        opacity: 1;
        z-index: +50;
        overflow: visible;
    }

    /* OPEN ABOUT MENU (JAVASCRIPT-ENHANCED ABOUT MENU BUTTON) --------*/
    /*----------------------------------------------------------------*/
    .submenu-open { /* Class used to display sub-menu via javascript event handlers. */
        transition: all ease 500ms;
        height: auto;
        opacity: 1;
        z-index: +50;
        overflow: visible;
    }

} /* END: PORTRAIT ORIENTATION BREAKPOINT ---------------------------------------------------*/

/* MID-SIZED SCREEN BREAKPOINT-----------------------------------------------------*/
/*---------------------------------------------------------------------------------*/
@media only screen and (min-width: 730px) and (orientation: landscape) {

    /*BODY ---------------------------------*/
    /*--------------------------------------*/
    .body-block-padding {
        padding-left: 6vw;
        padding-right: 6vw;
        transition: padding ease 500ms;
    }

    /*HEADER --------------------------*/
    /*---------------------------------*/
    header.banner {
        position: relative;
        box-sizing: border-box;
        width: clamp(275px,100%,100%);
        height: clamp(4.75rem, 6rem, 14vh);
        margin: 0;
        display: flex;
        flex-flow: row nowrap;
        flex: 0 0 auto;
        justify-content: space-between;
        align-content: center;
    }

    .header-block-padding {
        padding-left: 6vw;
        padding-right: 2vw;
        transition: padding ease 500ms;
    }
    
    #flex-header {
        position: fixed;
        top: 0%;
        transition: top 0.5s;
        z-index: 1;
        box-sizing: border-box;
        width: clamp(275px,100%,100%);
        margin: 0;
        /*GRID DEFINITION*/
        display: grid;
        grid:   "logohdr navhdr" minmax(4.75rem, 20vw)
            /   auto auto;    
    }

    .scroll {
        top: -100% !important;
        transition: top 0.5s;
    }

    /* LOGO ----------------------------------------------------*/
    #flex-header>.link-logo-header {
        position: relative;
        /*display: grid;*/
        grid-area: logohdr;
        justify-self: start;
        align-self: center;
        justify-items: start;
    }

    .logo-header {
        display: inline-block;
        position: relative;
        height:  clamp(3.15rem, 3.5rem, 10vh);
        justify-self: start;
        margin: 0;
        padding: 0;
        z-index: +20;
    }
    /* MENU BUTTONS -------------------------*/
    /*---------------------------------------*/
    #flex-header>.menu-button {
        display: none;
    }

    #flex-header>.css-only-menu-button {
        display: none;
    }

    /* NAVIGATION ---------------------------*/
    /*---------------------------------------*/

    #flex-header>.navigation {
        grid-area: navhdr;
        align-self: start;
        align-items: start;
    }

    .navigation {
        position: relative;
        top: clamp(1.5rem,2.5rem,4.75vh);
        right: 0%;
        height: auto;
        overflow: visible;
        display: inline-block;
        box-sizing: border-box;
        width: max-content;
        opacity: 1;
        z-index: +50;
    }

    .navigation ul {
        padding: 0;
    }

    .navigation li {
        display: inline-block;
        vertical-align: text-top;
    }

    .navigation a {
        vertical-align: text-bottom;
        width: auto;
        padding: 0.5rem 0.5rem;
        margin: 0;
        cursor: pointer;
    }

    .navigation .about-button {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: text-bottom;
        background: none;
        border: none;
        width: 100%;
        padding: 0.5rem 0.5rem;
        margin: 0;
    }

    .navigation #about-link {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: text-bottom;
        background: none;
        border: none;
        width: 100%;
        padding: 0.5rem 0.5rem;
        margin: 0;
    }

    .navigation span#text {
        margin-left: 0;
        padding-left: 0;
        text-align: left;
    }

    img#css-sub-menu-arrow {
        display: inline-block;
        height: 0.9rem;
        padding-left: 0.25rem;
        padding-top: 0.15rem;
        padding-bottom: 0;
    }

    img#sub-menu-arrow {
        display: inline-block;
        height: 0.9rem;
        padding-left: 0.25rem;
        padding-top: 0.15rem;
        padding-bottom: 0;
    }

    .navigation li#about {
        position: relative; /* Anchor for absolute submenu positioning */
    }

    .navigation-submenu {
        position: absolute;   /* Changed from relative: allows submenu to drop below nav bar */
        top: 100%;            /* Position directly below the ABOUT button */
        right: 0;
        width: max-content;   /* Prevents collapsing in inline/horizontal nav layout */
        text-align: left;
        height: 0;
        opacity: 0;
        z-index: -10;
        overflow: hidden;
        pointer-events: none; /* Explicitly block touch/click events when hidden */
        background-color: var(--colour-navWideScreenSubMenu); /* Match the main nav bar background */
    }

    .navigation-submenu a:focus {
        color: var(--colour-primaryaccents);
        border-bottom: 0.2rem solid var(--colour-tertiaryaccents);
    }

    .navigation button {
        box-sizing: border-box;
        display: block;
        margin: 0;
        padding: 0.5rem 0.5rem;
        width: auto;
        cursor: pointer;
    }

    .navigation-submenu li {
        display: block;
        position: relative;
        width: auto;
    }

    .navigation-submenu a {
        display: block;
        position: relative;
        width: auto;
        margin: 0rem 0rem;
        padding: 0.75rem 1rem;
    }

    /* OPEN ABOUT MENU (CSS-ONLY ABOUT MENU BUTTON) -------------------*/
    /*----------------------------------------------------------------*/
    .navigation li#about:focus-within .navigation-submenu#about-submenu, 
    .navigation button#about-link:focus-within ~ .navigation-submenu#about-submenu {
        transition: all ease 500ms;
        width: auto;
        height: auto;
        opacity: 1;
        z-index: +50;
        overflow: visible;
    }

    /* OPEN ABOUT MENU (JAVASCRIPT-ENHANCED ABOUT MENU BUTTON) --------*/
    /*----------------------------------------------------------------*/
    .submenu-open { /* Class used to display sub-menu via javascript event handlers. */
        transition: all ease 500ms;
        height: auto;
        opacity: 1;
        z-index: +50;
        overflow: visible;
    }

} /* END:  MID-SIZED SCREENS BREAKPOINT ------------------------------------------ */