@media (max-width: 991.98px) {
    .offcanvas-collapse {
        position: fixed;
        top: 0; 
        bottom: 0;
        left: 100%;
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;        
        z-index: 1000;
        transform: translateX(-100%);
    }

    .offcanvas-collapse.open {
        visibility: visible;
        opacity: 1;        
        transition: opacity .5s;        
    }

    .offcanvas-collapse.close {
        visibility: hidden;
        opacity: 0;
        transition: opacity .5s, visibility 0ms ease-in .5s; /* visibility delayed 1s, opacity needs to be run first */
    }
}

.offcanvas-header {
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-border-color: var(--white);
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.offcanvas-header .btn-close {
    opacity: 1;
}

.offcanvas-title {
    font-family: 'lobster', serif;
    font-weight: normal;
    text-shadow: 2px 2px 0 #222, -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, 1px 1px 0 #222;
}

.main-navigation .navbar-brand,
.main-navigation .navbar-brand:focus, 
.main-navigation .navbar-brand:hover  {
    color: var(--white);
}

.main-navigation .navbar-toggler {
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 1.0);
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-padding-x: 0.50rem;
    --bs-navbar-toggler-font-size: 1rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1.0%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.main-navigation .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1.0%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}




/*
 * header 
 */

header nav,
header nav a,
header .navbar-collapse,
header .navbar-collapse a {
    color: var(--white);
    background-color: var(--green-dark);
}
  
header .nav-scroller .nav {
    color: rgba(255, 255, 255, .75);
}
  
header .nav-scroller .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
    color: #6c757d;
}