body {
    color: #fff;
    background-color: #212731;
    font-family: 'Barlow', Arial, sans-serif;
    font-weight: 400;
}

h1, .h1, a.h1, h1 a,
h2, .h2, a.h2, h2 a,
h3, .h3, a.h3, h3 a,
h4, .h4, a.h4, h4 a,
h5, .h5, a.h5, h5 a,
h6, .h6, a.h6, h6 a {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 700;
}

h1 a:hover, a:hover.h1, h2 a:hover, a:hover.h2, h3 a:hover, a:hover.h3, h4 a:hover, a:hover.h4, h5 a:hover, a:hover.h5, h6 a:hover, a:hover.h6 {
    color: #FFD000;
    text-decoration: none;
}

.card {
    border: 1px solid rgba(255, 255, 255, 0.085);
}

/* custom-page.blade.php wraps page content in `card box-shadow-lg`; the file
   list beneath it is the same card plus `mt-4`. Flatten the content one so it
   reads as plain page body, and leave the files card as a card. Same
   :not(.mt-4) trick IHQ uses in template/147. */
.container > .card.box-shadow-lg:not(.mt-4) {
    border: 0;
    box-shadow: none!important;
}

.container > .card.box-shadow-lg:not(.mt-4) > .p-4 {
    padding: 0!important;
}

.btn-primary {
    color: #212731!important;
    font-weight: 600!important;
}

.topbar, .topbar-link {
    color: #fff!important;
}

.topbar-link:hover {
    color: #FFD000!important;
}

.bg-userbar {
    background-color: #212731;
}

.bg-header {
    background-color: #151C26;
}

.bg-header .nav-link,
.navbar-dark .nav-link {
    color: #fff!important;
}

.bg-header .nav-link:hover,
.bg-header .nav-link.active,
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active {
    color: #FFD000!important;
}

.navbar-expand-lg .dropdown-menu {
    background-color: #151C26;
    border-color: #151C26;
}

/* header-3's outer container is hardcoded justify-content-between, which strands
   the "Get in touch" div at the far right with dead space before it. Let the nav
   div grow to fill that space instead, so the links land next to the button. */
.cs-header > .container {
    justify-content: flex-start;
}

.cs-header > .container > div:first-child {
    flex: 1 1 auto;
}

/* Now that nav.include-custom-button renders "Get in touch" inside .navbar
   (so it survives going sticky), this header-level copy is a duplicate. */
.cs-header > .container > div:last-child {
    display: none!important;
}

.navbar-stuck {
    padding: 2rem!important;
}

.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active {
    color: #fff;
    font-weight: 500;
}

.hero-banner {
    height: 75vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    background-image: url('https://cdn.revolutionise.com.au/site/rz78ibdafqszyzqh.png');
}

.hero-banner-overlay {
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.50) 0%, rgba(255, 208, 0, 0.50) 100%);
}

.hero-banner h1, .hero-banner h2, .hero-banner h3, .hero-banner h4, .hero-banner h5, .hero-banner h6 {
    color: #fff;
}

.bg-black {
    background-color: #001140;
}

.bg-grey {
    background-color: #F7F7FC;
}

.custom-section-2 {
    background: linear-gradient(90deg, #000 17.03%, #91969E 100%), #151C26;
    color: #fff;
}

.custom-section-2 h1, .custom-section-2 h2, .custom-section-2 h3, .custom-section-2 h4, .custom-section-2 h5, .custom-section-2 h6 {
    color: #FFD000;
}

/* The section's content is a two-cell table (`table-stack table-stack-md-none`)
   authored in the custom-section-2 page, so below 768px the cells stack full
   width and the white text lands on the pale right-hand end of the gradient.
   Drop to the flat countdown colour there; desktop keeps the gradient. */
@media (max-width: 767.98px) {

    .custom-section-2 {
        background: #212731;
    }
}

.countdown {
    background-color: #212731;
}

.countdown-unit {
    padding: 0 2rem 0 1.5rem;
}

.countdown-unit:last-child {
    padding-right: 0.5rem;
}

#countdown1 .h1 {
    font-size: 3rem;
    font-weight: 400;
}

.dropdown-item {
    color: #fff;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.dropdown-item:hover {
    color: #FFD000;
}

.dropdown-item:hover:after, .dropdown-item:focus:after {
    content: "";
    width: 50px;
    display: block;
    margin-top: 5px;
    margin-bottom: -6px;
    border-bottom: 1px solid #FFD000;
}

.rotating-gallery {
    height: 50vh;
    min-height: 400px;
    object-fit: cover;
}

/* Carousel dots inherit the primary yellow, which is unreadable on a white
   band. Scoped to section-level white backgrounds so white cards elsewhere
   on the site keep the default treatment. */
section.bg-white [data-nav]::before {
    background-color: #212731;
}

section.bg-white [data-nav]::after {
    border-color: #212731;
}

a.card-footer:hover {
    text-decoration: none;
}

.bg-page {
    background-color: #212731;
    color: #fff;
}

.bg-page h1, .bg-page h2, .bg-page h3, .bg-page h4, .bg-page h5, .bg-page h6 {
    color: #fff;
}

.bg-footer {
    background-color: #151C26;
}

.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-footer h1, .bg-footer h2, .bg-footer h3 {
    color: #fff!important;
}

.cs-widget-title {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 700;
    color: #fff;
}

.cs-widget-link {
    color: #fff!important;
    padding: 0;
}

a.cs-widget-link:hover {
    color: #FFD000!important;
    text-decoration: none;
}

.cs-widget ul>li, .cs-widget ol>li {
    margin-bottom: .25rem;
}

/* footer-8 puts the logo and Contact in one .row and the socials in a second
   .row below, so Contact can only ever centre against the logo. Dissolve both
   rows with `display: contents` and re-lay the footer as one 2-column grid, so
   Contact can span both rows and centre against logo + socials together.
   Everything after the two rows (divider, acknowledgement, copyright) spans
   full width. Desktop only — below 768px the columns stack and this is moot.
   NOTE: if `footer.include-subscribe` is ever turned back on it adds a second
   column to the socials row, which has nowhere to land here. Revisit then. */
@media (min-width: 768px) {

    .cs-footer > .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 30px;
        align-items: start;
    }

    .cs-footer > .container > .row {
        display: contents;
    }

    .cs-footer > .container > :not(.row) {
        grid-column: 1 / -1;
    }

    /* Bootstrap caps these at 50% and re-adds the gutter padding the dissolved
       row used to cancel; as grid items both fight the track sizing. */
    .cs-footer > .container > .row > [class*="col-"] {
        flex: none;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .cs-footer > .container > .row > .footer-contact {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}

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

    body {
        margin-top: 62px;
    }

    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
    }

    .navbar-stuck {
        padding: .375rem .5rem!important;
    }

    .dropdown-item {
        white-space: normal!important;
    }

    .hero-banner {
        height: auto;
        background-image: url('https://cdn.revolutionise.com.au/site/ewq3neyfuxaoof6r.png');
    }

    #countdown1 .h1 {
        font-size: 2rem;
    }

    .navbar-expand-lg .dropdown-menu {
        background-color: #151C26;
    }
}