/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&display=swap');

:root {
    /* Define header and footer heights */
    --header-height: 127px;
    /* Adjust based on actual header height */
    --footer-height: 150px;
    /* Adjust based on actual footer height */
}

.heart-string::after {
    content: ' ❤️ ';
    white-space: pre-wrap;
    /* Allow wrapping */
}

#acc-menu-msg {
    display: none;
}

.site-header-container #site-logo .bb-logo img,
.site-header-container #site-logo .site-title img.bb-logo,
.site-title img.bb-mobile-logo {
    max-height: 79px;
    margin-top: -3px;
    min-width: 250px;
    padding: 0px;
}


.login.login-split-page #login h1 a {
    text-align: center !important;
}

#page>footer {
    background-color: #004D37 !important;
    max-height: 180px;
    margin-top: auto;
    padding-bottom: 40px !important;
    box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.2);

}

.copyright,
.footer-desc,
.bb-icon-l.bb-icon-search {
    color: #ffffff !important;
}


wp-block-latest-comments__comment-meta {
    background-color: #ffffff important;
}

/* .bb-footer .footer-socials i, .bb-footer .footer-socials > a {
	color: #D354B3 !important;
} */


.footer-copyright-wrap .footer-menu a {
    color: #ffffff !important;
}

.bb-footer .footer-socials i,
.bb-footer .footer-socials a {
    color: #D354B3 !important;
    transition: filter 0.3s ease;
    /* Smooth transition for the filter */
}

.bb-footer .footer-socials i:hover,
.bb-footer .footer-socials a:hover {
    color: #ec5dc8 !important;
    /* Color changes to #ec5dc8 on hover */
}

.bb-template-v2 .site-header #primary-navbar .menu-item>.ab-submenu .bb-sub-menu .menu-item:hover>a>i {
 color: #7A7A7A;
}

element {}

*,
::after,
::before {
    box-sizing: inherit;

}

.site-header #primary-navbar .primary-menu .menu-item>.ab-submenu .bb-sub-menu .menu-item a:active,
.site-header #primary-navbar .primary-menu .menu-item>.ab-submenu .bb-sub-menu .menu-item.current_page_item a>i {
    color: rgb(240, 176, 72);
}



#masthead {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Drop shadow */
    padding: 0;
}

/* #primary-navbar {
    max-width: 500px;
    max-width: 900px;

} */

.bb-logo {
    padding: 5px !important;
}


.bb-mobile-panel-header .logo-wrap img {
    max-width: 100% !important;
}

.header-profile-icons-custom {
    margin-left: auto;
    padding-right: 10px;
}

.primary-menu>li {
    height: none;
}

.primary-menu>.current-menu-item {
    border-bottom: 8.25px solid #00c1c1;
    /* Solid border color */
    height: 56px;
}

.primary-menu>.current-menu-item:hover {
    border-bottom-color: #00c1c1;
    /* Change on hover */
}


.header-profile-icons-custom>.header-aside {
    display: flex;
    margin-left: auto;
    margin-right: -10px;
    /* margin-right: 60px; */
    /* max-width: 180vh;
    max-width: 100vh; */
    /* This will push the item to the right */
}

.site-header .header-aside .notification-dropdown i,
.site-header .header-search-wrap i,
.site-header .notification-dropdown i,
.site-header i {
    float: right;
    /* color: #ffffff; */
    color: #7A7A7A;
    margin-top: 10px;
    margin-left: auto;
    margin-right: 3px; /* nudge back over to get covered by search box */
}


.site-header .header-aside .notification-dropdown.current_page_item>i:hover,
.site-header .header-search-wrap.current_page_item>i:hover,
.site-header .notification-dropdown.current_page_item>i:hover,
.site-header.current_page_item>i:hover {
    color: #f0b048 !important;
}




/** This will affect the overall height and scaling of the navigation bar. */
.site-header .site-header-container,
.header-search-wrap,
.header-search-wrap input.search-field,
.header-search-wrap form.search-form {
    height: 69px !important;
}


.bg-colour-pink {
    background-color: #d354b3;
}

.container-special {
    margin-left: 10vw;
    margin-right: 10vw;
}

.custom-header-base-top {
    background-color: #d354b3;
    min-width: 300px;
    max-width: 100%;
    /* max-header: 49px; */
    /* 	    -webkit-box-shadow: 0px -3px 3px -3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:    0px -3px 3px -3px rgba(0, 0, 0, 0.5);
    box-shadow:         0px -3px 3px -3px rgba(0, 0, 0, 0.5);
 */
}

#primary-navbar {
    min-width: 800px !important;
}

.header-search-link-custom {
    margin-left: auto;

    /* This will push the item to the right */
}


#site-navigation {
    min-width: 50vh;
    max-width: 200vh;
}

.bb-template-v2 .primary-menu>.menu-item-has-children:not(.hideshow):after {
    right: 5px;
    color: #FFFFFF;
}


.primary-menu>li>a,
.primary-menu>li>i {
    color: #ffffff !important;
    font-size: 0.96em;
    font-weight: 500;
    font-kerning: normal;
}


/* this is the main colour of the text in the mneu not the hoover over... */
.primary-menu>li>a,
.primary-menu>li>i:hover,
.primary-menu>li>i:active,
.primary-menu>li>i:focus,
.primary-menu>li>i:visited {
    color: #FFD6F5 !important;
    /* color: #e4d49e !important; */
    /* color: #dfc368 !important; */
    font-size: 0.96em;
    font-weight: 500;
    font-family: open sans;
}


.primary-menu,
.primary-menu>li>a {
    max-height: 46px;
}


/* .bb-template-v2 .primary-menu>li.current-menu-ancestor>a, .bb-template-v2 .primary-menu>li.current-menu-item>a, .bb-template-v2 .primary-menu>li.current-menu-parent>a, .bb-template-v2 .primary-menu>li.current_page_item>a {
	color: #ffffff;

} */

.custom-header-base-bottom {
    background-color: #00B1B0;
    height: 8px;
}

.bb-template-v2 .primary-menu>.menu-item-has-children:not(.hideshow):after {
    right: 5px;
    color: #FFFFFF;
}

.bb-icon-cog:before {
    content: '\ee27';
    color: #ffffff;
    margin-top: 3px;

}


.bb-template-v2 .primary-menu .current-menu-ancestor>a,
.bb-template-v2 .primary-menu .current-menu-item>a,
.bb-template-v2 .primary-menu .current-menu-parent>a,
.bb-template-v2 .primary-menu .current_page_item>a {
    /* color: #F5DAAF !important; */
    color: #F5DAAF !important;
    /* border-bottom-color: #E0BC44; */
    border-bottom-width: 3px;
    border-bottom-style: solid;

}


/* submenu active color _ all submenu text new gold color */

.site-header #primary-navbar .primary-menu .menu-item>.ab-submenu .bb-sub-menu .menu-item a:active,
.site-header #primary-navbar .primary-menu .menu-item>.ab-submenu .bb-sub-menu .menu-item.current_page_item a {
    color: #f0b048 !important;
}


/** This is the down arrow in white on the menu */
.bb-template-v2 .primary-menu>.menu-item-has-children:not(.hideshow):after {
    right: 5px;
    color: #FFD6F5 !important;
    /* color: #ffffff !important; */
    top: -15px;
}

/* nav menu itmem hoover over colour */
.bb-template-v2 .primary-menu>li:hover>a {
    /* color: #F5DAAF !important; */
    color: #e4d49e !important;
}

.bb-template-v2 .primary-menu>li:hover>a:before {
    color: #F5DAAF !important;
}

.nav-item:active,
.nav-item:focus,
.nav-item:hover {
    color: #F5DAAF !important;
    /* Replace with the color you want */
    /* Include any other styles you want to persist during the active/focus state */
}

.nav-item:link,
.nav-item:visited {
    color: #F5DAAF !important;
}

/* .signin-button>a {
    border-width: 3px;
    border-color: #d354b3;
    border-radius: 13px;
} */
.mob-profile-sub-menu-btn,
#logout-btn,
#logout-btn,
#login-btn,
.login-btn {
    background-color: #FFFFFF;
    border: disable;
    border-width: 3px;
    border-color: #00B1B0;
    border-radius: 6px;
    color: #009393;
    height: 36px;
    padding-left: 18px;
    padding-right: 18px;
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    /* padding-bottom: 3px; */
    /* text-shadow: 0px 0px 1px rgb(0, 123, 123); */

}
.mob-profile-sub-menu-btn,
#logout-btn:focus,
#logout-btn:hover,
#login-btn:focus,
#login-btn:hover {
    /* outline: 1px solid #FFFFFF; */
    border-color: #00999c !important;
    color: #018a8c !important;
    background-color: #ffffff;
    outline: none;
    box-shadow: none;
    border-color: transparent;
    border-width: 3px;
}

.mob-profile-sub-submenu {
    margin-left: auto;
    margin-right: auto;
}


#login-btn {
    border: disable;
}

/* scroll up button */
#scrollToTopBtn {
    float: right;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #00B1B0;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 5px;
    font-size: 18px;
    display: none;
    min-width: 49px;
    z-index: 10001;
    /* Hide by default, show when you scroll */
}

#scrollToTopBtn:hover {
    background-color: #00Bccc;
    /* Darker shade on hover */
}


/**
* This is the left white text on the header image on the home page
*/

#fp-header-text {
    position: relative;
    /* Ensure this container is positioned */
}


#fp-header-text::before {
    content: "Artwork Courtesy of Josephine Wall";
    position: absolute;
    /* Changed to absolute to move with the element */
    top: 99%;
    /* Position it near the bottom of its container */
    left: 9px;
    /* Push it out from the left side a bit */
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left top;
    color: rgb(203, 202, 202);
    font-family: 'Bad Script', cursive;
    font-size: 0.83em;
    white-space: nowrap;
    z-index: 1000;
}



/* 
* Custom search box on the header bar
*/
.custom-header-base-top {
    display: flex;
    justify-content: space-between;
    /* Ensures items are spread out */
    align-items: center;
    /* Aligns items vertically */
    width: 100%;
    /* Makes sure the container spans the full width of its parent */
}

.header-search-container {
    margin-left: auto;
    /* This pushes the search container to the right */
    display: flex;
    /* align-items: center; */
    top: 50%;
    height: 44px;
    margin-top: 6px;
    position: relative;
    /* Needed for positioning the search input absolutely within */
}

.header-search-link-custom {
    cursor: pointer;
    transition: opacity 0.5s ease;
    /* Smooth transition for the icon */
    opacity: 1;
    /* Icon fully visible by default */

}

.header-search-link-custom.hidden {
    opacity: 0;
    /* Icon fully transparent when hidden */
}

h1.entry-title {
    display: none;
}



/* Styles for the search input box */
.search-input {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 30px;
    /* Adjust based on your design */
    visibility: hidden;
    margin-top: -2px;
    transition: all 0.5s ease;
    /* No need to adjust the margin here since it's positioned absolutely */
}

/* Mobile styles need to be hidden at larger resolutions */
#custom-desktop-header {
    display: block;
    /* Hide normal navigation on mobile */
    /* visibility: visible; */
}

#custom-mobile-header {
    display: none;
    visibility: hidden;
}

/* this breaks everthing IF the mobile menu is hacked so null it */
.site {
    min-height: 0;
    /* Dynamically adjust the min-height to fill the available space, considering header and footer */
    /* min-height: calc(100vh - var(--header-height) - var(--footer-height) + 210px); */
    /* min-height: calc(100vh -  210px); */

}


/* fix for min-height needing to be 100vh on .site but causing gap */
#content {
    /* margin-top: -90vh; */
    margin-top: 0vh !important;
    z-index: 1;
    position: relative;
}


body:not(.page-template-page-fullscreen, .elementor-page) .site {
    overflow-x: visible !important
}

body.elementor-page:not(.home) #site,
body.elementor-page:not(.home) .site-main {
    margin-top: -65px;
}



/* FIND BALACE HERE */
/* breaks page titles on blogs */
/* fixes the gap on the who we are page */
/* .entry-header {
    margin-bottom: -30px;
    height: 0px !important;
} */

#content>.container {
    margin-top: 0px !important;
}

.subnav-search.groups-search {
    float: right;
    margin-top: -39px;
}


.content {
    flex-grow: 1;
    /* Grow to fill available space */
    padding-bottom: 50px;
    /* Adjust this value as needed */
}

.footer {
    margin-top: auto !important;
    /* Push the footer to the bottom */
}

/* footer color */
.footer-bottom,
.bb-footer {
    margin-top: -2px;
    padding-top: 21px;
    padding-bottom: 21px;
    background-color: #004D37 !important;
}

.site-main {
    position: relative;
    /* margin-top: 49px; */
}


.bb-mobile-header {
    display: none;
}

.site-header #primary-navbar .primary-menu .menu-item>.ab-submenu .bb-sub-menu .menu-item a:hover {
    /* background: #d6bd80; */
    background: #fff8df;
}




.site-header #primary-navbar .primary-menu .menu-item:hover>.ab-submenu {
    /* top: calc(100% - 36px); */
    top: 0;
    margin-top: 37px;
    z-index: 900 !important;
}

/* Adjust submenu if a child has the current page */
.site-header #primary-navbar .primary-menu .menu-item:has(.current_page_item)>.ab-submenu {
    /* Your adjustments for the submenu */
    /* For example: */
    /* top: 0; */
    /* Adjust the top position as needed */
    /* margin-top: 40px; */
    /* Reset any previous margin-top */

}


h3.elementor-image-box-title {
    margin-top: 7px;
}

.bb-template-v2 .site-header .user-wrap.menu-item-has-children.selected>.user-link::before,
.bb-template-v2 .site-header .user-wrap.menu-item-has-children>.user-link:hover::before {
    background-color: #fff8df !important; 
}

.site-header .sub-menu .current-menu-ancestor>a,
.site-header .sub-menu .current-menu-item>a,
.site-header .sub-menu .current-menu-parent>a,
.site-header .sub-menu li:hover>a {

   background-color: #fff8df !important;
}


.split-overlay {
    position: relative;
    /* This should be added if not already present */
}


.split-overlay::before {
    content: "Artwork Courtesy of Josephine Wall";
    text-shadow: 0 0 10px #000;
    position: absolute;
    /* Changed to absolute to move with the element */
    top: 99%;
    /* Position it near the bottom of its container */
    /* left: 9px; */
    left: 96%;
    /* Push it out from the left side a bit */
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left top;
    /* color: rgb(203, 202, 202); */
    color: #ffffff;
    font-family: 'Bad Script', cursive;
    font-size: 1.1em;
    white-space: nowrap;
    z-index: 1020;
}


@media only screen and (max-width: 990px) {
    .split-overlay::before {
        font-size: 1.0em;
        left: 94%;
    }

}


@media only screen and (max-width: 420px) {
    .split-overlay::before {
        font-size: 1.1em;
        left: 93%;
    }

}



/*
*
* footer links 
*/
.footer-link {
    color: #ffffff;
    margin-bottom: 3px;
}

.footer-link:hover {
    color: #e4d49e;
    margin-bottom: 3px;
}


/* Targeting the subnav container */
.bp-navs.bp-subnavs.no-ajax.user-subnav.bb-subnav-plain.bb-subnav-private {
    /* Example adjustments */
    width: auto;
    /* Adjust width as needed */
    margin-top: -50px;
    /* Move up by adjusting the top margin */
    position: relative;
    /* Or 'absolute' depending on desired positioning */
    z-index: 10;
}

/* Targeting the list items within the subnav for horizontal layout */
.bp-navs.bp-subnavs.no-ajax.user-subnav.bb-subnav-plain.bb-subnav-private ul li {
    display: inline-block;
    /* Align items horizontally */
    margin-right: 10px;
    /* Space between items */
}


.bp-profile-content {
    min-width: 90vw;
}



/******************************************************************************
*
*
*
* This is where we'll put the @ media overrides for mobile, tablet and other
* device types that require modification at different view port sizes.  
*
*
*
*
******************************************************************************/






@media screen and (min-width: 1120px) and (max-width: 1200px) {

    /* fix the scaling and sliding of the header-aside*/
    .header-profile-icons-custom>.header-aside {
        display: flex;
        margin-left: auto;
        margin: 0;
        flex: 0 0 auto;
        padding: 0;
        /* max-width: 180vh;
                        max-width: 100vh; */
        /* This will push the item to the right */
    }

    .elementor-heading-title .elementor-size-default h1 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .header-profile-icons-custom>.header-aside {
        display: flex;
        margin-left: auto;
        margin-right: -10px;
        /* margin-right: 60px; */
    }

}




.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.footer-socials {
    display: flex;
    justify-content: center;
    list-style: none;
}

.footer-socials li {
    margin: 0 10px;
}

.footer-desc {
    text-align: center;
}

.footer-menu {
    display: flex;
    justify-content: center;
    list-style: none;
}

.footer-menu li {
    margin: 0 10px;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
    }
}


.copyright {
    float: right;
    margin-left: 12px;
    margin-right: 0px;
    margin-bottom: -6px;
    }
}

@media (max-width: 767px) {
    .footer-bottom-left {
        min-width: 360px;
    }
}

.footer-menu {
    display: flex;
    flex-shrink: 0;
    /* Prevents the menu from shrinking */
    min-width: 250px;
    /* Adjust the minimum width as necessary */
    white-space: nowrap;
    /* Prevents the menu items from wrapping */
    overflow: hidden;
    /* Prevents content from overflowing */
    /* Add more properties as needed */
}

.footer-menu-item {
    padding: 10px;
    /* Adjust the padding as necessary */
    margin-right: 10px;
    /* Adjust the margin as necessary */
    /* Prevents the text within the menu items from wrapping */
    white-space: nowrap;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .footer-menu {
        flex-direction: column;
        /* Stacks the menu items vertically on smaller screens */
        align-items: center;
        /* Centers the menu items if stacked */
        min-width: 0;
        /* Allows the menu to fit within the container on smaller screens */
    }

    .footer-menu-item {
        /* Adjustments for the menu items on smaller screens */
    }
}


.bb-footer .footer-socials {
    justify-content: center !important;
}


.footer-menu.secondary {
    margin-left: -50px;
}

.footer-copyright-wrap {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    justify-content: flex-end;
    /* This will align the content to the right */
    margin-top: 5px;
}



/* Base styles for copyright wrap */
.footer-copyright-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Aligns items to the right */
    margin-top: 5px;
}

/* Base styles for the footer menu */
.footer-menu {
    display: flex;
    justify-content: center;
    /* Center the items by default */
    /* Additional styles for your footer menu */
}






@media only screen and (max-width: 1050px) {
#acc-menu-msg {
        display: inline-block !important;
    }

}




/** hide the extra menu bar from the header for mobile header views */
@media only screen and (max-width: 799px) {

    #acc-menu-msg {
        display: inline-block !important;
    }

    .copyright {
        float: right;
        margin-left: 2px;
        margin-right: 0px;
        padding-left: -20px;
    }


        /* Custom CSS for the dropdown menu */
    .dropdown-menu {
        display: none; /* Hide the dropdown menu by default */
        position: absolute; /* Position the dropdown menu */
        top: 100%; /* Position below the "My Account" link */
        left: 0; /* Align with the left edge of the "My Account" link */
        background-color: #fff; /* Background color of the dropdown menu */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for a dropdown effect */
        z-index: 999; /* Ensure the dropdown menu appears above other elements */
    }

    .dropdown-menu li {
        padding: 10px; /* Add padding to menu items */
    }

    .dropdown-menu li:hover {
        background-color: #f0f0f0; /* Highlight on hover */
    }


    .bb-template-v2 .side-panel-menu>li:not(.current-menu-item) > a:hover {
        background-color: #fff8df !important;
        color: var(--bb-sidenav-links);
    }

    .bb-mobile-panel-inner .side-panel-menu .sub-menu > .bb-icon-file,
    .bb-mobile-panel-inner .side-panel-menu .sub-menu a:hover,
    .bb-mobile-panel-inner .side-panel-menu a:hover {
        background-color: #fff8df !important;
        color: var(--bb-sidenav-links) !important;
    }

    .bb-template-v2 .bb-mobile-panel-inner .side-panel-menu>.current-menu-item .sub-menu a>i,
    .bb-template-v2 .bb-mobile-panel-inner .side-panel-menu>.current-menu-item .sub-menu .current-menu-item a {
        /* color: var(--bb-sidenav-links); */
        color: #ffffff;
    }
    .bb-template-v2 .bb-mobile-panel-inner .side-panel-menu>.current-menu-item .sub-menu a>i,
    .bb-mobile-panel-inner .side-panel-menu .sub-menu a:hover>i,
    .bb-mobile-panel-inner .side-panel-menu a:hover>i {
        color: var(--bb-sidenav-links);
    }



    .search-input {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 30px;
        visibility: none;
        margin-top: -2px;
        transition: all 0.5s ease;
        width: 70%;   
    }

    .bb-mobile-panel-inner .sub-menu.bb-open {
        display: block;
        box-shadow: none;
        padding-left: 30px;
        padding-top: 50px;
        padding-bottom: 0;
        background-color: transparent;
    }

    .bb-header-buttons > .button .small .signup a {
        min-width: 90px;

    }

    /* #content {
            margin-top: -87vh;
        } */

    .header-profile-icons-custom>.header-aside {
        display: flex;
        margin-left: auto;
        margin-right: -18px;
        /* margin-right: 60px; */
    }

    .custom-header-base-top {
        min-width: 25%;
        max-width: none;
    }

    .bg-colour-pink {
        min-width: 100%;
    }

    /* Assuming custom-header-base-bottom-mobile is an ID */
    .custom-header-base-bottom-mobile {
        background-color: #00B1B0;
        height: 8px;
    }

    .header-search-link-custom {
        /* Reset margins */
        margin: 0;
        /* Align to the right */
        justify-self: flex-end;
        align-self: flex-end;
    }

    /* Mobile sizes */
    #custom-desktop-header {
        display: none;
        /* Ensures the element does not take up any space */
        visibility: hidden;
        /* Ensures the element is not visible */
        z-index: 9999;
    }

    #custom-mobile-header {
        display: flex;
        /* Shows the mobile header */
        visibility: visible;
        /* Ensures the mobile header is visible */
        z-index: 999;
    }

    .header-profile-icons-custom>.header-aside {
        display: flex;
        margin-left: auto;
        /* margin-right: 60px; */
        /* max-width: 180vh;
    max-width: 100vh; */
        /* This will push the item to the right */
    }

    .header-search-link-custom {
        margin-left: auto;
        /* This will push the item to the right */
        padding-right: 350px;
    }

    .bb-mobile-logo {
        max-height: 60px !important;
    }


    #login-btn {
        background-color: #FFFFFF;
        border: disable;
        border-width: 3px;
        border-color: #00B1B0;
        border-radius: 6px;
        color: #009393;
        height: 36px;
        padding-left: 20px;
        padding-right: 20px;
        display: inline-flex;
        align-items: center;
        padding-bottom: 0px;
        text-shadow: 0px 0px 1px rgb(0, 123, 123);
        margin-right: -6px;
    }

    .header-aside-inner > .bb-header-buttons > #login-btn {
        margin-right: 0px;
    }

    .bb-header-buttons > #login-btn {
        padding-left: 30px;
        padding-right: 30px;

    }

    .bb-header-buttons>.button.small {
        margin-right: 3px;
    }

    .custom-mobile-side-login-bar {
        margin-bottom: 9px;
        margin-left: auto;
        margin-right: auto;
        margin-top: -10px;
        /* Optional: adds a shadow effect */
    }

    .button .small .signup>a {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* style the hamburger menu icon white */
    .site-header .bb-left-panel-mobile>i {
        color: #FFFFFF;
    }

    .header-aside {
        padding-right: 10px !important;
    }

    .buddypanel,
    .site-header-container {
        display: flex;
    }


    #fp-header-text::before {
        content: "Artwork Courtesy of Josephine Wall";
        position: absolute;
        /* Changed to absolute to move with the element */
        top: 99%;
        /* Position it near the bottom of its container */
        left: 9px;
        /* Push it out from the left side a bit */
        transform: translateY(-50%) rotate(-90deg);
        transform-origin: left top;
        color: rgb(203, 202, 202);
        font-family: 'Bad Script', cursive;
        font-size: 0.69em !important;
        white-space: nowrap;
        z-index: 30;
    }

}

.site {
    min-height: auto !important;
    /* Set to auto */
}



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

    /* Styles for screens smaller than 600px (commonly mobile devices) */
    #page>footer {
        /* Your mobile-specific styles here */
        max-height: 200px;
    }
}

/* 
@media only screen and (max-width: 530px) {
    .bb-header-buttons {
        display: none;
    }

} */



/** This will serve to react the mobile menu at last moment */
@media only screen and (max-width: 530px) {

    .bb-mobile-logo,
    .site-title img {
        min-height: 72px;
    }


    /* .bb-header-buttons {
        display: none;
    } */

    .bb-mobile-header {
        display: flex;
    }

    .site-header-container {
        display: none;
    }

    .header-search-container {
        margin-right: 12px;
    }

    .custom-header-base-top {
        min-width: 0;
        max-width: none;
    }

    .bb-left-panel-icon-wrap {
        /* max-height: 50px;
    margin-top: -24px; */
        display: flex;
    }

}





.force-show {
    display: block !important;
}