body {
}
/* style.css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");

/* # = div, . = class */

div.content {
    max-width: 1300px;    /*was 1350px*/  /*960px;*/
    margin: auto;
    height: 100%;
    /*overflow-x: hidden;
    overflow-y: hidden;*/
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", Verdana, MS Sans Serif, Arial, Helvetica;
    /*"Inter", sans-serif;*/
}

:root {
    --dark-grey: #333333;
    --medium-grey: #636363;
    --light-grey: #eeeeee;
    --ash: #f4f4f4;
    --primary-color: #2b72fb;
    --white: white;
    --border: 1px solid var(--light-grey);
    --shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

body {
    font-family: inherit;
    /*background-color: #F87326;*/ /*var(--white);*/
    color: var(--dark-grey);
    letter-spacing: -0.4px;
    height: 100%; /* added */
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: inherit;
}

.btn {
    display: block;
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
    padding: 0.6rem 1.4rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 5px;
}

.icon {
    padding: 0.5rem;
    background-color: var(--light-grey);
    border-radius: 10px;
}
/**/
.logo {
    margin-right: 1.5rem;
}



/*  Menu styling  */


#nav-menu {
    border-bottom: var(--border);
}

.container_m {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1300px;    /*1366px;*/     /* was 700  - was 1600*/
    margin: 0 auto;
    margin-left: 10px;
    column-gap: 2rem;
    height: 50px;        /*50px;*/ /*was 90px, then 125px */
    padding: 1.2rem 3rem;
    /*margin-right: 225px;*/
    /*background-color:blanchedalmond;*/
}

.container_mcol { /* A trial of a coloured background Jan 2024 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*max-width: 700px;*/ /*was 1600*/
    margin: 0 auto;
    column-gap: 2rem;
    height: 125px; /*was 90px*/
    padding: 1.2rem 3rem;
    /*margin-right: 225px;*/
    background-color: #FF6633;  
}

/* for menu bar on home page*/ 
.dark_top {
    margin: auto;
    height: 70px;
    /*/*background-color: #585858;*/*/
    margin-right:10px;
}


.menu {
    position: page;    /*: relative;*/
    background: var(--white);
}

.menu-bar li:first-child .dropdown {
    flex-direction: initial;
    /*min-width: 480px; This sets the width of the first drop down (fine for side by side items as initial demo). */
}

.menu-bar li:first-child ul:nth-child(1) {
    border-right: var(--border);
}

.menu-bar li:nth-child(n + 2) ul:nth-child(1) {
    border-bottom: var(--border);
}

.menu-bar .dropdown-link-title {
    font-weight: 700;
    color: green;  /*added Jan 2024 to avoid look of duplication */
    font-style: italic;
}

.menu-bar .nav-link {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.6px;
    padding: 0.3rem;
    min-width: 60px;
    margin: 0 0.6rem;
}

    .menu-bar .nav-link:hover,
    .dropdown-link:hover {
        color: var(--primary-color);
    }

.nav-start,
.nav-end,
.menu-bar,
.right-container_m,
.right-container_m .search {
    display: flex;
    align-items: center;
    /*added 26/02/25 to move drop down from left edge */
    /*margin-left: 150px;*/
    /* was - align-items: stretch ;*/
}

.dropdown {
    display: flex;
    flex-direction: column;
    min-width: 230px;
    background-color: var(--white);
    border-radius: 10px;
    position: absolute;
    top: 56px;  /*was 36px*/
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.97) translateX(-5px);
    transition: 0.1s ease-in-out;
    box-shadow: var(--shadow);
}

    .dropdown.active {
        visibility: visible;
        opacity: 1;
        transform: scale(1) translateX(5px);
    }

    .dropdown ul {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1.2rem;
        font-size: 0.95rem;
    }

.dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.15rem;

}

.dropdown-link {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-radius: 7px;
    transition: 0.1s ease-in-out;
    font-size: x-large;   /*was  xx-large;*/
}

    .dropdown-link p {
        font-size: 0.8rem;
        color: var(--medium-grey);
    }

.right-container_m {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

    .right-container_m .search {
        position: relative;
    }

    .right-container_m img {
        border-radius: 50%;
    }

.search input {
    background-color: var(--ash);
    border: none;
    border-radius: 6px;
    padding: 0.7rem;
    padding-left: 2.4rem;
    font-size: 16px;
    width: 100%;
    border: var(--border);
}

.search .bx-search {
    position: absolute;
    left: 10px;
    top: 50%;
    font-size: 1.3rem;
    transform: translateY(-50%);
    opacity: 0.6;
}

#hamburger {
    display: none;
    padding: 0.1rem;
    margin-left: 1rem;
    font-size: 1.9rem;
}

@media (max-width: 4850px) {  /* was 850px or 700px       (before hamburger activates)*/
    #hamburger {
        display: block;
    }

    /* Note width of option menu bar controlled by width in  .textMenu */

    .container_m {
        padding: 1.2rem;
    }

    .menu {
        display: none;
        position: absolute;
        top: 80px;  /*was 108*/
        left: 0px;
        min-height: 100vh;
        width: 100vw;
    }

    .menu-bar li:first-child ul:nth-child(1) {
        border-right: none;
        border-bottom: var(--border);
    }

    .dropdown {
        display: none;
        min-width: 100%;
        border: none !important;
        border-radius: 5px;
        position: static;
        top: 0;
        left: 0;
        visibility: visible;
        opacity: 1;
        transform: none;
        box-shadow: none;
    }

        .menu.show,
        .dropdown.active {
            display: block;
        }

        .dropdown ul {
            padding-left: 0.3rem;
        }

    .menu-bar {
        display: flex;
        flex-direction: column;
        /*align-items: stretch;*/
        align-items: center; /* added 26/02/2025 as a test - seems to work well */
        row-gap: 1rem;
        padding: 1rem;
    }

        .menu-bar .nav-link {
            display: flex;
            justify-content: space-between;
            width: 100%; 
            font-weight: 600;
            font-size: 1.2rem;
            margin: 0;

        }

        /*.menu-bar li:first-child .dropdown {
            min-width: 100%;
        }*/

        .menu-bar > li:not(:last-child) {
            padding-bottom: 0.5rem;
            border-bottom: var(--border);
        }
}

@media (max-width: 600px) {
    .right-container_m {
        display: none;
    }
}

/*Added by me - Jan 2024*/


/* new class for menu@  07/11/24 */
.textMenu {
    FONT-WEIGHT: 500;
    FONT-SIZE: x-large; /*:  larger;*/
    COLOR: #043B71; /*003366;*/
    BACKGROUND-COLOR: #F78C20;
    max-width: 650px;  /* <<<< added 26/02/2025 to limit size of menu bar */
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, Verdana, MS Sans Serif, Arial, Helvetica;
    text-align:center
}

/* end of menu bits  */




img.ImageCentre {
    float: none;
    border: 0;
    margin-left: 10px;
    margin-right: 10px;
    width: 100%;
}

.ImageRight {
    float: right;
    margin-left: 10px;
    margin-right: 10px;
}

img.ImageLeft {
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}


#main_col {
    z-index: 4;
    padding-bottom: 25px;
    background-color: #fff;
    max-width: 130px;     /*1366px;*/      
    margin: auto;
    height: auto;
}

#right_col {
    width: 102px;
    min-width: 102px;
    float: right;
    z-index: 2;
    font-size: 11px;
    background-color: #ffffff;
    /*margin-left:14px;*/ /* correct ?? */
}

    #right_col img {
        position: fixed;
    }

@media (max-width: 1500px) {
    #right_col {
        display: none;
    }
}

p {
    padding: 5px;
    margin-left:10px;
}
/* some breathing space*/



#centre_col {
    z-index: 4;
    margin-left: 0px; /*was 190px;*/
    /*margin-right: 102px;*/   /*was 225px*/
    margin-right: 10px;   /*was 10*/
    padding-bottom: 25px;
    /*border-left:1px solid #000;
	border-right:1px solid #000;*/
    background-color: #fff;
    max-width: 1300px;     /*1366px;*/      /*was 1150*/
    align-content:center;
}

    #centre_col div {
        padding-right: 10px;
    }


    /*for events table*/

.flex-container_500 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 500px;
    /*height: 100vh; /* Optional: this makes the container fill the entire viewport height*/ 
}

.flex-container_700 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 715px;
    /*height: 100vh; /* Optional: this makes the container fill the entire viewport height */
}


h1 {
    font: 25px arial,sans-serif,georgia,serif;
    margin: 10px;
    font-weight: bold;
    color: #333333;
    padding-left: 5px;
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 1.9em !important;
}

h2 {
    font: 21px arial,sans-serif,georgia,serif;
    margin: 10px;
    font-weight: bold;
    color: #333333;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
h3 {
    font: 18px arial,sans-serif,georgia,serif;
    margin: 10px;
    font-weight: bold;
    color: #003333;
       /*#333333;*/
    padding-left: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
}

h4 {
    font: 15px arial,sans-serif,georgia,serif;
    margin: 10px;
    font-weight: bold;
    color: #333333;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
}

h5, h6 {
    font-size: 1em;
    padding-left: 5px;
    padding-right: 10px;
}

img.ImageCentre {
    float: none;
    border: 0;
    margin: 15px;
    width: 100%;
}

.ImageRight {
    float: right;
    margin: 15px; 
}

img.ImageLeft {
    float: left;
    margin: 15px; 
}


/* added for index page image swapping - Jan 2024 */
#cycler {
    position: relative;
}

    #cycler img {
        width: 100%;
        max-width: 1200px;
        /*max-height: 592px;*/
        margin-bottom: 10px;
        margin-top: 10px;
        margin-left: 15px;
        /*margin-right: 75px;*/   /*Added 08/11/2024*/
        /*align-content:center;*/
    }

    /* for items in a hozizontal div */

.top > * {
    vertical-align: top;
}


.textabout {
    FONT-WEIGHT: 600; /*: bold;*/
    FONT-SIZE: 1em;
    COLOR: #003333;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: MS Sans Serif, Arial, Verdana, Helvetica;
    /*background-color: #F87326;*/
}

.directiontext {
    FONT-WEIGHT: 400; /*: bold;*/
    FONT-SIZE: 1em;
    COLOR: #003333;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, Arial, Verdana, Helvetica;
    background-color: #E2D0AC;
    /*width: 960px; 
    margin: auto;*/
    padding-right: 10px;
    margin-left: 0px;
    margin-right: 10px;
}

.textHomeWhite {
    FONT-WEIGHT: 600;
    FONT-SIZE: 1.5em;
    COLOR: white;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, Verdana, MS Sans Serif,  Helvetica;
    background-color: #F87326;
}

.textHomeWhiteSoft {
    FONT-WEIGHT: 500;
    FONT-SIZE: 1.5em;
    COLOR: white;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: MS Sans Serif, Helvetica, Verdana, Arial;
    background-color: #F87326;
}

.textHomeWhiteSoftSmaller {
    FONT-WEIGHT: 500;
    FONT-SIZE: 1.4em;
    COLOR: white;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, MS Sans Serif, Helvetica, Verdana, Arial;
    background-color: #F87326;
}

.textHomeDarkSoftOnOrange {
    FONT-WEIGHT: 500;
    FONT-SIZE: 1.5em;
    COLOR: #444652;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, MS Sans Serif, Helvetica, Verdana, Arial;
    background-color: #F87326;
}

.textHomeWhiteSoftSmallerOnGrey {
    FONT-WEIGHT: 200;
    FONT-SIZE: 1.0em;
    COLOR: white;
    LINE-HEIGHT: 1.0em;
    FONT-STYLE: normal;
    FONT-FAMILY: Helvetica, Comic Sans MS, MS Sans Serif,  Arial, Verdana, Inter;
    background-color: #6F7074;
}

.textHomeWhiteSmaller {
    FONT-WEIGHT: 500;
    FONT-SIZE: large;
    COLOR: white;
    LINE-HEIGHT: 1.4em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, Arial, Verdana, MS Sans Serif, Helvetica,;
    background-color: #F87326;
    /*max-width:1000px;*/
}

.textHomeWhiteMedium {
    FONT-WEIGHT: 500;
    FONT-SIZE: larger;
    COLOR: white;
    LINE-HEIGHT: 1.4em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, MS Sans Serif, Arial, Verdana, Helvetica, ; 
    background-color: #F87326;
}

.textHomeWhiteLarge {
    FONT-WEIGHT: 500;   /*was 600*/
    FONT-SIZE: 2.5em;  /*was  2.7*/
    COLOR: white; /*#33cc66;*/ /*#66CC99;*/ /* #09A290;*/
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, Verdana, MS Sans Serif, Helvetica;
    background-color: #F87326;
    /*margin-left:5px;*/
}

.textHomeWhiteExtraLarge {
    FONT-WEIGHT: 600;
    FONT-SIZE: 2.9em;
    COLOR: white;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, Verdana, MS Sans Serif, Helvetica;
    background-color: #F87326;
}

.textHomeWhiteExtraLargeClrBack {
    FONT-WEIGHT: 600;
    FONT-SIZE:  4.2em;
    COLOR: white;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, Verdana, MS Sans Serif, Helvetica;
    text-align:center;
    padding-top:20px;
    /*background-color: #F87326;*/
}

/*new fix*/
.textHomePageTitleWhiteLarge {
    FONT-WEIGHT: 500;
    FONT-SIZE: 2.5em;
    COLOR: white;
    LINE-HEIGHT: 1.10em;
    FONT-STYLE: normal;
    FONT-FAMILY: MS Sans Serif, Helvetica, Verdana, Arial ;
    text-align: center;
    padding-top: 20px;
    /*background-color: #F87326;*/
}


.textHomeDark {
    FONT-WEIGHT: 600;
    FONT-SIZE: 1.5em;
    COLOR: #444652;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, Verdana, MS Sans Serif, Arial, Helvetica;
    background-color: #F87326;
    margin-left: 5px;
}

.textHomeDarkMedium {
    FONT-WEIGHT: 400;
    FONT-SIZE: large;
    COLOR: white;   /*#444652;   ;*/ /*#333439;*/ /*#444652;*/
    LINE-HEIGHT: 1.0em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, Verdana, MS Sans Serif, Arial, Helvetica,;
    align-content: center;
}
.textHomeDarkMediumOnOrange {
    FONT-WEIGHT: 500;
    FONT-SIZE: larger;
    COLOR: white; /*#444652;   ;*/ /*#333439;*/ /*#444652;*/
    LINE-HEIGHT: 1.4em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, Verdana, MS Sans Serif, Arial, Helvetica,;
    background-color: #F87326;
    align-content: center;
    margin-left: 5px;
}

.textHomeDarkSmallerOnOrange {
    FONT-WEIGHT: 600;
    FONT-SIZE: larger;
    COLOR: #444652;
    LINE-HEIGHT: 1.4em;
    FONT-STYLE: normal;
    FONT-FAMILY: Inter, Comic Sans MS, Verdana, MS Sans Serif, Arial, Helvetica,;
    background-color: #F87326;
    align-content: center;
    margin-left:5px;
}

.textHomeDarkPaleBacking {
    FONT-WEIGHT: 600;
    FONT-SIZE: medium;                      /*1.5em;*/ COLOR: #444652;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, Verdana, MS Sans Serif, Arial, Helvetica;
    background-color: antiquewhite;
    margin-left: 10px;
    margin-right: 10px;
}




.textHomeGreyMedium {
    FONT-WEIGHT: 600;
    FONT-SIZE: large;
    COLOR: #444652; /*#333439;*/ /*#444652;*/
    LINE-HEIGHT: 1.20em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, Verdana, MS Sans Serif, Arial, Helvetica,;
    align-content: center;
    margin-right: 10px;
}

.textHomeGreenLarge {
    FONT-WEIGHT: 600;
    FONT-SIZE: 2.5em;
    COLOR: #99ff99;    /*#33cc66;*/   /*#66CC99;*/ /* #09A290;*/
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Verdana, MS Sans Serif, Arial, Helvetica;
    background-color: #F87326;
}

.textHomeGreenMedium {
    FONT-WEIGHT: 500;
    FONT-SIZE: larger;
    COLOR: #66CC99; /* #09A290;*/
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, Verdana, MS Sans Serif, Arial, Helvetica;
    background-color: #F87326;
}



.textLocation {
    FONT-WEIGHT: 600; /*: bold;*/
    FONT-SIZE: 1em;
    COLOR: #000000;
    background-color: #F87326;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Verdana, MS Sans Serif, Arial, Helvetica;
}

.textHomeBlackMedium {
    FONT-WEIGHT: 500;
    FONT-SIZE: larger;
    COLOR: #000000;
    LINE-HEIGHT: 1.4em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, Verdana, MS Sans Serif, Arial, Helvetica,;
    background-color: #F87326;
}

.homeWYellowLarge {
    FONT-WEIGHT: 600;
    FONT-SIZE: 2.9em;
    COLOR: #F7F3C6;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, Verdana, MS Sans Serif, Helvetica;
    background-color: #F87326;
}

.homeWSeaGrassLarge {
    FONT-WEIGHT: 600;
    FONT-SIZE: 2.9em;
    COLOR: #9FC9C7;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, Verdana, MS Sans Serif, Helvetica;
    background-color: #F87326;
}

.homeBigWhiteLarge {
    FONT-WEIGHT: 600;
    FONT-SIZE: 2.9em;
    COLOR: white;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, Verdana, MS Sans Serif, Helvetica;
    background-color: #F87326;
}


.textTraderTitle {
    FONT-WEIGHT: 400;
    FONT-SIZE: smaller;
    COLOR: white;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Inter, Comic Sans MS, MS Sans Serif, Arial, Verdana, Helvetica,;
    background-color: #F87326;
}

.textTraderLocation {
    FONT-WEIGHT: 400;
    FONT-SIZE: smaller;
    COLOR: #444652;
    LINE-HEIGHT: 1.25em;
    FONT-STYLE: normal;
    FONT-FAMILY: Inter, Comic Sans MS, MS Sans Serif, Arial, Verdana, Helvetica,;
    /*background-color: #F87326;*/
}

.textTraderContact {
    /*FONT-WEIGHT: 200;*/
    FONT-SIZE: smaller;
    COLOR: white;
    LINE-HEIGHT: 1.1em;
    FONT-STYLE: normal;
    FONT-FAMILY: Inter, Comic Sans MS, MS Sans Serif, Arial, Verdana, Helvetica,;
    background-color: #F87326;
}


.textHomeMediumBlackOnWhite {
    FONT-WEIGHT: 500;
    FONT-SIZE: larger;
    COLOR: black;
    LINE-HEIGHT: 1.4em;
    FONT-STYLE: normal;
    FONT-FAMILY: Comic Sans MS, MS Sans Serif, Arial, Verdana, Helvetica,;
    background-color: white;
}