body {
    background-color: #FFF9F2; /* beige #f5f5dc*/
    min-height: 100vh;
}

.bg-navy {
    background-color: #36454F !important;
}

/* Prevent underlines on button-style links inside article color blocks */
.brown-article a.btn,
.orange-article a.btn,
.lightblue-article a.btn,
.lagoon-article a.btn {
    text-decoration: none;
}

/* image sizing used above */
.article-with-image-sm .img-side {
    width: clamp(160px, 22vw, 320px); /* increased and responsive */
    height: auto;
    object-fit: cover; /* fill the allocated area for a larger, consistent look */
    display: block;
}

/* --- appended: ensure .article-with-image images fill the article height --- */

/* Let the inner row grow to occupy the article's vertical space */
.article-with-image > .d-flex.align-items-stretch {
    flex: 1 1 auto; /* allow the row to grow so children can match article height */
    align-items: stretch; /* ensure children (img + content) stretch vertically */
    gap: 0.75rem;
}

/* Make the side image match the container height and behave responsively */
.article-with-image .img-side {
    width: auto !important; /* let height control sizing on wide screens */
    height: 100% !important; /* fill the article row's height */
    max-width: 48% !important; /* cap width so text has room (tweak as needed) */
    object-fit: cover !important; /* crop elegantly to fill the area */
    display: block;
}

/* On small screens stack and restore intrinsic image height */
@media (max-width: 767.98px) {
    .article-with-image > .d-flex.align-items-stretch {
        flex-direction: column;
        gap: 0.5rem;
    }

    .article-with-image .img-side {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
}

/* Full-width brown band */
.brown-square {
    /* make the element span the full viewport width while remaining centered */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100%;
    max-width: 100vw;
    /* controlled height so it doesn't become huge on large screens */
    height: clamp(120px, 18vh, 260px);
    /* keep a subtle rounded corner for a friendly look */
    /* border-radius: 8px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:lightblue;
    color: #000;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
    border: 0;
    padding: 1rem;
    text-align: center;
    z-index: 0;
}

/* Inner text styling */
.brown-square-text {
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    font-weight: 600;
    line-height: 1.3;
    max-width: 1200px;
    padding: 0 1rem;
    display: inline-block;
}

/* Full-width brown band */
.lightblue-square {
    /* make the element span the full viewport width while remaining centered */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100%;
    max-width: 100vw;
    /* controlled height so it doesn't become huge on large screens */
    height: clamp(120px, 18vh, 260px);
    /* keep a subtle rounded corner for a friendly look */
    /* border-radius: 8px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #CED6DA;
    color: #000;
/*box-shadow: 0 8px 18px rgba(0,0,0,0.25);*/
    border: 0;
    padding: 1rem;
    text-align: center;
    z-index: 0;
}

/* Inner text styling */
.lightblue-square-text {
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    font-weight: 600;
    line-height: 1.3;
    max-width: 1200px;
    padding: 0 1rem;
    display: inline-block;
}

/* Small screen tweaks */
@media (max-width: 420px) {
    .brown-square {
        height: clamp(100px, 22vh, 160px);
        border-radius: 6px;
    }

    .brown-square-text {
        font-size: 0.9rem;
    }
}

/* Navbar link hover and active styles */
.navbar .nav-link {
    color: rgba(255, 255, 255, 0.92);
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

    /* Hover (pointer) */
    .navbar .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        text-decoration: none;
    }

    /* Active/selected link */
    .navbar .nav-link.active,
    .navbar .nav-link[aria-current="page"] {
        background-color: rgba(255, 255, 255, 0.18);
        color: #ffffff;
        font-weight: 600;
    }

    /* Keyboard focus visible for accessibility */
    .navbar .nav-link:focus-visible {
        outline: 2px solid rgba(255,255,255,0.18);
        outline-offset: 2px;
    }

/* ---- Ensure navbar controls have a consistent height and vertical alignment ----
   This keeps the brand, toggler and links visually the same height on a single-row navbar.
   When the collapsed menu expands on small screens it will still grow naturally below.
*/
:root {
    --app-navbar-height: 56px; /* change this value if you need a different navbar height */
}

.navbar {
    min-height: var(--app-navbar-height);
}

    /* Make the container row align items center so brand + toggler + nav align vertically */
    .navbar .container-fluid {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Force brand, toggler and nav-links to use the same height and center their contents */
    .navbar-brand,
    .navbar-toggler,
    .navbar .nav-link {
        height: var(--app-navbar-height);
        display: inline-flex;
        align-items: center;
    }

    /* Reduce extra vertical padding on links so their heights match the navbar */
    .navbar .nav-link {
        padding-top: 0;
        padding-bottom: 0;
    }

/* Keep toggler at a compact size while vertically centered */
.navbar-toggler {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

/* When the collapse is shown on small screens it becomes a block below the navbar,
   so allow it to stretch without being clipped by a fixed parent height. */
.navbar .collapse.navbar-collapse {
    align-items: center;
}

/* Optional: tighten spacing between nav items on smaller screens */
@media (max-width: 767.98px) {
    .navbar .nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;

    }
}

/* Change collapsed navbar/menu background on small devices (below 768px) */
@media (max-width: 767.98px) {
  /* change the whole collapse area that contains the ul */
  #navbar.collapse.navbar-collapse {
    background-color: lightblue !important;/* replace with desired color */
  }

  /* Ensure the background is applied immediately during Bootstrap's collapse/expand animation.
     Bootstrap swaps .collapse for .collapsing while animating, so the previous rule doesn't match
     until the animation finishes — causing the perceived delay. */
    #navbar.collapsing,
    #navbar.collapse.navbar-collapse.show {
        background-color: lightblue !important;
        will-change: height;
        overflow: hidden;
        padding: 0.5rem 1rem;
    }

  /* ensure links remain readable */
  #navbar .nav-link,
  #navbar .dropdown-item {
    color: #000;
  }

}

/* Only the brand in the layout should use Times New Roman */
.tn-times {
    font-family: "Times New Roman", Times, serif;
    font-size: 1.9rem;
}

.responsive-split {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .responsive-split > .split-item {
        flex: 1 1 100%;
        min-width: 0;
    }

@media (min-width: 768px) {
    .responsive-split > .split-item {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

.split-card {
    padding: 1.25rem;
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    height: 100%;
    background: #fff;
}

/* Responsive circular image used in content (keeps aspect, covers, and scales) */
.circle-img {
    width: clamp(56px, 18vw, 160px); /* scales between small and large screens */
    aspect-ratio: 1 / 1; /* keep square so border-radius:50% becomes a circle */
    object-fit: cover; /* crop to fill while preserving the center */
    border-radius: 50%;
    display: inline-block;
    border: 3px solid #7b4b2d; /* brown border to match palette */
    box-shadow: 0 6px 14px rgba(0,0,0,0.16);
    vertical-align: middle;
    max-width: 100%;
}

    /* When floated, add small responsive spacing */
    .circle-img.float-start {
        margin-right: 0.75rem;
        margin-bottom: 0.4rem;
    }

@media (max-width: 420px) {
    .circle-img {
        width: clamp(44px, 22vw, 96px);
    }
}

/* Rounded image style: light border + subtle rounded corners */
.rounded-img {
    width: clamp(56px, 18vw, 160px);
    height: auto;
    object-fit: cover;
    border-radius: 8px; /* rounded corners */
    display: inline-block;
    border: 1px solid solid black; /* light border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* subtle depth */
    vertical-align: middle;
    max-width: 100%;
}

/* Small-screen tweak */
@media (max-width: 420px) {
    .rounded-img {
        width: clamp(44px, 22vw, 96px);
    }
}

/* Responsive text + image row: stacks on small screens, side-by-side on md+ with image on the right */
.text-img-row {
    display: block;
    gap: 1rem;
}

@media (min-width: 768px) {
    .text-img-row {
        display: flex;
        align-items: flex-start;
    }

        .text-img-row > p {
            flex: 1 1 auto;
            margin: 0; /* keep paragraph spacing controlled */
        }

        .text-img-row > img {
            flex: 0 0 auto;
            margin-left: 1rem;
            align-self: flex-start;
            /* ensure circle-img sizing rules still apply */
        }
}

/* --- Add at end of file --- */
/* Preserve intrinsic image size but keep responsive and center it inside the <p> */
.rounded-img.rounded-img-normal {
    width: auto; /* show at natural width unless constrained by container */
    height: auto;
    max-width: 100%; /* prevents overflow on small screens */
    display: block; /* allow margin:auto centering */
    margin: 0.6rem auto; /* vertical spacing + horizontal centering */
}

/* Added color for specific text sections */
.text-dark-slate {
    color: #36454F;
}

/* Make intro paragraph slightly smaller for better visual hierarchy */
.small-intro {
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Carousel: thumbnail indicators */
.carousel-indicators.custom-indicators {
    bottom: -60px; /* pull indicators below carousel */
    gap: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    pointer-events: auto;
}

    .carousel-indicators.custom-indicators button {
        width: 84px;
        height: 48px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 6px;
        border: 2px solid rgba(255,255,255,0.15);
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        opacity: 0.65;
        transition: opacity .18s, transform .18s, box-shadow .18s;
    }

        .carousel-indicators.custom-indicators button:hover {
            opacity: 0.95;
            transform: translateY(-3px);
        }

    .carousel-indicators.custom-indicators .active {
        opacity: 1;
        box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 0 0 3px rgba(255,255,255,0.08) inset;
    }

/* Caption customizations */
.carousel-caption.custom-caption {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18%;
    width: calc(100% - 2rem);
    max-width: 760px;
    padding: 1rem 1.25rem;
    background: rgba(10, 10, 10, 0.45); /* semi-transparent background for contrast */
    color: #fff;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Make captions readable on very small screens */
@media (max-width: 576px) {
    .carousel-caption.custom-caption {
        bottom: 8%;
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .carousel-indicators.custom-indicators {
        bottom: -70px;
        gap: 0.4rem;
    }

        .carousel-indicators.custom-indicators button {
            width: 56px;
            height: 36px;
        }
}

/* Optional: subtle overlay gradient on images for better contrast */
#heroCarousel .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.42) 100%);
    border-radius: inherit;
    pointer-events: none;
}

/* --- Add at end of file --- */
/* Page-width hero carousel: constrained to page/container width (no full-bleed) */
.hero-bleed {
    /* Use page/container width instead of viewport-wide full-bleed */
    position: relative;
    left: auto;
    right: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible; /* allow indicators / controls to overflow if needed */
    z-index: 0;
    padding-bottom: 1.5rem;
}

    /* When used on the carousel remove any rounded corners so images reach the edges */
    .hero-bleed .carousel-inner {
        border-radius: 0;
    }

/* If you still want inner items to have rounded corners on smaller screens,
   override here (optional) */
/* .hero-bleed .carousel-item img { border-radius: 0; } */

/* Responsive hero carousel sizing and image fit */
:root {
    --hero-height-small: clamp(160px, 28vh, 300px);
    --hero-height-medium: clamp(260px, 32vh, 420px);
    --hero-height-large: clamp(360px, 36vh, 640px);
}

/* Base: use medium sizing */
.hero-bleed .carousel-inner,
.hero-bleed .carousel-item {
    height: var(--hero-height-medium);
}

    /* Make images fill and crop cleanly while preserving intrinsic aspect ratio */
    .hero-bleed .carousel-item img,
    .hero-bleed .carousel-item picture,
    .hero-bleed .carousel-item img.img-fluid {
        display: block; /* remove inline-gap artifacts */
        width: 100%; /* fill the carousel item width */
        height: 100%; /* match the container height (keeps aspect via object-fit) */
        object-fit: cover; /* preserve aspect ratio, crop to fill if necessary */
        object-position: center;
        border-radius: 0; /* keep true edge-to-edge */
        max-width: none;
    }

/* Smaller screens: reduce height and tweak caption/indicators */
@media (max-width: 575.98px) {
    .hero-bleed .carousel-inner,
    .hero-bleed .carousel-item {
        height: var(--hero-height-small);
    }

    .carousel-caption.custom-caption {
        bottom: 6%;
        padding: 0.6rem;
        font-size: 0.95rem;
    }

    .carousel-indicators.custom-indicators {
        bottom: -70px;
    }
}

/* Larger screens: increase height */
@media (min-width: 1200px) {
    .hero-bleed .carousel-inner,
    .hero-bleed .carousel-item {
        height: var(--hero-height-large);
    }
}

/* Keep controls vertically centered (Bootstrap default usually works) */
.hero-bleed .carousel-control-prev,
.hero-bleed .carousel-control-next {
    top: 50%;
    transform: translateY(-50%);
}

/* Improve caption legibility across images */

/* variables for easy tuning */
:root {
    --caption-bg-start: rgba(0,0,0,0.64);
    --caption-bg-end: rgba(0,0,0,0.52);
    --caption-padding: 1rem 1.25rem;
    --caption-radius: 8px;
}

/* stronger page-level overlay so text contrasts against bright images */
#heroCarousel .carousel-item::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.42) 100%);
    /* keep existing positioning */
}

/* caption panel: slightly more opaque, blurred backdrop and subtle shadow */
.carousel-caption.custom-caption {
    background: linear-gradient(180deg, var(--caption-bg-start), var(--caption-bg-end));
    color: #ffffff;
    padding: var(--caption-padding);
    border-radius: var(--caption-radius);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    max-width: 760px;
    width: calc(100% - 2rem);
    line-height: 1.25;
}

/* responsive: tighten panel on small screens and increase opacity for readability */
@media (max-width: 575.98px) {
    .carousel-caption.custom-caption {
        bottom: 6%;
        padding: 0.6rem 0.85rem;
        font-size: 0.95rem;
        max-width: calc(100% - 1.5rem);
        background: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0.64));
    }

    /* ensure thumbnail indicators don't collide visually with caption */
    .carousel-indicators.custom-indicators {
        bottom: -78px;
    }
}

/* high-contrast / accessibility fallbacks */
@media (prefers-contrast: more) {
    .carousel-caption.custom-caption {
        background: rgba(0,0,0,0.88) !important;
        text-shadow: none;
    }

    #heroCarousel .carousel-item::after {
        background: rgba(0,0,0,0.55) !important;
    }
}

/* reduced-transparency: avoid blur effects */
@media (prefers-reduced-transparency: reduce) {
    .carousel-caption.custom-caption {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Pull hero up so it sits directly under the fixed navbar
   (main has inline margin-top:1.5rem in _Layout.cshtml). */
.hero-bleed {
    margin-top: -.5rem; /* cancels the main's margin-top so carousel sits below navbar */
}

/* smaller screens: slightly smaller pull to avoid overlap with compact layouts */
@media (max-width: 575.98px) {
    .hero-bleed {
        margin-top: -1rem;
    }
}

/* Make carousel slides square (1:1) but capped so they remain usable on very wide screens.
   Height = min(container width, configured max height). */
.hero-bleed .carousel-inner,
.hero-bleed .carousel-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* compute a square size but cap it using the existing hero height variables */
    height: min(100vw, var(--hero-height-large)); /* changed from 100vw to 100% so sizing follows container width */
    max-height: var(--hero-height-large);
    overflow: hidden;
}

/* Smaller screens: use the small cap so square doesn't dominate viewport */
@media (max-width: 575.98px) {
    .hero-bleed .carousel-inner,
    .hero-bleed .carousel-item {
        height: min(100vw, var(--hero-height-small)); /* changed from 100vw to 100% */
        max-height: var(--hero-height-small);
    }
}

/* Ensure images fully cover the square area without distortion */
.hero-bleed .carousel-item img,
.hero-bleed .carousel-item picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0; /* keep true edge-to-edge */
}

/* Force carousel to have no rounded corners */
#heroCarousel,
.hero-bleed,
.hero-bleed .carousel-inner,
.hero-bleed .carousel-item,
.hero-bleed .carousel-item img {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    overflow: hidden;
}

/* Brown background with white text for highlighted articles */
.brown-article {
    background-color: #493222; /* brown saddlebrown*/
    color: #ffffff !important;
}

/* Ensure muted text inside still reads on brown */
.brown-article .text-muted {
    color: rgba(255,255,255,0.9) !important;
}

/* Links readable on brown */
.brown-article a {
    color: #fff9d9;
    text-decoration: underline;
}

/* orange-article background with white text for highlighted articles */
.orange-article {
    background-color: #AC6532;
    color: #ffffff !important;
}

    /* Ensure muted text inside still reads on brown */
    .orange-article .text-muted {
        color: rgba(255,255,255,0.9) !important;
    }

    /* Links readable on brown */
    .orange-article a {
        color: #fff9d9;
        text-decoration: underline;
    }

/* lightblue-article background with white text for highlighted articles */
.lightblue-article {
    background-color: #CED6DA; 
    color: black !important;
}

    /* Ensure muted text inside still reads on brown */
    .lightblue-article .text-muted {
        color: black !important;
    }

    /* Links readable on brown */
    .lightblue-article a {
        color: black;
        text-decoration: underline;
    }

/* lightblue-article background with white text for highlighted articles */
.lightblue-article2 {
    background-color: #CED6DA;
    color: black !important;
}

    /* Ensure muted text inside still reads on brown */
    .lightblue-article2 .text-muted {
        color: black !important;
    }

    /* Links readable on brown */
    .lightblue-article2 a {
        color: #fff;
       
    }

/* soybean-article background with white text for highlighted articles */
.soybean-article {
    background-color: #FFF9F2;
    color: black !important;
}

    /* Ensure muted text inside still reads on brown */
    .soybean-article .text-muted {
        color: black !important;
    }

    /* Links readable on brown */
    .soybean-article a {
        color: black;
        text-decoration: underline;
    }

/* lightblue-article background with white text for highlighted articles */
.lagoon-article {
    background-color: #496977;
    color: black !important;
}

    /* Ensure muted text inside still reads on brown */
    .lagoon-article .text-muted {
        color: black !important;
    }

    /* Links readable on brown */
    .lagoon-article a {
        color: black;
        text-decoration: underline;
    }

/* Full-viewport breakout for hero carousel when rendered inside a constrained container (e.g. main .container) */
.hero-full-bleed {
    /* make the element span the full viewport width while remaining aligned with the viewport edges */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    z-index: 0;
}

/* keep the existing hero-bleed rules working when used inside the full-bleed wrapper */
.hero-full-bleed .hero-bleed {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Remove extra gap under the hero carousel */
.hero-bleed,
.hero-full-bleed .hero-bleed,
#heroCarousel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Utility: make images fit their content without cropping */
.img-fit-content {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain; /* preserve entire image, no cropping */
    display: inline-block;
}

/* Keep the same float spacing used elsewhere */
.img-fit-content.float-start {
    margin-right: 0.75rem;
    margin-bottom: 0.4rem;
}

/* Rounded variant that preserves the visual style of .rounded-img but fits content */
.rounded-img-fit {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.08);
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* image sizing used above */
.article-with-image .img-side {
    width: 140px; /* adjust as needed */
    height: auto;
    object-fit: contain;
    display: block;
}

.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* Background image with adjustable overlay for article blocks */
.article-bg-image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: inherit; /* keep existing color rules unless you want forced contrast */
    overflow: hidden;
}

/* Article background image + adjustable overlay */
.article-bg-image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* ensure the colored article background doesn't block the image */
    background-color: transparent !important;
    overflow: hidden;
}

    /* overlay controlled by CSS variable --bg-overlay-alpha (0.0 - 1.0) */
    .article-bg-image::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,var(--bg-overlay-alpha,0.35)); /* default 0.35 */
        pointer-events: none;
        z-index: 0;
    }

    /* place article content above overlay */
    .article-bg-image > * {
        position: relative;
        z-index: 1;
    }

    /* hide the inline <img> visual duplicate (keep it for screen readers) */
    .article-bg-image .img-side,
    .article-bg-image img.visually-hidden {
        display: none !important;
    }

/* optional utility classes */
.bg-overlay-10 {
    --bg-overlay-alpha: 0.10;
}

.bg-overlay-20 {
    --bg-overlay-alpha: 0.20;
}

.bg-overlay-30 {
    --bg-overlay-alpha: 0.30;
}

.bg-overlay-50 {
    --bg-overlay-alpha: 0.50;
}

/* Override Bootstrap variable on .btn so buttons have a solid background */
.btn {
    --bs-btn-bg: #36454F !important; /* solid background color */
    --bs-btn-border-color: #36454F; /* match border */
    --bs-btn-color: #ffffff; /* text color */
}

    .btn:hover {
        color: var(--bs-btn-hover-color);
        background-color: #8d8f91 !important;
        border-color: var(--bs-btn-hover-border-color);
    }

/* Only this button */
/*#BlueBtn {
    background-color: #36454F !important;
    border-color: #36454F !important;
    color: #fff !important;
}*/

/* Links readable on brown */
/*.bluetbtn a {
    color: #fff;
    text-decoration: underline;
}*/