/* VARS ----------------------------------------------- */

    :root {
        /* standard named colours (all themes) */
        --colour-black: #000;
        --colour-white: #fff;
        --colour-red-back: #E81123;
        --colour-orange-back: #FF5613;
        --colour-amber-back: #FFB413;
        --colour-green-back: #83C832;
        --colour-blue-back: #4DBEFF;
        --colour-violet-back: #7B5DA7;
        --colour-hotpink-back: #FF277A;
        --colour-lt-grey-back: #F3F3F3;
        --colour-mid-grey-back: #757575;
        --colour-dk-grey-back: #343434;


        /* light theme (dark settings below, after :root block) */
        --colour-background: #fff;              /* std page background */
        --colour-foreground: #141414;           /* usually main body text */
        --colour-red-fore: #DA1020;
        --colour-orange-fore: #FF4C05;
        --colour-amber-fore: #C78800;
        --colour-green-fore: #679F28;
        --colour-blue-fore: #008BDB;
        --colour-violet-fore: #8167AD;
        --colour-hotpink-fore: #E60058;
        --colour-mid-grey-fore: #757575;
        /* copy and edit these for dark theme if required */
        --colour-accent1: #0C1021;
        --colour-accent2: #0C1021;
        --colour-accent3: #0C1021;
        --colour-link: #0040F0;
        --colour-link-hover: #003078;
        --colour-header-link: #ffffff;
        --colour-header-link-hover: #C0FFFF;
        --colour-header: #002284;
        --colour-footer-link: #ffffff;
        --colour-footer-link-hover: #C0FFFF;
        --colour-footer: #002284;

        /* other items */


        /* fonts, add font face css in next section */
        --body-font: 'Open Sans', sans-serif;
        --headline-font: 'Montserrat', sans-serif;
        --fontSize: 1.8rem;                             /* default font size for P */


        /* sizes */
        --theWidth: 1250px;                             /* width of widest content, also edit responsive section */
        --block-medium: 940px;                          /* med width block about 75% of theWidth */
        --block-narrow: 625px;                          /* narrow blocks (mainly for text) about 50% of theWidth */
        --gridGap: 40px;                                /* for grid gaps */
        --marginVert: 40px;                             /* for top/bot padding */
        --marginHoriz: 40px;                            /* for left/right padding */
        --headingGap: 15px;                             /* after headings */
        --textGap: 25px;                                /* after p, ul */

        --marginVertSmall: calc(var(--marginVert) / 2);
        --marginHorizSmall: calc(var(--marginHoriz) / 2);
        --marginVertBig: calc(var(--marginVert) * 2);
        --marginHorizBig: calc(var(--marginHoriz) * 2);
        --gridGapSmall: calc(var(--gridGap) / 2);
        --gridGapBig: calc(var(--gridGap) * 2);
    }


    /* dark theme */
    body[data-theme="dark"] {
        --colour-background: #141414;      /* page background */
        --colour-foreground: #F8F8F8;      /* usually text */
        --colour-red-fore: #EF2E3E;
        --colour-orange-fore: #FF5613;
        --colour-amber-fore: #FFB413;
        --colour-green-fore: #93D24B;
        --colour-blue-fore: #61C5FF;
        --colour-violet-fore: #AB99C7;
        --colour-hotpink-fore: #FF277A;
        --colour-mid-grey-fore: #8F8F8F;

        --colour-link: #23A8E1;
        --colour-link-hover: #1A8CBC;
        --colour-accent1: #0C1021;
        --colour-accent2: #0C1021;
        --colour-accent3: #0C1021;
    }
    /*body[data-theme="dark"] header { background: red; }*/



/* FONTS FOR THIS SITE -------------------------------- */

    @font-face {
      font-display: swap;
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 300;
      src: url('../fonts/open-sans/open-sans-v35-latin-300.woff2') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/open-sans/open-sans-v35-latin-regular.woff2') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 500;
      src: url('../fonts/open-sans/open-sans-v35-latin-500.woff2') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 600;
      src: url('../fonts/open-sans/open-sans-v35-latin-600.woff2') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      src: url('../fonts/open-sans/open-sans-v35-latin-700.woff2') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 300;
      src: url('../fonts/montserrat/montserrat-v25-latin-300.woff2') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/montserrat/montserrat-v25-latin-regular.woff2') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 500;
      src: url('../fonts/montserrat/montserrat-v25-latin-500.woff2') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 600;
      src: url('../fonts/montserrat/montserrat-v25-latin-600.woff2') format('woff2');
    }

    @font-face {
      font-display: swap;
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 700;
      src: url('../fonts/montserrat/montserrat-v25-latin-700.woff2') format('woff2');
    }


/* COLOURS -------------------------------------------- */

	.c-black { color: var(--colour-black); }
    .c-white {color: var(--colour-white); }
    .c-background { color: var(--colour-background); }
    .c-foreground { color: var(--colour-foreground); }
    .c-red { color: var(--colour-red-fore); }
    .c-orange { color: var(--colour-orange-fore); }
    .c-amber { color: var(--colour-amber-fore); }
    .c-green { color: var(--colour-green-fore); }
    .c-blue { color: var(--colour-blue-fore); }
    .c-violet { color: var(--colour-violet-fore); }
    .c-hotpink { color: var(--colour-hotpink-fore); }
    .c-mid-grey { color: var(--colour-mid-grey-fore); }
    .c-accent1 { color: var(--colour-accent1); }
    .c-accent2 { color: var(--colour-accent2); }
    .c-accent3 { color: var(--colour-accent3); }

	.bg-black, .bull-black li:before { background-color: var(--colour-black); }
    .bg-white, .bull-white li:before {background-color: var(--colour-white); }
    .bg-background, .bull-background li:before { background-color: var(--colour-background); }
    .bg-foreground, .bull-foreground li:before { background-color: var(--colour-foreground); }
    .bg-red, .bull-red li:before { background-color: var(--colour-red-back); }
    .bg-orange, .bull-orange li:before { background-color: var(--colour-orange-back); }
    .bg-amber, .bull-amber li:before { background-color: var(--colour-amber-back); }
    .bg-green, .bull-green li:before { background-color: var(--colour-green-back); }
    .bg-blue, .bull-blue li:before { background-color: var(--colour-blue-back); }
    .bg-violet, .bull-violet li:before { background-color: var(--colour-violet-back); }
    .bg-hotpink, .bull-hotpink li:before { background-color: var(--colour-hotpink-back); }
    .bg-lt-grey { background-color: var(--colour-lt-grey-back); }
    .bg-mid-grey, .bull-mid-grey li:before { background-color: var(--colour-mid-grey-back); }
    .bg-dk-grey { background-color: var(--colour-dk-grey-back); }
    .bg-accent1, .bull-accent1 li:before { background-color: var(--colour-accent1); }
    .bg-accent2, .bull-accent2 li:before { background-color: var(--colour-accent2); }
    .bg-accent3, .bull-accent3 li:before { background-color: var(--colour-accent3); }

	.border-black { border-color: var(--colour-black); }
    .border-white { border-color: var(--colour-white); }
    .border-background { border-color: var(--colour-background); }
    .border-foreground { border-color: var(--colour-foreground); }
    .border-red { border-color: var(--colour-red-back); }
    .border-orange { border-color: var(--colour-orange-back); }
    .border-amber { border-color: var(--colour-amber-back); }
    .border-green { border-color: var(--colour-green-back); }
    .border-blue { border-color: var(--colour-blue-back); }
    .border-violet { border-color: var(--colour-violet-back); }
    .border-hotpink { border-color: var(--colour-hotpink-back); }
    .border-mid-grey { border-color: var(--colour-mid-grey-back); }
    .border-accent1 { border-color: var(--colour-accent1); }
    .border-accent2 { border-color: var(--colour-accent2); }
    .border-accent3 { border-color: var(--colour-accent3); }

    body { transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; }
    body { background-color: var(--colour-background); color: var(--colour-foreground); }


/* FIXES ---------------------------------------------- */

    header,
    .wide-block:after,
    .clearfix:after { content: ""; display: table; clear: both; }
     /* Correct 'block' display not defined in IE Firefox 3. */
    article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
        display: block;
    }

    /* Correct 'inline-block' display not defined in IE Firefox 3. */
    audio, canvas, video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }


/* BASIC --------------------------------------------- */

    html, body { height: 100%; width: 100%; }
    body { min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; -webkit-text-size-adjust: none; }
    html { font-size: 62.5%; color: var(--colour-black); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    * { margin: 0px; padding: 0px; -webkit-tap-highlight-color: transparent; }

/* Default Body Font and Text Colour */
    html, select, input { font-weight: 400; font-family: var(--body-font); }
    body, select, input { font-size: var(--fontSize); }

    select, input, textarea, li { color: inherit; }


/* HEADER --------------------------------------------- */

	header { position: relative; background: var(--colour-header); padding-top: var(--marginVert); padding-bottom: var(--marginVert); }
    header .inner-wrapper .main-row { display: flex; flex-flow: row nowrap; align-items: center; }
    header .inner-wrapper .main-row.centred { justify-content: center; }

    /* centre logo in header full desktop menu below */
    header .inner-wrapper.full .main-row { flex-flow: row wrap; }
    header .inner-wrapper.full .logo-wrapper { flex: 0 100%; }
    header .inner-wrapper.full .menu-main-container { margin-right: auto; }
    header .inner-wrapper.full .tagline { text-align: center; }

    /* centre logo in header (no desktop menu) */
    header .inner-wrapper.centred .logo-wrapper { margin-left: auto; margin-right: auto; }
    header .inner-wrapper.centred .menuicon { position: absolute; right: 0; }
    header .inner-wrapper.centred .tagline { text-align: center; }

    .logo-wrapper { width: auto; height: 40px; margin: 0; }
    .logo-wrapper img { display: block; height: 100%; width: auto; margin: 0 auto; }

    .theme-icon { height: 20px; width: auto; margin-left: auto; cursor: pointer; stroke: none; fill: var(--colour-header-link); }
    .theme-icon:hover { fill: var(--colour-header-link-hover); }
    .tagline { margin: var(--marginHorizSmall) 0 0; font-size: 1.8rem; font-weight: 500; }


/* MAIN MENU ------------------------------------------ */

    /* main menu icon */
    .menuicon { display: flex; gap: 15px }
    .menuicon-wrapper { cursor: pointer; transition: all 0.33s ease; 
     display: flex; flex-flow: row nowrap; gap: 10px; align-items: center; }
    .menuicon-wrapper span { font-size: 1.5rem; font-weight:500; letter-spacing: 0.15rem; }
    .menuicon-wrapper .bars { position: relative; top: 0; width: 26px; height: 20px; display: flex; flex-flow: column wrap; justify-content: space-between; }
    .menuicon-wrapper .bar { width: 100%; height: 2px; transition: transform 0.25s linear; transform-origin: left; background-color: var(--colour-header-link); }
    .menuicon-wrapper .bar.mid { transition: opacity 0.2s linear; }
    .menuicon-wrapper { display: none; }
    .menuicon-wrapper:hover .bar { background-color: var(--colour-header-link-hover); }
    .menuicon-wrapper:hover span { color: var(--colour-header-link-hover); }


    /* main menu */
    .menu-main-container { margin-left: auto; transition: none; transform: none; }
    .menu-main,
    .menu-main li { list-style-type: none; margin: 0; padding: 0; }
    .menu-main { display: flex; flex-flow: row nowrap; gap: var(--gridGap); margin-right: var(--marginHoriz); }
    .menu-main li { font-size: 1.8rem; }
    .menu-main li a { color: var(--colour-header-link); padding-bottom: 5px; }
    .menu-main li a[aria-current="page"],
    .menu-main li a:hover { color: var(--colour-header-link-hover); border-bottom: 2px solid; }


    /* copy MOBILE MENU here for desktop */



/* FOOTER --------------------------------------------- */

	footer { position: relative; background: var(--colour-footer); padding-top: var(--marginVertBig); padding-bottom: var(--marginVertBig); }
    footer .inner-wrapper { display: grid; grid-template-columns: minmax(260px,2fr) repeat(2,minmax(200px,1fr)); grid-gap: var(--gridGap); }
    footer .footer-last-row { grid-column: 1 / 4; grid-row: 2 / 3; display: flex; flex-flow: row nowrap; justify-content: space-between; padding-top: 20px; position: relative; }
    footer .footer-last-row:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; border-top: 1px solid; opacity: 0.5; }
    footer .footer-last-row ul { display: flex; grid-gap: 20px; }
    footer p,
    footer ul,
    footer li { margin: 0; padding: 0; list-style-type: none; }

    footer p,
    footer li { font-size: 1.6rem; color: var(--colour-footer-link); }
    footer li a svg { width: 20px; height: 20px; fill: var(--colour-footer-link); position: absolute; }
    footer li a svg+span { padding-left: 35px; }
    footer li a:hover svg { fill: var(--colour-footer-link-hover); }
    footer ul li a { display: inline-flex; flex-flow: row nowrap; align-items: center; }
    footer li a { color: var(--colour-footer-link); padding-bottom: 0; }
    footer li a[aria-current="page"],
    footer li a:hover { color: var(--colour-footer-link-hover); }

    .logo-footer { margin: 0 0 var(--marginVertSmall); }
    footer ul { display: flex; flex-flow: column wrap; gap: 10px; }
    footer .footer-last-row ul { flex-flow: row nowrap; }


/* OTHER ---------------------------------------------- */

    #overlay { background: rgba(0,0,0,0.5); }
    #overlay, #modal { position:fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; }
    #overlay.show { display: block; }
    #modal.show { display: flex; }
    
    #modal { max-width: max(350px, calc(var(--theWidth) / 2)); max-height: 75vh; border-radius: var(--marginVert); box-sizing: border-box; padding: var(--marginVert); flex-flow: column wrap; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 30px var(--colour-black); border: 1px solid var(--colour-black); }
    .modal-open { cursor: pointer; }
    .modal-close { width: 30px; height: 30px; margin-bottom: 20px; align-self: flex-end; cursor: pointer; }
    .modal-inner { overflow-y: auto; height: 100%; flex: 1; }
    

    .toplink { position: fixed; bottom: 25px; right: 0; padding: 0; text-align: center; width: 38px; height: 38px;  transition: transform 0.5s ease-in; transform: translateX(100px); padding: 10px; box-sizing: border-box; border-radius: 50%; fill: #ffffff; background: rgba(0,0,0,0.5); }
    .toplink.show { transform: translateX(0); }
    .jump { cursor: pointer; }
    .toplink.show:hover { background: var(--colour-black); color: var(--colour-highlight-dk); }
    .toplink path { pointer-events: none; }    

/* HEADER + FOOTER RESPONSIVE ------------------------- */


@media only screen and (max-width: 1300px) {
    :root {
        --theWidth: 100%;
    }
    header, footer { padding-left: var(--marginHoriz); padding-right: var(--marginHoriz); }
}


@media only screen and (max-width : 1023px) {
    :root {
        --gridGap: 20px;
        --marginVert: 20px;
        --marginHoriz: 20px;
    }
    .logo-wrapper { height: 35px; }
    .tagline   {font-size: 1.7rem; }
    footer p, footer li  {font-size: 1.6rem; }


    /* MOBILE MENU */
        .menuicon { margin-left: auto; }
        .menuicon-wrapper { display: flex; }
        .menu-main-container { position: fixed; z-index: 1000; height: 100%; background: var(--colour-header);  box-sizing: border-box; width: 270px; top: 0; right: calc(0px - 300px - var(--marginVert)); padding: var(--marginVert); padding-top: var(--marginVertBig); transform: translateX(100%); transition: transform 0.33s ease-in-out; box-sizing: border-box; }
        .menu-main { height: 100%; flex-flow: column nowrap; overflow-y: auto; padding: 20px 0; box-sizing: border-box; gap: calc(var(--gridGap) * 1.2); }
        .menu-main li { font-size: 2.0rem; }

        /* main menu visible */
        html.menushow  { overflow: hidden; }
        html.menushow body { overflow: auto; }
        .menushow .bar.top { transform: rotate(45deg); }
        .menushow .bar.bot { transform: rotate(-45deg); }
        .menushow .bar.mid { opacity: 0; }
        .menushow .menuicon { z-index: 1000; }
        .menushow .menu-main-container { transform: translateX(calc(0% - 300px - var(--marginHoriz))); }
    /* MOBILE MENU */
    
    
    footer { padding-top: var(--marginVertBig); padding-bottom: var(--marginVertBig); }
    .toplink { bottom: 105px; }
}


@media only screen and (max-width : 767px) {
    footer .inner-wrapper { grid-template-columns: repeat(2, 1fr); }
    footer .footer-socials { grid-row: 2 / 3; grid-column: 2 / 4; }
    footer .footer-last-row { grid-row: 3 / 3; }
    footer ul { flex-flow: row wrap; column-gap: 20px; }
    footer li a svg { position: static; width: 25px; height: 25px; }
    footer li a svg+span { display: none; }
}


@media only screen and (max-width : 599px) {
    .menuicon-wrapper span { display: none; }
    footer .inner-wrapper { display: flex; flex-flow: column wrap; }
    /*footer .footer-links ul { flex-flow: column wrap; }*/
    footer .footer-last-row { flex-flow: column wrap; gap: 10px; }
    footer li a svg { position: static; width: 30px; height: 30px; }    
    .toplink { bottom: 48px; }
}


@media only screen and (max-width : 374px) {

}















/* TEXT + LINKS ---------------------------------------- */

    h1, h2, h3, h4, h5, h6 { font-family: var(--headline-font); font-weight: 600; line-height: 120%; -webkit-text-size-adjust: none; margin-bottom: var(--headingGap); }

    h1 { font-size: 4.0rem; }
	h2 { font-size: 3.6rem; }
	h3 { font-size: 3.2rem; }
    h4 { font-size: 2.75rem; }
    h5 { font-size: 2.4rem; }
    h6 { font-size: 2.0rem; }


    p, li, th, td, label, address, cite, select { line-height: 160%; margin-bottom: var(--textGap); }
    strong { font-weight: 600; }
    b { font-weight: 600; }

    .not-mobile { }
    .not-desktop { display: none; }

    /* links*/
    a { color: var(--colour-link); text-decoration: none; }
    main a:not(.button) { text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 0.25rem; font-weight: 600; }
    a:hover { color: var(--colour-link-hover); }
    a img { border: none; }


/* LISTS --------------------------------------- */

    ul { list-style-type: disc;	}
    ul, ol { margin-bottom: var(--textGap); }
	li { margin: 0 0 0 25px; }


/* IMAGES AND BACKGROUNDS ----------------------------- */


/* CONTAINERS + SPACING ------------------------------- */

    main { flex: 1; }

    .inner-wrapper { width: var(--theWidth); box-sizing: border-box; margin: 0 auto; position: relative; }

    .block { margin-bottom: var(--marginVert); }
    .width-large { width: var(--theWidth); }
    .width-medium { width: var(--block-medium); }
    .width-narrow { width: var(--block-narrow); }
    .centre-this { text-align: center; }
    .horiz-centre { margin-left: auto; margin-right: auto; }

    .margin-top { margin-top: var(--marginVert); }
    .margin-bot { margin-bottom: var(--marginVert); }
    .margin-top-small { margin-top: calc(var(--marginVert) / 2); }
    .margin-bot-small { margin-bottom: calc(var(--marginVert) / 2); }
    .margin-top-big { margin-top: calc(var(--marginVert) * 2); }
    .margin-bot-big { margin-bottom: calc(var(--marginVert) * 2); }
    .mt0 { margin-top: 0 !important; }
    .mb0 { margin-bottom: 0 !important; }

    .pad-top { padding-top: var(--marginVert); }
    .pad-bot { padding-bottom: var(--marginVert); }
    .pad-top-small { padding-top: calc(var(--marginVert) / 2); }
    .pad-bot-small { padding-bottom: calc(var(--marginVert) / 2); }
    .pad-top-big { padding-top: calc(var(--marginVert) * 2); }
    .pad-bot-big { padding-bottom: calc(var(--marginVert) * 2); }
    .pad-top0 { padding-top: 0 !important; }
    .pad-bot0 { padding-bottom: 0 !important; }


/* PAGES ---------------------------------------------- */


/* ITEMS ---------------------------------------------- */


/* CAROUSELS ------------------------------------------ */


/* ANIMATIONS ----------------------------------------- */

    .swiper-button.swiper-next { animation: arrowPulseRight 0.5s ease infinite alternate; }
    @keyframes arrowPulseRight {
        0% { transform: translateX(0); }
        100% { transform: translateX(5px); }
    }








/* RESPONSIVE ----------------------------------------- */


@media only screen and (max-width : 1300px) {
    main .inner-wrapper { padding-left: var(--marginHoriz); padding-right: var(--marginHoriz); }

    h1 { font-size: 3.6rem; }
	h2 { font-size: 3.2rem; }
	h3 { font-size: 2.8rem; }
    h4 { font-size: 2.6rem; }
    h5 { font-size: 2.3rem; }
    h6 { font-size: 2.0rem; }
}

@media only screen and (max-width : 1023px) {
    .block { margin-bottom: var(--marginVertBig); }
        
    h1 { font-size: 3.3rem; }
	h2 { font-size: 2.8rem; }
	h3 { font-size: 2.6rem; }
    h4 { font-size: 2.3rem; }
    h5 { font-size: 2.1rem; }
    h6 { font-size: 2.0rem; }
}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 599px) {

}

@media only screen and (max-width : 374px) {

}