<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">
/* ---------- PAGE BASE ---------- */

    html {
        width: 100%;
        height: 100%;
    }
    body {
        width: 100%;
        height: 100%;
        color: #000;
        background-color: #fff;
    }



/* ---------- MISC ---------- */

    .nav-logo {
        margin: 10px 0;
        height: 55px;
        width: auto;
    }
    .content-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .card {
        height: 100%; /* Ensures all cards in row have the same height */
    }
    .aos-overflow-fix {
        overflow-x: hidden; /* fix applied to stop animations using AOS causing extra horizontal scroll being added. Needs to be applied to parent element. */
    }
    [v-cloak] {
        display: none !important; /* Ensures that Vue's {{ }} tags are not displayed. Simply add v-cloak parameter to any HTML element to use. */
    } 

/* ---------- NAV PANEL ---------- */

    /* Set up of fade-in nav: */
        .navbar{
          background: transparent;
          transition: background 500ms ease;
        }
        .navbar.scrolled{
          background: #333;
        }

    /* Set nav to be full opacity */
        .navbar-dark .navbar-nav .nav-link {
            color: rgba(255,255,255,1);
        }
        .navbar-dark .navbar-nav .nav-link:hover,
        .navbar-dark .navbar-nav .nav-link.active {
            color: rgba(255,255,255,.50);
        }
    /* If you prefer an underlined nav, turn this code on: */
        /*
        @media (min-width: 768px) {
            .navbar-dark .navbar-nav .nav-link {
                padding-right: 0;
                margin-right: .5rem;
                padding-left: 0;
                margin-left: .5rem;
                padding-bottom: 0;
            }
            .navbar-dark .navbar-nav .nav-link:hover,
            .navbar-dark .navbar-nav .nav-link.active {
                color: rgba(255,255,255,1);
                border-bottom: 2px solid #fff;
            }
        }
        */

/* Turn off click border for hamburger: */
        .navbar-toggler {
            border: 0;
        }
        .navbar-toggler:focus,
        .navbar-toggler:active {
            outline: 0;
        }

    /* Change the icon for close button: Previous non-animating version: */
        /*
            .navbar-toggler&gt;.navbar-close-icon {
                display:inline;
            }
            .navbar-toggler.collapsed&gt;.navbar-close-icon, .navbar-toggler:not(.collapsed)&gt;.navbar-toggler-icon {
                display:none;
            }
        */

    /* Change the icon for close button: New animated version: */
        .navbar-toggler span {
            display: block;
            background-color: #fff;
            height: 3px;
            width: 25px;
            margin-top: 4px;
            margin-bottom: 4px;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            position: relative;
            left: 0;
            opacity: 1;
        }
        .navbar-toggler span:nth-child(1),
        .navbar-toggler span:nth-child(3) {
            -webkit-transition: transform .35s ease-in-out;
            -moz-transition: transform .35s ease-in-out;
            -o-transition: transform .35s ease-in-out;
            transition: transform .35s ease-in-out;
        }
        .navbar-toggler:not(.collapsed) span:nth-child(1) {
            position: absolute;
            left: 12px;
            top: 10px;
            -webkit-transform: rotate(135deg);
            -moz-transform: rotate(135deg);
            -o-transform: rotate(135deg);
            transform: rotate(135deg);
            opacity: 0.9;
        }
        .navbar-toggler:not(.collapsed) span:nth-child(2) {
            height: 12px;
            visibility: hidden;
            background-color: transparent;
        }
        .navbar-toggler:not(.collapsed) span:nth-child(3) {
            position: absolute;
            left: 12px;
            top: 10px;
            -webkit-transform: rotate(-135deg);
            -moz-transform: rotate(-135deg);
            -o-transform: rotate(-135deg);
            transform: rotate(-135deg);
            opacity: 0.9;
        }

    /* Ensure there is a background colour added for burger menu: */
        /* Would like to make better. So when at the top of the page, the logo and x appear within the background colour too. */
        @media (max-width: 767px) {
            .navbar-collapse {
                background-color:#333;
                margin: 0 -16px;
                padding: 0 20px;
            }
        }


/* ---------- INTRO PANEL ---------- */

    .intro {
        display: table;
        width: 100%;
        /* height: auto;*/
        height: 100%;
        /* padding: 100px 0;*/
        padding: 0;
            /* ^ replaced these two values, getting rid of the @media queries below. Left as comments for now incase I discover they are needed. */
        color: #fff;
        background-color: #000;
    }
    .intro .intro-body {
        display: table-cell;
        vertical-align: middle;
    }
    /*
        @media(min-width:767px) {
            .intro {
                height: 100%;
                padding: 0;
            }
        }
    */
        /* ^ ditched these @media queries and put into main .intro class above. Left as comments for now incase I discover they are needed. */



/* ---------- INTRO PANEL: ARROW BUTTON v4 ---------- */

    /* Setup the arrow and container: */
        .intro-arrow {
            position: absolute;
            text-align: center;
            bottom: 2em;
            width: 100%;
        }
        .intro-arrow a div{
            color: #fff;
            font-size: 2.2em;
            -webkit-transition: background .3s ease-in-out;
            -moz-transition: background .3s ease-in-out;
            transition: background .3s ease-in-out;
            border-radius: 2rem;
            display: block;
            width: 6rem;
            height: 6rem;
            line-height: 6rem;
            margin: 0 auto;
        }
        .intro-arrow a div:hover
        {
            outline: 0;
            background: rgba(255,255,255,.3);
        }
        .intro-arrow polyline{
            fill:none;
            stroke:currentColor;
            stroke-width:10;
            stroke-linecap:round;
            stroke-linejoin:round;
            stroke-miterlimit:10;
        }

    /* Animate the arrow: */
        .intro-arrow polyline{
            /* animate: */
/*            align-self: flex-end;*/
            animation-duration: 4s;
            animation-iteration-count: infinite;
            margin: 0 auto 0 auto;
            transform-origin: bottom;
        }
        .bounce {
            animation-name: bounce;
            animation-timing-function: ease;
        }
        @keyframes bounce {
            0%   { transform: translateY(0); }
            20%  { transform: translateY(50px); }
            30%  { transform: translateY(0); }
            100% { transform: translateY(0); }
        }
    /* Reset and stop the anim on rollover: (Disabled as felt jerky) */
/*
        .intro-arrow a:hover .bounce {
            animation-name: bounce-stop;
        }
        @keyframes bounce-stop {
            0%  { transform: translateY(0); }
            100%  { transform: translateY(0); }
        }
*/



/* ---------- CAROUSEL: IMAGE ---------- */

    /* Since there is an image, we need to place the caption correctly: */
        #myImageCarousel .carousel-caption {
            bottom: 3rem;
                /* ^ Use to position overlaying text within carosel */
            z-index: 10;
                /* ^ Doesn't appear to be needed? But left in as precaution */
        }



/* ---------- CAROUSEL: TEXT ONLY ---------- */

    /* These provided a set height for the carosel. However this meant that text can flow outside of the box. So removed: */
        /*
            #myTextCarousel .carousel-item {
                height: 10rem;
            }
            #myTextCarousel .carousel-inner {
                 display:block;   
                 overflow: visible;
            }
        */

    #myTextCarousel .carousel-caption {
        color: #000;
    }
    #myTextCarousel .carousel-control-prev-icon,
    #myTextCarousel .carousel-control-next-icon {
        filter: invert(100%);
            /* ^ Changes the arrows from white to black */
    }



/* ---------- HORIZONTAL SCROLL: ALL SECTIONS SETUP ---------- */

    /* Hide scrollbars on Chrome/Safari/Opera: */
        .horizontal-scroller .row::-webkit-scrollbar {
            display: none;
        }
    /* Hide scrollbars on IE/Edge/Firefox: */
        .horizontal-scroller .row {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
    .horizontal-scroller .row{
        flex-wrap: nowrap;
        overflow-x: scroll;
        padding-left: 10%;
        padding-right: 15%;
    }
    @media (max-width: 767px) {
        .horizontal-scroller .row{
            padding-left: 0%;
            padding-right: 25%;
        }
    }
    /* These are all for the DragScroll.js script. Which allows for click/drag of content on desktops: */
        body {
            cursor : default;
        }
        .dragscroll {
            overflow: auto;
        }
        .dragscroll {
            cursor : -webkit-grab;
            cursor : -moz-grab;
            cursor : -o-grab;
            cursor : grab;
        }
        .dragscroll:active {
            cursor : -webkit-grabbing;
            cursor : -moz-grabbing;
            cursor : -o-grabbing;
            cursor : grabbing;
        }


    /* ---------- HORIZONTAL SCROLL: GALLERY ---------- */

    .horizontal-gallery img {
        height: 300px;
        width:auto !important;
        padding-right: 10px;
    }



/* ---------- FIX FOR PAGE ANCHORS BEING HIDDEN BEHIND FIXED POSITION NAV ---------- */

    section .section-marker {
        position: relative;
        left: 0px;
        top: -91px; /* The total sum of: nav margin-top + nav margin-bottom + logo height + logo margin-top + logo margin-bottom */
    }



/* ---------- BACKGROUND IMAGES ---------- */

    .background-image {
        width: 100%;
        height: auto;
        background-color: #666;
        background-size: cover;
        background-position: center;
/*        color: #FFF;*/
    }



/* ---------- BACKGROUND VIDEOS ---------- */

    .background-video {
        position: relative;
/*        color: #FFF;*/
    }
    .background-video video {
        background-color: #666;
        position: absolute;
        z-index: -1;
        object-fit: cover;
        height: 100%;
        width: 100%;
        /* Added these to see if it fixes IE bug (video not filling whole width): */
            min-width: 100%; 
            min-height: 100%;
    }



/* ---------- FOR LAZY LOAD IMAGES &amp; VIDEO SCRIPT ---------- */

    .lazy {
        display: inline-block;
        width: 100%;
        height: auto;
        min-height: 100px; /* Ensures item takes up some space before image loads: */
    }
    .lazy-background {
        display: block;
        width: 100%;
        height: auto;
        background-color: #666;
        background-size: cover;
/*        color: #FFF;*/
        background-position: center;
    }



/* ---------- SOCIAL MEDIA ICONS ---------- */

    .social-icon img {
        height: 2em;
        width: 2em;
        border-radius: 20%;
        margin: 0 0.2em;
    }
    .social-icon a {
        border: 0;
    }



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

    .footer-text{
        font-size:0.8em;
        text-transform: uppercase;
        padding-top: 250px; /* Final section to be a good height to ensure Scroll Spy works correctly. Also spacing looks nicer. */

    }
    .footer-text a{
        border: 0;
        text-decoration: none;
        color: #fff;
    }
    .footer-text img{
        margin: 0 0 0 0.15em;
        height: 1.3em;
        width: auto;
    }
    section:last-of-type {
        padding-bottom: 20px; /* Clears the line that would appear after final section */
    }

</pre></body></html>