:root {
    --secondary: #034081;
    --secondary-soft: #D6DFEA;
    --primary: #1f2460;
    --primary-light: #5b558d;
    --primary-soft: #f3eeff;
    --park-light-gray: #e1deed;
    --layer-one: #f5f5f5;
    --navigation-login-blue: #f0f3f9;
    --temp-card-color: #EEE;
}

[x-cloak] {
    display: none !important;
}

html, body {
    height: 100%;
}

body {
    position: relative; /* if not already set */
}

body.darken-background {
    overflow: hidden;
}

.bg-test {
    background-color: rgba(250, 250, 250) !important;
}

.bg-layer-one {
    background-color: var(--layer-one) !important;
}

.bg-light-primary, .bg-light-primary-hover:hover {
    background-color: var(--primary-light) !important;
}

.bg-primary, .bg-primary-hover:hover {
    background-color: var(--primary) !important;
}

.bg-secondary, .bg-secondary-hover:hover {
    background-color: var(--secondary) !important;
}

.bg-soft-primary, .bg-soft-primary-hover:hover {
    background-color: var(--primary-soft) !important;
}

.bg-soft-secondary, .bg-soft-secondary-hover:hover {
    background-color: var(--secondary-soft) !important;
}

.border-light-primary {
    border-color: var(--primary-light) !important;
}

.btn-primary-outline {
    border: 1px solid !important;
    border-color: var(--primary-light) !important;
    border-radius: .25rem !important;
    color: var(--primary-light) !important;
    font-weight: 400 !important;
}

.btn-primary-outline:hover {
    background-color: var(--primary-light) !important;
    color: var(--park-off-white) !important;
}

.image-heading-container {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.resource-box:last-child {
    border: none !important;
    margin-bottom: 0 !important;
}

.text-layer-one, .text-layer-one-hover:hover {
    color: var(--layer-one) !important;
}

.text-light-primary, .text-light-primary-hover:hover {
    color: var(--primary-light) !important;
}

.text-primary, .text-primary-hover:hover {
    color: var(--primary) !important;
}

.text-secondary, .text-secondary-hover:hover {
    color: var(--secondary) !important;
}

.text-soft-secondary, .text-soft-secondary-hover:hover {
    color: var(--secondary-soft) !important;
}

.text-soft-primary, .text-soft-primary-hover:hover {
    color: var(--primary-soft) !important;
}


@media (min-width: 768px) {
    .image-heading-container {
        min-height: 500px;
        padding: 0 0 !important;
    }
}

@media (min-width: 992px) {
    .about-us-title-container {
        max-width: 500px;
    }
}