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

    :root {
        /* colours */
        --colour-lt-grey: #E7E9F9;
        --colour-mid-grey: #B6B6B6;
        --colour-dk-grey: #656565;
        --colour-black: #000;
        --colour-lt-black: #17181f;
        --colour-dk-black: #202128;
        --colour-white: #fff;
        --colour-lt-red: #ffdede;
        --colour-dk-red: #DA1020;
	    --colour-red: #E6000B;
        --colour-yellow: #FFFF00;
        --colour-lt-yellow: #FFFF80;
        --colour-orange: #FF6123;
        --colour-tangerine: #FD9800;
        --colour-amber: #FBCA3F;
        --colour-lt-green: #83C832;
        --colour-mid-green: #00A03C;
        --colour-dk-green: #006426;
        --colour-mint: #45E7BB;
        --colour-olive: #54692E;
        --colour-green-blue: #006651;
        --colour-cyan: #4DBEFF;
        --colour-lt-cyan: #A7D6F0;
        --colour-lt-blue: #2DB2FF;
        --colour-navy: #000964;
        --colour-royal-blue: #3741FF;
        --colour-violet: #C285D2;
        --colour-dk-violet: #7B5DA7;
        --colour-indigo: #3C1A6E;
        --colour-purple: #360088;
        --colour-brown: #764836;
        --colour-hot-pink: #FF4F91;
        --colour-cute-pink: #FF7DB1;
        --colour-magenta: #FF00FF;
        --colour-slate: #4F4550;
        --colour-gold-classic: #E3C256;
        --colour-gold-light: #E9D079;
        --colour-gold-bright: #FFD700;
        --colour-gold-dark: #D2A256;
        --colour-gold-rose: #EFCBBA;
        --colour-salmon: #FCD0B1;
        --colour-bronze: #D2955A;
        --colour-flesh: #FFEFCD;


/* THIS SITE  SETTINGS */

        /* fonts, add font css in next section */
        --body-font: 'Open Sans', sans-serif;
        --headline-font: 'Montserrat', sans-serif;
        --fontawesome: fontawesome, "Font Awesome 6 Free";
        --fontSize: 1.9rem;                             /* default font size for P */

        /* sizes */
        --theWidth: 1200px;                             /* width of widest content, also edit responsive section */
        --block-medium: 920px;                          /* med width block about 75% of theWidth */
        --block-narrow: 720px;                          /* narrow blocks (mainly for text) about 50% of theWidth */
        --expander-max-height: 1100px;                  /* max height of contents of an accordion */
        --marginVert: 40px;                             /* bottom margin for p, buttons, etc, + top margin for footer */
        --marginHoriz: 20px;                            /* left/right margin for top-level containers */
        --rounded: 25px;                                /* rounding amount on buttons etc. set to 0 for none */
        --gridGap: 30px;                                /* in-between content columns */
        
        /* colour scheme */
        --colour-primary: var(--colour-navy);           /* set to the main dark colour */
        --colour-highlight-dk: var(--colour-orange);    /* set to the dark highlight colour */
        --colour-highlight-lt: var(--colour-mint);      /* set to the light highlight colour */
        --colour-link: var(--colour-royal-blue);        /* set to the main text link colour */
        --colour-link-hover: var(--colour-highlight-dk); /* set dark text link hover colour for light bgs */
        --colour-link-hover-lt: var(--colour-highlight-lt);/* set light text link hover colour for dk bgs */
        --colour-page: var(--colour-lt-grey);             /* set to page colour (usually white) */
        --default-bodyfont-colour: var(--colour-navy); /* default font colours for body text etc. */
        --default-heading-colour: var(--colour-navy);/* default font colours for headings */

        /* main menu*/
        --top-menu-font-size: 1.6rem;                   /* top menu options font size */
        --top-menu-text-colour: var(--colour-white);     /* top menu text colour */
        --top-menu-text-hover: var(--colour-highlight-dk); /* top menu text hover colour*/
    }


/* 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: 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');
    }


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

    body { min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; -webkit-text-size-adjust: none; background: var(--colour-page); }
    html { font-size: 62.5%; color: var(--default-bodyfont-colour); }
    * { margin: 0px; padding: 0px; }

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


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

	header { position: relative; }
    .header-wrapper { display: flex; position: relative; padding: 20px 0px 22px; margin: 0; width: 100%; z-index: 999; }


    /* default is logo + full menu centred and stacked */
    header .inner-wrapper { display: flex; flex-flow: column wrap; justify-content: center; align-items: center; }

    .logo-wrapper { max-width: 536px; margin-bottom: var(--marginVert); }
    .logo-wrapper img { display: block; width: 100%; height: auto; margin: 0 auto; }
    header .tagline { width: 100%; line-height: 1; margin: 20px auto 0; text-align: center; color: var(--top-menu-text-colour); }

    /* placement of menu
    always mobile menu:
      add mobile-menu to header and
        add nothing for menu at top right
        add menu-v-centre or menu-v-bot for menu placement

    for centred and stacked logo and header:
      add full-menu to header and
        remove logo-left and menu-v-* from header

    for logo and menu placements (incl. mobile menu on desktop):
      add full-menu to header and
        add logo-left for left logo and right top menu/menu-icon
        add logo-left and menu-v-centre for left logo and right vert-centred menu/menu-icon
        add logo-left and menu-v-bot for left logo and right bot menu/menu-icon */
    header .inner-wrapper.logo-left { flex-flow: row wrap; justify-content: space-between; align-items: flex-start; }
    header .inner-wrapper.logo-left .tagline { text-align: left; }
    header .inner-wrapper.logo-left .logo-wrapper { margin-bottom: 0; max-width: 300px; }
    header .inner-wrapper.menu-v-centre .menu-main-container,
    header .inner-wrapper.menu-v-centre .menuicon { align-self: center; } /* menu centred to logo */
    header .inner-wrapper.menu-v-bot .menu-main-container,
    header .inner-wrapper.menu-v-bot .menuicon { align-self: flex-end; } /* menu at bottom of logo  */

    header.mobile-menu .inner-wrapper { flex-flow: row wrap; justify-content: space-between; }
    header.mobile-menu .tagline { text-align: left; }
    header.mobile-menu .logo-wrapper { margin-bottom: 0; }



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

    /* main menu icon */
    .menuicon { cursor: pointer; transition: all 0.33s ease; width: 26px; height: 20px; z-index: 3000; margin-top: 5px; }
    .menuicon.circle { padding: 15px; border-radius: 50%; }
    .menuicon.square { padding: 10px; border-radius: 7px; }
    .menuicon .bars { position: relative; top: 0; }
    .menuicon .bar { width: 100%; height: 2px; position: relative; right: 0;
        transition: transform 0.25s linear; transform-origin: left; 
        background-color: var(--top-menu-text-colour); box-shadow: rgba(0,0,0,0.35) 1px 1px 3px; }
    .menuicon .bar.mid { margin-top: 7px; transition: opacity 0.2s linear; }
    .menuicon .bar.bot { margin-top: 7px; }
    .menu-main-container { position: fixed; transform: translateX(0); top: 0; right: -100%; width: 100%; margin: 0;  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);  height: 100%; z-index: 2000; display: flex;
    justify-content: center; overflow-x: hidden; overflow-y: auto; }

    /* colours for mobile menu */
    .menu-main-container { background: rgba(0,0,0,0.90); }
    .menushow .menu-main li a { color: var(--colour-white); }
    

    .menu-main,
    .menu-main li { padding: 0; list-style-type: none; margin-bottom: 0; }
    .menu-main { margin: 70px auto; display: inline-block; padding-bottom: 2px; }
    .menu-main li { display: block; text-align: left; font-size: 4.5rem; line-height: 100%; margin: 0 0 20px; position: relative; transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1); transform: translateX(100vw); }
    .menu-main li:nth-child(1) { transition-delay: 0s; }
    .menu-main li:nth-child(2) { transition-delay: 0.10s; }
    .menu-main li:nth-child(3) { transition-delay: 0.14s; }
    .menu-main li:nth-child(4) { transition-delay: 0.18s; }
    .menu-main li:nth-child(5) { transition-delay: 0.22s; }
    .menu-main li:nth-child(6) { transition-delay: 0.26s; }
    .menu-main li:nth-child(7) { transition-delay: 0.30s; }
    .menushow .menu-main li { transform: translateX(0); }

    .menu-main li:last-child { margin-bottom: 0; }
    .menu-main li i { margin-right: 0; width: 82px; text-align: center; font-size: 70%; position: relative; top: -4px; opacity: 0.5; }

    .menu-main li a { color: var(--top-menu-text-colour); position: relative; }
    .menu-main li a:after { content: ""; position: absolute; bottom: -2px; left: 0; opacity: 0; background: var(--top-menu-text-hover); width: 0%; height: 2px; transition: all 0.25s ease-in-out; }    
    .menu-main li a[aria-current="page"],
    .menu-main li a:hover { color: var(--top-menu-text-hover); }
    .menu-main li a[aria-current="page"]:after,
    .menu-main li a:hover:after { opacity: 1; width: 100%; }
    .menuicon:hover .bar { background-color: var(--top-menu-text-hover); }

    html.freeze,
    body.menushow { overflow: hidden; }
    body.menushow .bar { background: var(--colour-white); }
    body.menushow .bar.top { transform: rotate(45deg); }
    body.menushow .bar.bot { transform: rotate(-45deg); }
    body.menushow .bar.mid { opacity: 0; }
    .menushow .menuicon { background: rgba(0,0,0,0) !important; }
    .menushow .menu-main-container { transform: translateX(-100%); }


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

	footer { display: flex; width: 100%; padding: var(--marginVert) 0; position: relative; }
    footer .inner-wrapper { display: flex; flex-flow: row wrap; justify-content: center; }
    footer .inner-wrapper .col { flex: 1 1 50%; }
    footer .row { margin: 0; flex: 1 1 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; }
    footer .logo-footer { width: 100%; height: auto; max-width: 300px; margin: 0 0 var(--marginVert); }
    footer ul { list-style-type: none; padding: 0; margin: 0; }
    footer ul li { display: inline; padding: 0 17px 0 0; text-transform: uppercase; }
    footer ul li a { color: inherit; padding: 5px 0; }
    footer li a:hover { color: var(--colour-link-hover); }
    footer ul li:last-child { padding-right: 0; }
    footer ul li, footer p { font-size: 1.4rem; margin: 0; }
    footer p { align-self: center; }
    footer .social { float: right; }
    footer .social li { font-size: 3.0rem; }
    footer ul.footer-links li i { color: var(--colour-highlight); padding-right: 4px; }

    .toplink { position: fixed; bottom: 65px; right: 0; padding: 0; text-align: center; z-index: 998; }
    .toplink.fas { padding: 5px 0 10px; font-size: 23px; width: 40px; height: 20px; color: #fff;
    transition: transform 0.5s ease-in; transform: translateX(100px); background: rgba(0,0,0,0.3); }
    .toplink.fas.show { transform: translateX(0); }
    .jump { cursor: pointer; }
    .toplink.show:hover { background: var(--colour-black); color: var(--colour-highlight-dk); }


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

@media only screen and (min-width : 1024px) {
    /* full menu on desktop but only over 1279px */
    .full-menu .menuicon { display: none; }
    .full-menu .menu-main-container { display: block; position: static; background: none; width: auto; height: auto; }
    .full-menu .menu-main { transform: none; position: static; margin: 0 auto; }
    .full-menu .menu-main li { transform: none; text-transform: uppercase; font-size: var(--top-menu-font-size); display: inline; padding-right: 20px; }
    .full-menu .menu-main li:last-child { padding-right: 0; }
    .full-menu .menu-main li i { width: 20px; font-size: 95%; opacity: 1; position: static; padding-right: 10px; }
    .menushow .full-menu .menu-main-container { transform: none; transition: none; }
}


@media only screen and (max-width : 1023px) {
    /* reset full menu to mobile and move menuicon to right */
    .full-menu .menuicon { display: block; }
    .logo-wrapper { margin-bottom: 0; max-width: 425px; }
    header .inner-wrapper { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: initial; }
}


@media only screen and (max-height : 767px) {
    .menu-main li { font-size: 3.25rem !important; }
}


@media only screen and (min-height : 500px) {
    .menu-main-container { align-items: center; }
}


@media only screen and (max-width : 767px) {
    .tagline p { text-align: left; }
    .tagline p,
    header .inner-wrapper { justify-content: space-between; }
    .logo-header { width: 400px; margin: 0 auto 15px; }

    .menuicon:hover { transform: none; }
    .menuicon.circle { padding: 12px; }
    .menu-main li { font-size: 3.25rem !important; }

    footer .logo-footer { max-width: 300px; }
    footer .footer-links li { padding: 0 10px 0 0; }
    footer .social li { font-size: 2.5rem; }
    footer .col:nth-child(2) { flex: 1 1 100%; }
    footer .social { float: none; margin: 0 0 var(--marginVert); }
    footer .row { flex-flow: row wrap; }
    footer p { flex: 1 1 100%; margin: 20px 0 0 0; }
    footer ul.footer-links li,
    footer ul li { padding: 0 15px 0 0; }
    footer ul.footer-links li:last-child { padding-right: 0; }
}


@media only screen and (max-width : 599px) {
    header .inner-wrapper { align-items: flex-start; }
    header .tagline { font-size: 1.5rem; margin-top: 12px; }
    .logo-wrapper { width: 275px; }
    .logo-wrapper img { margin: 0; }

    footer ul.footer-links  { width: 265px; }
    footer ul.footer-links li { padding: 0 10px 5px 0; font-size: 1.3rem; display: inline-block; }
}


@media only screen and (max-width : 499px) {
    .logo-wrapper { max-width: 275px; }
}


@media only screen and (max-width : 374px) {
    .logo-wrapper { max-width: 250px; }
    .logo-wrapper img { max-width: 235px; }
    header .tagline { font-size: 1.45rem; }
    footer ul.footer-links li { padding: 0 7px 5px 0; }
    footer ul.footer-links li:last-child { padding: 0; }
}









/* TEXT + LINKS ---------------------------------------- */
    /* headings on single pages:
    h1 - main headline on each page (home h1 is the masthead heading)
    h2 - main sub headings
    h3 - secondary sub-headings
    h4 - smaller sub headings like P but bigger
    */

    .mid-title,
    .hero .tag,
    h1, h2, h3, h4, h5, h6 { font-family: var(--headline-font); font-weight: 600; line-height: 150%; -webkit-text-size-adjust: none; }
    
    h1, h2, h3, h4, h5, h6 { color: var(--default-heading-colour); }
    
    h1 { font-size: 3.75rem; font-weight: 700; letter-spacing: -0.05rem; margin-bottom: calc(var(--marginVert) / 2); }
	h2 { font-size: 2.75rem; line-height: 140%; letter-spacing: -0.03rem; margin-bottom: calc(var(--marginVert) / 2); } 
	h3 { font-size: 2.3rem; margin-bottom: calc(var(--marginVert) / 2); } 
    .tab { position: relative; }
	h4 { font-size: 2.0rem; margin-bottom: calc(var(--marginVert) / 2); } 
    .tab { position: relative; }
    h1.tab { margin-bottom: calc(var(--marginVert) / 1.5); }
    h2.tab { margin-bottom: calc(var(--marginVert) / 1.5); }
    .tab:after { content: ""; display: block; margin: calc(var(--marginVert) / 2) 0 0; height: 2px; width: calc(var(--marginHoriz) * 2.5); background: var(--default-heading-colour); }

    .hero .tag { font-size: clamp(5.5rem, 5.5vw, 8.0rem); text-align: center; }
    .mid-title { font-size: clamp(2.2rem, 1.8vw, 2.8rem); font-weight: 500; color: var(--default-bodyfont-colour); }

    p, li, th, td, label, address, cite, select { line-height: 150%; margin-bottom: calc(var(--marginVert) * 0.75); }
    strong { font-weight: 600; }
    b { font-weight: 600; }

    p.bullet { padding-left: 22px; margin-left: 8px; position: relative;  }
    .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 { padding-bottom: var(--marginVert); }
	li { padding-left: 5px; margin-left: 25px; margin-bottom: 3px; }
    ul li:last-child{ margin-bottom: 0; }

    ul ul { padding-top: 10px; }

    ul.bullet { list-style: none; }
	.bullet li { list-style: none; padding-left: 22px; margin-left: 0; position: relative; }
    .bullet li:before,
    p.bullet:before { content: ""; position: absolute; left: 0; top: 11px;
        width: 6px; height: 6px; display: block; background: var(--colour-highlight-dk); }
    ul li ul { padding-bottom: 0; }



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

    /* imgs are wrapped in figure blocks */
    img { display: block; height: auto; }
    .alignleft { float: left; margin-right: var(--marginHoriz); width: auto; max-width: 50%; height: auto; }
    .alignright { float: right; margin-left: var(--marginHoriz); width: auto; max-width: 50%; height: auto; }
    figure.wp-block-image.cropped,
    .alignnone { margin-bottom: var(--marginVert); width: 100%; }
    .actual { max-width: 100%; width: auto; }

    .bg.crop-from-right { background-position: left top; }
    .bg.crop-from-left { background-position: right top; }

    figure { margin: 0 0 var(--marginVert); }
    figure img { /*background: var(--colour-lt-grey);*/ width: 100%; height: auto; display: block; color: var(--colour-primary); }
    .is-type-video[class*="bg-"] figcaption,
    figcaption { margin: 10px 0 0; margin-bottom: 0; font-size: 90%; font-weight: 600; }
    .is-type-video[class*="bg-"] figcaption,
    figcaption[class*="bg-"] { padding: 10px; margin: 0 0 10px; width: 100%; box-sizing: border-box; }
    figcaption.right { text-align: right; }


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

    main { flex: 1; }
    .inner-wrapper { width: var(--theWidth); box-sizing: border-box; /*padding: 0 var(--marginHoriz);*/ margin: 0 auto; position: relative; }
    .page-content { width: 100%; padding: var(--marginVert) 0 calc(var(--marginVert) * 2); margin: 0 auto; position: relative; }
    .single-page .page-content { padding: var(--marginVert) 0; }

    .block-full-width { width: 100%; margin: 0; /* auto;*/ }
    .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; }    
    .gap-top-xbig { margin-top: calc(var(--marginVert) * 2); }
    .gap-bot-xbig { margin-bottom: calc(var(--marginVert) * 2); }
    .gap-top-big { margin-top: var(--marginVert); }
    .gap-bot-big { margin-bottom: var(--marginVert); }
    .gap-top-small { margin-top: calc(var(--marginVert) / 2); }
    .gap-bot-small { margin-bottom: calc(var(--marginVert) / 2); }
    .mb0 { margin-bottom: 0 !important; }
    .mb10 { margin-bottom: 10px; }
    .mt { margin-top: var(--marginVert); }


    /* add switch-order to a column to make it first on mobile stacked */
    /* add bigfirst to columns to make first col full width on mobile (best for 3 and 4 cols */
    .columns { display: flex; flex-flow: row wrap; gap: var(--gridGap); }
    .col { flex: 1; }
    .cols2 { } /* add cols2 to keep 2 cols at all screen sizes */
    .cols3 { } /* add cols3 or cols4 for 3 or 4 col layouts */
    .cols4 { }
    .col25 { min-width: 250px; }
    .col33 { min-width: 350px; }
    .col66 { flex: 1 1 60%; }    
    .col75 { flex: 1 1 70%; }
    
    /* use with-image to position image */
    .col.with-image { display: flex; justify-content: center; align-items: center; }
    .col.with-image.image-top { align-items: flex-start; }
    .columns .col > *:last-child { margin-bottom: 0; }
    .vert-centre { align-self: center; }
    .columns picture:only-child img,
    .columns figure:only-child { margin-bottom: 0; }

    /* equal auto-size grid items - at least 250px wide */
    .grid { display: grid; grid-gap: var(--gridGap);  
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /*grid-template-rows: repeat(2, 100px); */
    } 
    
    

    hr { margin: var(--marginVert) 0; border: 0; }
    hr:before { content: ""; width: 50px; height: 2px; background: var(--colour-black); display: block; }
    hr.full { width: 100%; padding: 10px 0 0; margin-bottom: calc(var(--marginVert) /2); opacity: 0.33; }
    hr.full:before { width: 100%; }
    hr.full:after { width: 42px; content: ""; height: 16px; background-image: url(../images/system/divider.png);
    background-repeat: no-repeat; background-position: center center; display: block;
    background-size: 100%; position: relative; top: -9px; margin: -0 auto; }
    hr.dark { opacity: 1; }


    /* HOME HERO */
    .home .hero .columns { flex-flow: row nowrap;  overflow-x: hidden; }
    .home .hero .columns .col:first-child { flex: 1 1 65%; min-width: 370px; display: flex; justify-content: center; align-items: center; }
    .home .hero .columns .col:last-child { flex: 1 1 35%; display: flex; justify-content: center; align-items: center; }
    .home .hero .columns .col:last-child img { height: calc(100vh - 133px); width: auto; padding: 2vh; box-sizing: border-box; }



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

    .toolpage .button { text-transform: uppercase; padding: 6px 18px; font-size: 90%; }
    .toolpage textarea { width: 100%; }
    .toolpage textarea,
    .toolpage .singleField { border: 2px solid var(--colour-primary); margin-bottom: 0; padding: 7px 10px; box-sizing: border-box; border-radius: 12px; }
    .toolpage .output { border-color: var(--colour-link) !important; }
    .toolpage select { margin: 0 0 0 5px; }
    .toolpage .intro { font-weight: 600; }
    .optionsPanel { display: flex; flex-flow: row nowrap; gap: var(--gridGap); margin: 0 0 var(--marginVert); }
    .optionsPanel button { margin-bottom: 0; }
    .optionsPanel > *:first-child { flex: 0 0 66%; }
    label.full { width: 100%; display: block; margin: 5px 0 0; }
    .toolpage label input[type="checkbox"] { margin-right: 10px; }
    .optionsRow { margin-bottom: calc(var(--marginVert) / 2); }
    .toolPanel { padding: 12px 0; flex: 1; }
    .toolPanel .optionsRow:last-child { margin-bottom: 0; }
    .toolpage .optionsPanel:last-child { margin-bottom: 0; }

    .singleField { font-size: 120%; font-family: monospace; }
    
    .newPanel { display: flex; flex-flow: row nowrap; gap: var(--gridGap); margin: 0 0 var(--marginVert); }
    .widthFull { flex-flow: row wrap; }
    .widthFull .col { flex: 1 1 100%; }
    .col.w100 { flex: 1 1 100%; }
    .col.w70 { flex: 1 1 70%; }
    .col.w50 { flex: 1 1 50%; }
    .col.w30 { flex: 1 1 30%; }
    #wordCount { font-size: 4rem; letter-spacing: 0.025rem; width: 100%; display: block; }
    .newPanel p,
    .newPanel button { margin-bottom: 0; }
    .optionRow, label, .newPanel p { margin-bottom: calc(var(--marginVert) / 2); }
    .col .optionsRow:last-child{ margin-bottom: 0; }
    
    .button.buttonReset { background: var(--colour-dk-grey); }
/*
1st optionsPanel is 66/34
left col usually input, right col options - toolPanel
optionsRow for each row in toolPanel

2nd optionsPanel is 66/34
left col usually ouput, right col copy options - toolPanel
*/

    code { background: var(--colour-lt-grey); padding: 0px 5px; }
    pre code { display: inline-block; padding: 15px; }
    li code,
    p code { display: inline-block; margin: 0 5px; }

    #prependText, #appendText { display: inline-block; margin: 15px 0 5px; }
    .svg-box { height: 300px; width: 300px; max-width: 45vw; flex: none !important; position: relative; background: #aaa; overflow: hidden; }
    .svg-box:after { content: "Before"; position: absolute; left: 0; bottom: -30px; }
    #output-svg-box:after { content: "After"; }
    .svg-box svg { width: 100%; height: auto; }
    .svgmin-colours,
    .svgmin-colours li { padding: 0; margin: 0; list-style-type: none; }
    .svgmin-colours { margin: 0 0 calc(var(--marginVert)* 0.75); }
    .svgmin-colours li { display: inline-block; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; margin-right: 12px; }
    .zoom { transform: scale(5); }


/* ARTICLES -------------------------------------------- */

    article { padding-bottom: calc(var(--marginVert) * 1.5); flex: 1; }
    article.nogapbot { padding-bottom: 0; }
    article.gaptop { padding-top: var(--marginVert); }
    article > .inner-wrapper:first-child { margin-top: var(--marginVert); }

    article .width-medium,
    article .width-narrow { margin-left: auto; margin-right: auto; } /* centre main content */

    .dateline { font-size: 85%; font-weight: 600; margin-bottom: calc(var(--marginVert) / 2); color: var(--colour-primary); display: block; line-height: 140%; }
    .dateline i { padding-right: 10px; }
    .dateline a { float: right; padding: 0px 5px; }
    .dateline a:hover { background: var(--colour-link-hover); color: var(--colour-white); }


/* CONTACT FORM  -------------------------------------- */

    #form_contact { width: 100%; box-sizing: border-box; }
    #form_contact label { margin-bottom: 0; width: 100%; display: block; font-weight: 600; }
    #form_contact label i { font-size: 120%; width: 30px; opacity: 0.33; }
    #form_contact div { width: 100%; border-bottom: 2px solid var(--colour-page);
        padding: 10px; box-sizing: border-box; }
    #form_contact input[type="email"],
    #form_contact input[type="text"], #form_contact textarea {
        box-sizing: border-box; background: inherit;
        font-family: courier, "courier new", "lucida mono", fixed; font-size: 110%;
        width: 100%; margin: 10px 0 0; padding: 5px; border: 1px solid transparent;
    }
    form input[type="submit"] { margin-bottom: 0; }
    #form_contact div.error { background: var(--colour-lt-red); }
    #form_success { padding: 15px; }
    #form_success > *:last-child { margin-bottom: 0; }


/* SHARED FORM STYLING ------------------------- */

    form .check { visibility: hidden; margin: 10px 0; }
    form .check.show { visibility: visible; }
    #form_success { display: none; }


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

/* padded boxes */
    .padded { width: 100%; padding: 15px; box-sizing: border-box; margin-bottom: var(--marginVert); }
    .padded.rounded { border-radius: 10px; }
    .padded > *:last-child,
    .padded ul:last-child { padding-bottom: 0; margin-bottom: 0; }

/* callout box with (i) icon*/
    .callout-info { position: relative; border-left: 3px solid var(--colour-primary);
    margin: calc(var(--marginVert) + 10px) 0 var(--marginVert) 10px;
    width: calc(100% - 10px); padding: 25px 15px 15px; box-sizing: border-box; }
    .callout-info:before { position: absolute; top: -20px; left: -20px; font-family: var(--fontawesome); font-size: 30px; color: var(--colour-primary); content: "\f05a"; background: var(--colour-page); border-radius: 50%; border: 6px solid var(--colour-page); width: 30px; height: 30px; }
    .callout-info :last-child { margin-bottom: 0; }

/* blockquotes */
    blockquote { position: relative; padding: 20px 20px 20px 75px; box-sizing: border-box; margin-bottom: var(--marginVert); }
    blockquote:before { content: "\201C"; font-weight: 600; position: absolute; top: -24px; left: 15px;
    font-size: 6.5rem; line-height: 8rem; font-family: serif; font-style: italic; }
    blockquote > *:last-child { margin-bottom: 0; }

/* buttons */
    .button { display: inline-block; margin: 0 auto var(--marginVert); padding: 7px 25px; border: none; background: var(--colour-link); color: var(--colour-white); font-weight: 600; cursor: pointer;  transition: background 0.33s ease, color 0.33s ease; }
    .button + .button { margin-left: 15px; }
    .button.rounded { border-radius: var(--rounded); }
    .button.centred { display: block; max-width: 250px; text-align: center; }
    .button.outlined { border-width: 1px; border-style: solid; }
    .button:hover { background: var(--colour-link-hover); color: var(--colour-white); }
    .button i { margin: 0; padding: 0 10px 0 0; font-size: 120%; }
    .button[disabled] { opacity: 0.5; pointer-events: none; }
    
    
/* highlight icons */
    .icon-highlight { width: 30px; height: auto; margin: 0 !important; position: absolute; z-index: 250; top: 10px; right: 10px; }

/* accordions */
    .expandable-wrapper { clear: both; margin-bottom: var(--marginVert); }
    .expandable { width: 100%; box-sizing: border-box; margin-bottom: 2px; }
    .expandable[class*="bg"] { padding: 10px; }
    .expandable-wrapper .expandable:last-child { margin-bottom: 0; }
    .expandable .expandable-content { max-height: 0; overflow: hidden; padding-left: 25px; transition: max-height 0.5s ease; }
    /*.expandable .expandable-content p:not([class*="gap"]),*/
    .expandable .expandable-content div > *:last-child,
    h2.expandable-link,
    h3.expandable-link { margin-bottom: 0; }
    .expandable .expandable-content ul { padding-bottom: 0; }
    .expandable.show .expandable-content { max-height: var(--expander-max-height); }
    .expandable .expandable-content > div { margin-top: 10px; }
    .expandable-link { color: var(--colour-link); margin-bottom: 0; cursor: pointer; padding-left: 25px; position: relative; font-weight: 600; }
    .expandable-link:before { position: absolute; left: 0; top: 0; font-family: var(--fontawesome); opacity: 0.5; transition: transform 0.5s ease 0.1s; content: "\f107"; color: var(--colour-primary); /* angle down */ }
    .expandable.show .expandable-link:before { transform: rotate(180deg); }

/* videos */
    figure.is-type-video { }
    figure.is-type-video .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; overflow: hidden; height: auto; }
    figure.is-type-video .wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }


    .mobileOnly { display: none; }
    .desktopOnly {  }


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

    /*
    can have no pagination, dots and arrows, dots or arrows
    (add .has-dots and/or .has-arrows to .swiper
    add captions except for dots
    */

    .swiper { margin: 0 auto var(--marginVert); position: relative; overflow: hidden; padding: 0; z-index: 1; width: 100%; }
    .swiper.has-dots,
    .swiper.has-arrows {  padding-bottom: 10px; }
    .swiper.has-border { padding-bottom: 0; }

    .swiper .wp-block-gallery,
    .swiper .wp-block-group__inner-container,
    .wp-block-gallery { position: relative; width: 100%; z-index: 1; display: flex; transition-property: transform;
        box-sizing: content-box; align-items: flex-start; }
    .wp-block-gallery { padding-bottom: 30px; }
    .swiper .wp-block-image,
    .swiper-slide { width: 100%; height: auto; position: relative; flex-shrink: 0; display: flex; flex-flow: row wrap; margin-bottom: 0; cursor: ew-resize; }
    .swiper-slide img { width: 100%; height: auto; }

    .swiper-pagination,
    .swiper-buttons { display: none; flex-flow: row nowrap; gap: 20px; justify-content: center; margin: 20px 0 0;
    position: absolute; bottom: 0; right: 0; }

    .swiper .swiper-pagination { bottom: 3px; }
    .swiper.has-border .swiper-pagination { bottom: 15px; }
    .swiper .swiper-buttons { bottom: 27px; right: 0; }
    .swiper.has-border .swiper-buttons { bottom: 17px; }
    .swiper.has-arrows .swiper-buttons { display: flex; }
    .swiper.has-dots .swiper-pagination { display: flex; }
    .swiper[class*="bg-"] .swiper-buttons { right: 10px; }

    .swiper.has-border.has-dots .swiper-pagination { display: none; }
    .swiper.has-arrows figcaption { padding-right: 65px; }

    .swiper-pagination { gap: 15px; right: auto; bottom: 10px; width: 100%; }
    .swiper-pagination-bullet { width: 11px; height: 15px; cursor: pointer; position: relative; display: inline-block; text-align: center; color: var(--colour-primary); }
    .swiper-pagination-bullet-active { width: 15px; height: 15px; }
    .swiper-pagination-bullet:after { position: absolute; left: 0; top: 2px; font-family: var(--fontawesome); font-size: 11px; z-index: 10; content: "\f111"; z-index: 20; opacity: 0.5; }
    .swiper-pagination-bullet-active:after { font-size: 15px; top: 0; opacity: 1; }

    .swiper-buttons div { width: 20px; height: 30px; cursor: pointer; position: relative; color: var(--colour-primary); }
    .swiper-buttons div:after { position: absolute; left: 0; top: 0; font-family: var(--fontawesome); font-size: 30px; z-index: 10; }
    .swiper-prev:after { content: "\f104"; }
    .swiper-next:after { content: "\f105"; }
    .swiper figcaption { margin-top: 0; padding-top: 15px; padding-bottom: 15px; font-weight: normal; }
    .swiper[class*="bg-"] figcaption { padding-left: 15px; }
    .swiper.has-border { border-bottom-width: 2px; border-bottom-style: solid; }


/* COOKIES MSG ---------------------------------------- */

    .cookiemsg { width: 100%; position: fixed; left: 0; bottom: 0; padding: 25px 0; z-index: 9999; background: var(--colour-slate); }
    .cookiemsg div p { margin-bottom: 0; font-size: 1.6rem; }
    .cookiemsg .button { display: inline-block; margin: 10px 15px 0 0; padding: 2px 20px; }

    .cookiemsg div p,
    .cookiemsg span a:hover { color: var(--colour-white); }
    .cookiemsg span a { color: var(--colour-mid-grey); }
    .cookiemsg .button { color: var(--colour-black);  background-color: var(--colour-white); }
    .cookiemsg .button:hover { color: var(--colour-white);  background-color: var(--colour-mid-green); }



/* PAGE COMPONENTS ------------------------------------ */

    /* index page */
    .home-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: var(--gridGap); }
    .home-grid .grid-col { padding: 20px; background: var(--colour-white); }
    .home-grid ul,
    .home-grid li { list-style-type: none; margin: 0; padding-left: 0; }
    .home-grid li { font-size: 1.7rem; border-top: 1px dotted var(--colour-navy); padding: 3px 0; }
    .home-grid li:last-child { border-bottom: 1px dotted var(--colour-navy); }
    .home-grid li.header { font-weight: 700; margin-bottom: 10px; border-top: none; padding: 0; }
    .home-grid li.header i { opacity: 0.50; padding-right: 10px; }    
    .home-grid li a { font-weight: 500; text-decoration: none; }
    .home-grid ul { padding: 0; }

    .home-grid li:not(.header) i { opacity: 0.75; padding-left: 10px; }    
    .ext:before { content: "*"; font-size: 90%; padding-right: 7px; opacity: 0.75; }


/* NO JAVASCRIPT -------------------------------------- */



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

	.c-black { color: var(--colour-black); }
    .c-lt-black { color: var(--colour-lt-black); }
	.c-white { color: var(--colour-white); }
    .c-dk-red { color: var(--colour-dk-red); }
	.c-red { color: var(--colour-red); }
    .c-yellow { color: var(--colour-yellow); }
    .c-lt-yellow { color: var(--colour-lt-yellow); }
    .c-tangerine { color: var(--colour-tangerine); }
    .c-orange { color: var(--colour-orange); }
    .c-amber { color: var(--colour-amber); }
    .c-mint { color: var(--colour-mint); }
    .c-lt-green { color: var(--colour-lt-green); }
    .c-mid-green { color: var(--colour-mid-green); }
    .c-dk-green { color: var(--colour-dk-green); }
    .c-olive { color: var(--colour-olive); }
    .c-green-blue { color: var(--colour-green-blue); }
    .c-cyan { color: var(--colour-cyan); }
    .c-lt-cyan { color: var(--colour-lt-cyan); }
    .c-lt-blue { color: var(--colour-lt-blue); }
    .c-navy { color: var(--colour-navy); }
    .c-royal-blue { color: var(--colour-royal-blue); }
    .c-violet { color: var(--colour-violet); }
    .c-dk-violet { color: var(--colour-dk-violet); }
    .c-indigo { color: var(--colour-indigo); }
    .c-brown { color: var(--colour-brown); }
    .c-cute-pink { color: var(--colour-cute-pink); }
    .c-hot-pink { color: var(--colour-hot-pink); }
    .c-magenta { color: var(--colour-magenta); }
    .c-lt-grey { color: var(--colour-lt-grey); }
    .c-mid-grey { color: var(--colour-mid-grey); }
    .c-dk-grey { color: var(--colour-dk-grey); }
    .c-slate { color: var(--colour-slate); }
    .c-purple { color: var(--colour-purple); }
    .c-gold-bright { color: var(--colour-gold-bright); }
    .c-gold-dark { color: var(--colour-gold-dark); }
    .c-gold-light { color: var(--colour-gold-light); }
    .c-gold-classic { color: var(--colour-gold-classic); }
    .c-gold-rose { color: var(--colour-gold-rose); }
    .c-salmon { color: var(--colour-salmon); }
    .c-bronze { color: var(--colour-bronze); }
    .c-flesh { color: var(--colour-flesh); }
    
    .c-primary { color: var(--colour-primary); }
    .c-highlight-dk { color: var(--colour-highlight-dk); }
    .c-highlight-lt { color: var(--colour-highlight-lt); }
    .c-link { color: var(--colour-link); }


	.bg-black, .bull-black li:before { background-color: var(--colour-black); }
    .bg-lt-black, .bull-lt-black li:before { background-color: var(--colour-lt-black); }
	.bg-white, .bull-white li:before { background-color: var(--colour-white); }
    .bg-dk-red, .bull-dk-red li:before { background-color: var(--colour-dk-red); }
	.bg-red, .bull-red li:before { background-color: var(--colour-red); }
    .bg-yellow, .bull-yellow li:before { background-color: var(--colour-yellow); }
    .bg-lt-yellow, .bull-lt-yellow li:before { background-color: var(--colour-lt-yellow); }
    .bg-tangerine, .bull-tangerine li:before { background-color: var(--colour-tangerine); }
    .bg-orange, .bull-orange li:before { background-color: var(--colour-orange); }
    .bg-amber, .bull-amber li:before { background-color: var(--colour-amber); }
    .bg-mint, .bull-mint li:before { background-color: var(--colour-mint); }
    .bg-lt-green, .bull-lt-green li:before { background-color: var(--colour-lt-green); }
    .bg-mid-green, .bull-mid-green li:before { background-color: var(--colour-mid-green); }
    .bg-dk-green, .bull-dk-green li:before { background-color: var(--colour-dk-green); }
    .bg-olive, .bull-olive li:before { background-color: var(--colour-olive); }
    .bg-green-blue, .bull-green-blue li:before { background-color: var(--colour-green-blue); }
    .bg-cyan, .bull-cyan li:before { background-color: var(--colour-cyan); }
    .bg-lt-cyan, .bull-lt-cyan li:before { background-color: var(--colour-lt-cyan); }
    .bg-lt-blue, .bull-lt-blue li:before { background-color: var(--colour-lt-blue); }
    .bg-navy, .bull-navy li:before { background-color: var(--colour-navy); }
    .bg-royal-blue, .bull-royal-blue li:before { background-color: var(--colour-royal-blue); }
    .bg-violet, .bull-violet li:before { background-color: var(--colour-violet); }
    .bg-dk-violet, .bull-dk-violet li:before { background-color: var(--colour-dk-violet); }
    .bg-indigo, .bull-indigo li:before { background-color: var(--colour-indigo); }
    .bg-brown, .bull-brown li:before { background-color: var(--colour-brown); }
    .bg-cute-pink, .bull-cute-pink li:before { background-color: var(--colour-cute-pink); }
    .bg-hot-pink, .bull-hot-pink li:before { background-color: var(--colour-hot-pink); }
    .bg-magenta, .bull-magenta li:before { background-color: var(--colour-magenta); }
    .bg-lt-grey, .bull-lt-grey li:before { background-color: var(--colour-lt-grey); }
    .bg-mid-grey, .bull-mid-grey li:before { background-color: var(--colour-mid-grey); }
    .bg-dk-grey, .bull--dk-grey li:before { background-color: var(--colour-dk-grey); }
    .bg-slate, .bull-slate li:before { background-color: var(--colour-slate); }
    .bg-purple, .bull-purple li:before { background-color: var(--colour-purple); }
    .bg-gold-bright, .bull-gold-bright li:before { background-color: var(--colour-gold-bright); }
    .bg-gold-dark, .bull-gold-dark li:before { background-color: var(--colour-gold-dark); }
    .bg-gold-light, .bull-gold-light li:before { background-color: var(--colour-gold-light); }
    .bg-gold-classic, .bull-gold-classic li:before { background-color: var(--colour-gold-classic); }
    .bg-gold-rose, .bull-gold-rose li:before { background-color: var(--colour-gold-rose); }
    .bg-salmon, .bull-salmon li:before { background-color: var(--colour-salmon); }
    .bg-bronze, .bull-bronze li:before { background-color: var(--colour-bronze); }    
    .bg-flesh, .bull-flesh li:before { background-color: var(--colour-flesh); }    
    
    .bg-pattern-lt { background: var(--colour-lt-grey) url(../images/system/tile-for-light.png); }
    .bg-primary, .bull-primary li:before { background-color: var(--colour-primary); }
    .bg-highlight-dk, .bull-highlight-dk li:before { background-color: var(--colour-highlight-dk); }
    .bg-highlight-lt, .bull-highlight-lt li:before { background-color: var(--colour-highlight-lt); }
    .bg-link, .bull-link li:before { background-color: var(--colour-link); }

	.border-black { border-color: var(--colour-black); }
    .border-lt-black { border-color: var(--colour-lt-black); }
	.border-white { border-color: var(--colour-white); }
    .border-dk-red { border-color: var(--colour-dk-red); }
	.border-red { border-color: var(--colour-red); }
    .border-yellow { border-color: var(--colour-yellow); }
    .border-lt-yellow { border-color: var(--colour-lt-yellow); }
    .border-tangerine { border-color: var(--colour-tangerine); }
    .border-orange { border-color: var(--colour-orange); }
    .border-amber { border-color: var(--colour-amber); }
    .border-mint { border-color: var(--colour-mint); }
    .border-lt-green { border-color: var(--colour-lt-green); }
    .border-mid-green { border-color: var(--colour-mid-green); }
    .border-dk-green { border-color: var(--colour-dk-green); }
    .border-olive { border-color: var(--colour-olive); }
    .border-green-blue { border-color: var(--colour-green-blue); }
    .border-cyan { border-color: var(--colour-cyan); }
    .border-lt-cyan { border-color: var(--colour-lt-cyan); }
    .border-lt-blue { border-color: var(--colour-lt-blue); }
    .border-navy { border-color: var(--colour-navy); }
    .border-royal-blue { border-color: var(--colour-royal-blue); }
    .border-violet { border-color: var(--colour-violet); }
    .border-dk-violet { border-color: var(--colour-dk-violet); }
    .border-indigo { border-color: var(--colour-indigo); }
    .border-brown { border-color: var(--colour-brown); }
    .border-cute-pink { border-color: var(--colour-cute-pink); }
    .border-hot-pink { border-color: var(--colour-hot-pink); }
    .border-magenta { border-color: var(--colour-magenta); }
    .border-lt-grey { border-color: var(--colour-lt-grey); }
    .border-mid-grey { border-color: var(--colour-mid-grey); }
    .border-dk-grey { border-color: var(--colour-dk-grey); }
    .border-slate { border-color: var(--colour-slate); }
    .border-purple { border-color: var(--colour-purple); }
    .border-primary { border-color: var(--colour-primary); }
    .border-highlight-dk { border-color: var(--colour-highlight-dk); }
    .border-highlight-lt { border-color: var(--colour-highlight-lt); }
    .border-link { border-color: var(--colour-link); }
    .border-gold-bright { border-color: var(--colour-gold-bright); }
    .border-gold-dark { border-color: var(--colour-gold-dark); }
    .border-gold-light { border-color: var(--colour-gold-light); }
    .border-gold-classic { border-color: var(--colour-gold-classic); }
    .border-gold-rose { border-color: var(--colour-gold-rose); }
    .border-salmon { border-color: var(--colour-salmon); }
    .border-bronze { border-color: var(--colour-bronze); }
    .border-flesh { border-color: var(--colour-flesh); }


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


/* FIRST BREAKPOINT IS theWidth -1 */
@media only screen and (max-width : 1279px) {
    /* redefine vars here */
    :root {
        --theWidth: 100%;

    }

    .home .hero .inner-wrapper { padding: 0; }
    .home .hero .columns .col:last-child img { height: calc(100vh - 122px); }
    
    .inner-wrapper { padding: 0 var(--marginHoriz); }
    .col33 { min-width: 300px; }    
}


@media only screen and (max-width : 1023px) {
    :root {
        --block-medium: 100%;
        --fontSize: 1.75rem;
        --gridGap: 25px; 
        --marginVert: 40px;
        --marginHoriz: 20px;        
    }

    .columns.cols4 .col { flex: 1 1 calc(50% - var(--gridGap)); }   
    .columns.cols4.bigfirst .col { flex: 1 1 calc(33% - var(--gridGap)); }    
    .columns.cols4.bigfirst .col:first-child { flex: 1 1 100%; }
    .col66 { flex: 1 1 55%; }
    .col33 { min-width: 275px; } 

    .home-grid { grid-template-columns: repeat(2, 1fr); }    
}


@media only screen and (max-width : 767px) {
    :root {
        --block-narrow: 100%;
    }

	h1 { font-size: 3.0rem; }
    h2 { font-size: 2.0rem; }
    h3 { font-size: 2.0rem; }
    h4 { font-size: 1.8rem; }
    h1 br:not(.always), h2 br:not(.always), h3 br:not(.always) { display: none; }
    
    .columns { flex-flow: row wrap; }
    /*.columns div[class^="col"] { flex: 1 1 100%; }*/
    .col.order-switch { order: -1; }
    .columns.cols3 .col { flex: 1 1 100%; }   
    .columns.cols3.bigfirst .col { flex: 1 1 calc(50% - var(--gridGap)); }    
    .columns.cols3.bigfirst .col:first-child { flex: 1 1 100%; }

    .mobileOnly { display: block; }
    .desktopOnly { display: none; }

    /* add cropped to crop and centre */
    /* or add crop-from-left or crop-from-right */
    .inner-wrapper.width-medium figure.cropped img { height: 410px; width: 100%; object-fit: cover; object-position: center; }
    .inner-wrapper.width-medium figure.crop-from-left img { object-position: right; }
    .inner-wrapper.width-medium figure.crop-from-right img { object-position: left; }
    .block-full-width figure.cropped img { height: 510px; }

    .column-wrapper { flex-flow: row wrap; grid-template-columns: repeat(1, 1fr); }
    .column-wrapper p { margin-top: 0; }
    
    .home .hero .columns .col:first-child { flex: 1 1 100%; width: 100%; height: 100%; min-width: auto; position: absolute;     align-items: flex-end; z-index: 100; }
    .home .hero .columns .col:last-child  { flex: 1 1 100%; min-width: auto; height: 100%; }
    .home .hero .columns .col:last-child img { padding: 0; }
    .home .hero .tag { font-size: clamp(4.5rem, 6vw, 8.0rem); padding-bottom: 12.5vh; text-shadow: -1px -2px 10px rgba(0,0,0,1); }    
}


@media only screen and (max-width : 599px) {
    :root {
        --marginVert: 26px;
        --marginHoriz: 15px;
    }
	h1 { font-size: 2.75rem; }

    .columns:not(.cols2) .col { flex: 1 1 100% !important; }
    
    .not-mobile { display: none; }
    .toplink.fas {bottom: 0px; }

    .alignleft,
    .alignright { float: left; width: 100%; max-width: 100%; margin: 0 0 var(--marginVert); }


    /* add cropped to crop and centre */
    /* or add crop-from-left or crop-from-right */
    .inner-wrapper.width-narrow figure.cropped img { height: 300px; width: 100%; object-fit: cover; object-position: center; }
    .inner-wrapper.width-narrow figure.crop-from-left img { object-position: right; }
    .inner-wrapper.width-narrow figure.crop-from-right img { object-position: left; }
    .block-full-width figure.cropped img { height: 350px; }
    .inner-wrapper.width-medium figure.cropped img { height: 300px; }
    

    .home .hero .columns .col:last-child img { height: calc(100vh - 96px); }
    .home .hero .tag { font-size: clamp(3.5rem, 6vw, 8.0rem); }
    .home .hero .columns .col:first-child { width: 95%; justify-content: flex-end; } 

    .home-grid { grid-template-columns: repeat(1, 1fr); }
}


@media only screen and (max-width : 499px) {
    .form_submit_area { flex-flow: row wrap; justify-content: flex-end; }
    .form_submit_area > * { flex: 0 0 100%; }
    #form_newsletter #form_submit { margin: 15px 0 0; }

    #form_submit,
    .button { padding: 6px 20px; }
}


@media only screen and (max-width : 374px) {
    .toplink { bottom: 20px; }
    .home .hero .columns .col:last-child img { height: calc(100vh - 91px); }    
}