﻿
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); /* Closest to Gotham I could find. */

:root {
    --bs-font-sans-serif: Roboto, sans-serif;
    --bs-primary: #041121;
    /*--bs-secondary: #428bca;*/
    --bs-primary-rgb: 4, 17, 33;
    /*--bs-secondary-rgb: 117, 126, 185;*/
    --bs-link-color: var(--bs-secondary);
    --bs-link-hover-color: #666666;
    --bc-btn-primary-color: #337ab7;
    --bs-link-color: var(--bs-btn-primary-color)
}

a {
    color: var(--bc-btn-primary-color);
}

.btn-primary {
    --bs-btn-bg: var(--bc-btn-primary-color);
    --bs-btn-border-color: var(--bc-btn-primary-color);
    --bs-btn-hover-bg: var(--bc-btn-primary-color);
    --bs-btn-hover-border-color: var(--bc-btn-primary-color);
    --bs-btn-active-bg: var(--bc-btn-primary-color);
    --bs-btn-active-border-color: var(--bc-btn-primary-color);
    --bs-btn-disabled-bg: var(--bc-btn-primary-color);
}

.btn-outline-primary {
    --bs-btn-color: var(--bc-btn-primary-color);
    --bs-btn-border-color: var(--bc-btn-primary-color);
    --bs-btn-hover-bg: var(--bc-btn-primary-color);
    --bs-btn-hover-border-color: var(--bc-btn-primary-color);
    --bs-btn-active-bg: var(--bc-btn-primary-color);
    --bs-btn-active-border-color: var(--bc-btn-primary-color);
    --bs-btn-disabled-color: var(--bc-btn-primary-color);
    --bs-btn-disabled-border-color: var(--bc-btn-primary-color);
}

.navbar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-brand-font-size: 1rem;
    border-bottom: 2px solid var(--bs-primary);
}

.navbar-brand .navbar-title {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    padding-left: 6px;
    vertical-align: middle;
}

    .navbar-brand .navbar-title .navbar-title-primary {
        font-size: 1.125rem;
        letter-spacing: -1px;
        margin: 1px 0 -10px 0;
        color: var(--bs-primary);
        text-transform: uppercase;
        font-weight: 700;
    }

    .navbar-brand .navbar-title .navbar-title-secondary {
        font-weight: 400;
        color: var(--bs-secondary);
    }

.footer {
    background-color: var(--bs-primary);
    font-size: .875rem;
    margin-top: 150px;
}

    .footer .footer-content {
        padding: 50px 0;
        margin-top: -150px;
    }

    .footer .footer-logo {
        background-image: url(https://template.buncombecounty.org/2017/images/logo-landscape.gif);
        background-position: center;
        background-repeat: no-repeat;
        min-height: 150px;
        position: relative;
        top: -116px;
    }

/* Extra Small (xs) breakpoint */
.w-10 {
    width: 10% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-50 {
    width: 50% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.w-100 {
    width: 100% !important;
}

@media (min-width: 576px) {
    /* Small (sm) breakpoint */
    .w-sm-10 {
        width: 10% !important;
    }

    .w-sm-20 {
        width: 20% !important;
    }

    .w-sm-30 {
        width: 30% !important;
    }

    .w-sm-40 {
        width: 40% !important;
    }

    .w-sm-50 {
        width: 50% !important;
    }

    .w-sm-60 {
        width: 60% !important;
    }

    .w-sm-70 {
        width: 70% !important;
    }

    .w-sm-80 {
        width: 80% !important;
    }

    .w-sm-90 {
        width: 90% !important;
    }

    .w-sm-100 {
        width: 100% !important;
    }
}

@media (min-width: 768px) {
    /* Medium (md) breakpoint */
    .w-md-10 {
        width: 10% !important;
    }

    .w-md-20 {
        width: 20% !important;
    }

    .w-md-30 {
        width: 30% !important;
    }

    .w-md-40 {
        width: 40% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-60 {
        width: 60% !important;
    }

    .w-md-70 {
        width: 70% !important;
    }

    .w-md-80 {
        width: 80% !important;
    }

    .w-md-90 {
        width: 90% !important;
    }

    .w-md-100 {
        width: 100% !important;
    }
}

@media (min-width: 992px) {
    /* Large (lg) breakpoint */
    .w-lg-10 {
        width: 10% !important;
    }

    .w-lg-20 {
        width: 20% !important;
    }

    .w-lg-30 {
        width: 30% !important;
    }

    .w-lg-40 {
        width: 40% !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-60 {
        width: 60% !important;
    }

    .w-lg-70 {
        width: 70% !important;
    }

    .w-lg-80 {
        width: 80% !important;
    }

    .w-lg-90 {
        width: 90% !important;
    }

    .w-lg-100 {
        width: 100% !important;
    }
}

@media (min-width: 1200px) {
    /* Extra Large (xl) breakpoint */
    .w-xl-10 {
        width: 10% !important;
    }

    .w-xl-20 {
        width: 20% !important;
    }

    .w-xl-30 {
        width: 30% !important;
    }

    .w-xl-40 {
        width: 40% !important;
    }

    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-60 {
        width: 60% !important;
    }

    .w-xl-70 {
        width: 70% !important;
    }

    .w-xl-80 {
        width: 80% !important;
    }

    .w-xl-90 {
        width: 90% !important;
    }

    .w-xl-100 {
        width: 100% !important;
    }
}

@media (min-width: 1400px) {
    /* Extra Extra Large (xxl) breakpoint */
    .w-xxl-10 {
        width: 10% !important;
    }

    .w-xxl-20 {
        width: 20% !important;
    }

    .w-xxl-30 {
        width: 30% !important;
    }

    .w-xxl-40 {
        width: 40% !important;
    }

    .w-xxl-50 {
        width: 50% !important;
    }

    .w-xxl-60 {
        width: 60% !important;
    }

    .w-xxl-70 {
        width: 70% !important;
    }

    .w-xxl-80 {
        width: 80% !important;
    }

    .w-xxl-90 {
        width: 90% !important;
    }

    .w-xxl-100 {
        width: 100% !important;
    }
}
