:root{
    /* Site Colours */
    --color-primary:#FFF;
    --color-primary-rgb: 255 255 255;
    --color-primary-alt:#f7fafa;
    --color-secondary:#1B1B1B;
    --color-secondary-rgb:27 27 27;
    --color-secondary-alt:#303030;
    --color-accent:#BB1616;
    --color-accent-rgb: 87 22 22;
    --color-accent-alt:#9D111E;
    --color-accent-alt-2:#E51F1F;

    /* Text Colours */
    --color-body-text:var(--color-secondary);
    --color-secondary-text:var(--color-primary);
    --color-accent-text:var(--color-accent);
    --color-heading-text:var(--color-secondary);
    --color-heading-secondary:var(--color-primary);
    --color-heading-accent:var(--color-accent);
    --color-link-text:var(--color-secondary);
    --color-link-text-hover:var(--color-accent);
    --color-heading-shadow:var(--color-accent);

    /* Bacground colours */
    --color-bg: var(--color-primary);
    --color-bg-alt:var(--color-primary-alt);
    --color-bg-secondary:var(--color-secondary);
    --color-bg-secondary-alt:var(--color-secondary-alt);
    --color-bg-accent: var(--color-accent);
    --color-border:var(--color-secondary-alt);
    --color-shadow: rgb(var(--color-secondary-rgb)/0.25);

    /* Header Colours */
    --color-header-bg: rgb(var(--color-secondary-rgb)/0.6);
    --color-header-sticky-bg: var(--color-secondary);
    --color-header-link: var(--color-primary);
    --color-header-link-hover: var(--color-accent);

    /* Footer Colours */
    --color-footer-bg: var(--color-secondary);
    --color-footer-text: var(--color-primary);
    --color-footer-heading: var(--color-primary);
    --color-footer-link: var(--color-primary);
    --color-footer-link-hover: var(--color-accent);


    /* Overlays */
    --colour-overlay:var(--color-secondary-rgb);
    --color-content-overlay-darker: rgb(var(--colour-overlay)/0.8);
    --color-content-overlay-dark: rgb(var(--colour-overlay)/0.6);
    --color-content-overlay: rgb(var(--colour-overlay)/0.4);
    --color-content-overlay-mid-light: rgb(var(--colour-overlay)/0.25);
    --color-content-overlay-light: rgb(var(--colour-overlay)/0.1);
    

    /* Gradients */
    --colour-gradient:var(--color-secondary-rgb);
    --gradient-01:linear-gradient(180deg, rgb(var(--colour-gradient)/1) 0%, rgb(var(--colour-gradient)/0.7) 20%, rgb(var(--colour-gradient)/0.7) 80%, rgb(var(--colour-gradient)/1) 100%);
    --gradient-02:linear-gradient(125deg, rgb(var(--colour-gradient)/0) 30%, rgb(var(--colour-gradient)/0.9));
    --gradient-03: radial-gradient(circle,rgb(var(--colour-gradient)/ 0.2) 0%, rgb(var(--colour-gradient)/ 1) 85%, rgb(var(--colour-gradient)/ 1) 100%);
    --gradient-04: linear-gradient(180deg,rgb(var(--colour-gradient)/ 0.0) 0%, rgb(var(--colour-gradient)/ 0.25) 65%, rgb(var(--colour-gradient)/ 1) 100%);
    --gradient-05: linear-gradient(45deg,rgb(var(--colour-gradient)/ 1) 0%, rgb(var(--colour-gradient)/ 0.5) 45%, rgb(var(--colour-gradient)/ 0.5) 65%, rgb(var(--colour-gradient)/ 1) 100%);
    --gradient-06:linear-gradient(235deg, rgb(var(--colour-gradient)/0) 30%, rgb(var(--colour-gradient)/0.9));
    --gradient-07:linear-gradient(180deg, rgb(var(--colour-gradient)/1) 0%, rgb(var(--colour-gradient)/0.65) 20%, rgb(var(--colour-gradient)/0.3) 50%, rgb(var(--colour-gradient)/0.65) 80%, rgb(var(--colour-gradient)/1) 100%);
    --gradient-08: radial-gradient(circle,rgb(var(--colour-gradient)/ 0.8) 0%, rgb(var(--colour-gradient)/ 0.5) 85%, rgb(var(--colour-gradient)/ 0) 100%);
    --gradient-09:linear-gradient(0deg, rgb(var(--colour-gradient)/0.8) 0%, rgb(var(--colour-gradient)/0.4) 20%, rgb(var(--colour-gradient)/0) 100%);
    --gradient-hero-mob: linear-gradient(180deg,rgb(var(--colour-gradient)/ 0.0) 0%, rgb(var(--colour-gradient)/ 0.40) 60%, rgb(var(--colour-gradient)/ 1) 100%);

    
    --section:3rem;

    --banner-height:40px;
}

@media screen and (max-width:1025px){
    :root{
        --section: 2rem;
    }
}

@media screen and (max-width: 769px){
    :root{
        --section:2rem;
    }
}

/* ------------- Theme Specific Styles --------------- */

/* Mega Menu */
.megamenu{
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color: var(--color-secondary);
    transform: translateX(-110%);
    transition: transform 0.5s ease;
}

header nav .image a:hover span{
    color:var(--color-secondary-text);
    transform:translateY(calc(var(--space-xs) * -1))
}

/* Home Page Hero */
.home-banner {
    min-height: 90vh; 
    --offset: 6.25rem; 
    display: flex; 
    align-items: center;
}
.home-banner .video-row{
    position: absolute; 
    inset:0; 
}
.home-banner .bg-row{
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 50%;
}

.heading.xl, .heading.text-2xl{font-style: italic;font-weight: 900; /*text-shadow: -4px 4px 15px var(--color-shadow)*/;}

/*.tear{filter:invert(79%) sepia(1%) saturate(1218%) hue-rotate(91deg) brightness(128%) contrast(96%);}*/
.tear{filter:invert(1)}

.tear.black-filter{filter: invert(0%) sepia(4%) saturate(4620%) hue-rotate(354deg) brightness(105%) contrast(79%);}

/* buttons and icons */
.btn{
    background: var(--color-bg-accent); 
    padding: var(--space-xs) var(--space-md); 
    transition: background-color var(--trans-default);
}
.btn.small{
    padding: var(--space-2xs) var(--space-xs);
}
.btn:not(.not-rounded){ 
    border-radius: var(--radius-default);
}
.btn-title{
    color: var(--color-secondary-text); 
    font-family: var(--font-heading); 
    text-transform: uppercase; 
    font-size: var(--heading-xs); 
    font-style: italic; 
    font-weight: 600; 
    letter-spacing: 1px; 
    text-align: center; 
    display: block; 
    transition: var(--trans-default);
}
.btn.sm .btn-title{
    font-size: var(--heading-xs);
}
.btn:not(.w-100){
    display: inline-block; 
    width:fit-content; 
    max-width: 100%;
}
.btn.w-100{
    display: block;
}

.btn.secondary{
    background-color:var(--color-secondary);
    color:var(--color-secondary-text);
}
.btn.light{
    background-color:var(--color-primary);
}
.btn.light .btn-title{
    color:var(--color-body-text);
}

.shadow{box-shadow: 2px 2px 3px var(--color-shadow);}

/* Activity Voucher*/
.act-vouch{background-color: var(--color-bg-alt); border: 1px solid var(--color-border);}

.act-vouch.white{background-color: var(--color-bg-alt); color:var(--color-heading-text);}
.act-vouch-clear{background-color: transparent;}

/* accordion */
.accordion-item{border-radius: var(--radius-default); overflow: hidden; border: 1px solid var(--color-border);}
.accordion-item + .accordion-item{margin-top: var(--space-xs);}
.accordion-title{background: var(--color-bg-alt); cursor: pointer;}
.accordion .accordion-title span{color: var(--color-heading-text);}
.accordion-content{background: var(--color-bg-alt); display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows var(--trans-default);}
.accordion-content .content{min-height: 0; visibility: hidden; transition: var(--trans-default);}
.accordion .control{
    width: 20px;
    height: 20px;
    position: relative;
    margin-left: 10px;
    min-width: 20px;
    transition: var(--trans-default);
}
.accordion .control > .line{
    background: var(--color-body-text);
}
.accordion .control > .line:nth-child(1){
    width: 100%;
    height: 4px;
    position: absolute;
    top: calc(50% - 2px);

}
.accordion .control > .line:nth-child(2){
    width: 4px;
    height: 100%;
    position: absolute;
    left: calc(50% - 2px);
}
.accordion .active .accordion-content{grid-template-rows: 1fr;}
.accordion .active .accordion-content .content{visibility: visible;}
.accordion .active .control{
    transform: rotate(45deg);
}
.accordion .active .accordion-title,
.accordion .accordion-title:hover{color: var(--color-bg-accent);}
.accordion .active .accordion-titler{border-bottom: solid 1px var(--color-shadiow);}
.accordion .active .control > .line,
.accordion .accordion-title:hover .control > .line{background: var(--color-bg-accent);}
.accordion .active .accordion-title span,
.accordion .accordion-title:hover span{color: var(--color-accent-text)}
.accordion li a:hover{color: var(--color-accent-text)}

/*.accordion .map-rel.hover .accordion-title{
    background: var(--color-bg-secondary);
}*/
.accordion .map-rel.hover .control > .line{
    background: var(--color-accent-text);
}
.accordion .map-rel.hover .accordion-title span{
    color: var(--color-accent-text);
}

/*Internal nav*/
.internal-nav-wrapper{
    position: sticky;
    top: calc(var(--banner-height) + var(--header-height-scroll) + (2 * var(--space-2xs)));
    right:0;
    left:0;
    z-index: 998;
    height:3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.internal-nav{
    display:flex;
    flex-direction:row;
    justify-content: center;
    column-gap: var(--space-sm);
}
.internal-nav-link{
    transition: background-color 200ms;
    background: var(--color-bg-accent);
    color:var(--color-bg);
    /*font-size: var(--heading-sm);*/
    padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-xs);
}
.internal-nav-link.rounded{
    border-radius: 10rem;
}
.cnt-sel,
.glass-effect{
    webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
    background-color: #ffffff1a;
    border: 1px solid #ffffff2e;
    /*
    background: rgba(250, 250, 250, 0.10);
    backdrop-filter: blur(2.2px);
    -webkit-backdrop-filter: blur(2.2px);
    */
}
@media screen and (max-width: 769px){
    .internal-nav-wrapper{
        height:2.5rem;
    }
    .internal-nav{
        column-gap: var(--space-2xs);
        padding: 0 var(--space-2xs);
        overflow-x: auto;
        justify-content: flex-start;
    }
    .internal-nav-link{
        font-size: var(--heading-xs);
        padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-2xs);
    }  
}

/*Search Styling*/
.cnt-sel{
    /*background-color: var(--color-bg-alt); */
    /*border:1px solid var(--color-border);*/
    transition: outline 0ms;
}
.cnt-sel .btn-title{
    color:var(--color-secondary-text); 
    transition:unset;
}
.cnt-sel.dark-text .btn-title{
    color:var(--color-text); 
    transition:unset;
}
.cnt-sel.selected{
    background-color:var(--color-accent); 
    color:var(--color-secondary-text);
    border:1px solid var(--color-accent);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.search-input{border:1px solid var(--color-shadow)}

.outline{
    transition: outline 0ms !important;
}
.hover-text-raise{
    transition: padding 250ms;
}

@media (hover: hover) and (pointer: fine) {
    .internal-nav-link:hover{
        background:var(--color-accent-alt-2);
        outline: 2px solid var(--color-accent-alt-2);
        outline-offset: 2px;
    }
    .btn.secondary:hover,.btn.light:hover{
        background-color:var(--color-bg-secondary-alt);
        outline: 2px solid var(--color-bg-secondary-alt);
        outline-offset: 2px;
    }
    .btn:hover{
        background:var(--color-accent-alt-2);
        outline: 2px solid var(--color-accent-alt-2);
        outline-offset: 2px;
    }
    .cnt-sel:hover{
        background:var(--color-accent-alt-2);
        outline: 2px solid var(--color-accent-alt-2);
        outline-offset: 2px;
        color:#fff;
        border: 1px solid var(--color-accent-alt-2)
    }
    .btn:hover .btn-title{color: var(--color-secondary-text);}
    .link-hover:hover .btn{background: var(--color-accent-alt-2);}
    .link-hover:hover .btn-title{color: var(--color-secondary-text);}
    .link-hover:hover{background-color: var(--color-bg-alt)}
    .col-alt .btn:hover{background: var(--color-bg);}
    .col-alt .btn:hover .btn-title{color: var(--color-secondary-text);}
    .button:hover{background: var(--color-accent-alt-2);}  
    .button.border:hover{border: 2px solid var(--color-border);} 

    a:hover .btn-small{
        background-color: var(--color-accent-alt-2)
    }

    .shadow:hover{box-shadow: 6px 6px 8px var(--color-shadow);}

    .outline:hover{
        outline: 2px solid var(--color-accent-alt-2);
        outline-offset: 2px;
    }

    .hover-text-raise-trigger:hover .hover-text-raise{
        padding-bottom:var(--space-sm);
    }
}

/* Buttons */
.btn.rounded, .button.rounded{
    border-radius: 10rem;
}

.filter-input{
    border:solid 1px #aaa;
    border-radius: 10rem; 
    overflow: hidden;
    background-color: var(--color-bg);
    color: var(--color-accent-text);
}

.map-wrapper svg{
    -webkit-filter: drop-shadow( 3px 3px 3px rgba(0, 0, 0, .3));
}

/* Select And Dropdowns */
ul.autocomplete2{
    border-radius:1rem;
    box-shadow:2px 2px 4px rgba(0, 0, 0, .3);
}

ul.autocomplete2 li {
    padding:0.5rem 1rem;
    font-size: var(--body-md);
}
ul.autocomplete2 li a:first-of-type {
    padding-top:1rem;
}
ul.autocomplete2 li a:last-of-type {
    padding-bottom:1rem;
}
ul.autocomplete2 li a:hover {
    color:var(--color-content-accent-alt)
}
.select2-results .select2-results__option {
    color: var(--color-heading-text);
}
.select2-search__field{
    font-size: var(--body-md);
}
.select2-selection, .search-input{
    width:100%;
    padding:var(--space-xs) var(--space-sm) !important;
    border-radius:10rem !important;
    border:1px solid #aaa;
    caret-color: #000000;
}
.select2-dropdown{
    border-radius:1rem !important;
    padding:0.5rem !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    color:#fff !important;
}
.vouch .select2-container--default .select2-selection--single{
    box-shadow:unset;
}

/* Filter Button */
.filter-button{
    border-radius: 5rem; 
    overflow: hidden;
    color: var(--color-accent-text);
    cursor: pointer;
}
.filter-acts{
    display:none;
}
.filter-control .control{
    display:block;
}
.filter-control .control{
    display:block;
}
.cat-filter{
    position:relative;
}
@media screen and (max-width: 1024px){
    .cat-filter{
        display:flex;
        flex-direction:row;
        gap:var(--space-2xs);
    }
}
.filter-tick{
    height:var(--heading-sm);
    aspect-ratio:1;
    /*border-radius: 4rem;*/
    border-radius: 0.1rem;
    border: solid 2px var(--color-border);
    background-color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.filter-button.active .filter-tick{
    background-color: var(--color-border);
    /*box-shadow: #BB161666 3px 3px 5px, #BB161666 -3px 3px 5px, #BB161666 3px -3px 5px, #BB161666 -3px -3px 5px;*/
}
.clear-filter{cursor: pointer;}
/*HOVER EFFECTS*/
@media (hover: hover) and (pointer: fine) {
    .filter-button:hover + .filter-acts
    /*, .filter-acts:hover*/{
        display:block;
    }
    .filter-button:hover .filter-tick{
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }
}

/* Responsive mobile */
@media screen and (max-width: 1024px) {
    /* Text Colors */
    .tab-color-text{
        color: var(--color-heading-text);
    }
}

@media screen and (max-width: 767px) {
    /* Header & Nav */
    header {
        position: sticky;
        background: var(--color-header-sticky-bg);
    }

    /* Text Colors */
    .mob-color-text{
        color: var(--color-heading-text);
    }
}

.stickier{
    position:sticky; 
    top:0; 
    z-index:1100;
    transition: box-shadow 250ms;
}
.stickier.is-stuck{
    box-shadow: 0px 3px 3px #00000025;
}

.container{
    container-type: inline-size;
}


.bg-vid-wrapper.full{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: start;
    min-height:calc(100vh - var(--banner-height));
    width:100%;
}
.bg-vid-wrapper.full .banner-bg{
    width: 100%;
    height:calc(100vh - var(--banner-height));
    min-height:40rem;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: flex-start;
}
.bg-vid-wrapper.auto{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: start;
    /*min-height:100vh;*/
    width:100%;
}
.bg-vid-wrapper.auto .banner-bg{
    width: 100%;
    /*height:100vh;
    min-height:40rem;*/
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: flex-start;
}
.bg-vid-wrapper .banner-bg.image img.banner-image,
.bg-vid-wrapper .banner-bg.video video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit:cover;
    object-position: center;
}
.bg-vid-wrapper .video-wrapper{
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center;
}
.bg-vid-wrapper.auto .video-wrapper{
    position:relative;
}