@import "ticFramework.css";
@import "ticFrameworkForms.css";
@font-face
{
    font-family: Acumin Pro;
    src: local("Acumin Pro Regular"),local("AcuminPro-Regular"),url("../Font/AcuminPro-Regular.woff2") format("woff2"),url("../../fonts/AcuminPro-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face
{
    font-family: Acumin Pro;
    src: local("Acumin Pro Bold"),local("AcuminPro-Bold"),url("../Font/AcuminPro-Bold.woff2") format("woff2"),url("../../fonts/AcuminPro-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}

@font-face
{
    font-family: Oswald;
    src: local("Oswald Medium"),local("Oswald-Medium"),url("../Font/Oswald-Medium.woff2") format("woff2"),url("../../fonts/Oswald-Medium.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}

@font-face
{
    font-family: Oswald;
    src: local("Oswald Regular"),local("Oswald-Regular"),url("../Font/Oswald-Regular.woff2") format("woff2"),url("../../fonts/Oswald-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

:root
{
    --rslNavyBlue: #023e62;
    --rslOrange: #f5bc00;
    --whiteMuted: #819fb1;
    --rslNavyBlueDisabled: #e6edf1;
    --lightNavy: #034a76;
    --primaryFont: "Acumin Pro", system-ui, sans-serif;
    --secondaryFont: "Oswald", sans-serif;
}

html, body, form
{
    min-height: 100vh;
}
body
{
    font-family: var(--primaryFont);
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1rem;
    color: black;
    line-height: 1.65;
}

.pageTemplate
{
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
header, footer
{
    padding: 0 2.5vw;
}

a
{
    color: var(--rslNavyBlue);
}
a:hover
{
    text-decoration: none;
}

h1, h2, h3, h4, h5
{
    font-family: var(--secondaryFont);
    color: var(--rslNavyBlue);
    text-transform: uppercase;
}

input[type="button"], input[type="reset"], input[type="submit"], .ButtonLink
{
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--rslNavyBlue);
    padding: 0.5rem 1.1rem;
    border: solid 2px var(--rslNavyBlue);
    margin: 5px 15px 5px 0;
}

    input[type="button"]:last-child, input[type="reset"]:last-child, input[type="submit"]:last-child, .ButtonLink:last-child
    {
        margin-right: 0;
    }
.ButtonLinkWhite
{
    color: var(--rslNavyBlue);
    border-color: white;
    background-color: white;
}
.ButtonLinkOrange
{
    color: var(--rslNavyBlue);
    border-color: var(--rslOrange);
    background-color: var(--rslOrange);
}

input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .ButtonLink:hover
{
    background-color: white;
    color: var(--rslNavyBlue);
}

.ButtonLinkWhite:hover, .ButtonLinkOrange:hover
{
    background-color: var(--rslNavyBlue);
    color: white;
    border-color: white;
}

header
{
    background-color: var(--rslNavyBlue);
}
    header .logo
    {
        padding: 0 25px 0 0;
    }
        header .logo img
        {
            height: 5.3vw;
            padding: 5px;
            box-sizing: border-box;
            display: block;
        }
header nav.desktop
{
    margin-right: 20px;
}
header nav.mobile
{
    margin-right: 5px;
}

    header .buttonDonate
    {
        margin-right: 0;
    }

.titleSlideCrumbs
{
    background-color: var(--lightNavy);
    padding: 0 2.5vw 0;
    margin-bottom: 2.5vw;
}

    .titleSlideCrumbs .titleSlides
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 15vw;
    }

    .titleSlideCrumbs .crumbs
    {
        padding: 20px 0;
        border-top: solid 1px var(--whiteMuted);
        display: block;
        font-size: 0.75em;
        text-transform: uppercase;
        color: white;
    }

        .titleSlideCrumbs .crumbs a
        {
            color: white;
        }

h1.pageTitle
{
    color: white;
    font-size: 4vw;
    font-weight: normal;
}

footer
{
    background-color: var(--rslNavyBlue);
    color: white;
}
    footer a
    {
        color: white;
    }
    footer .upper
    {
        margin: 2em 0;
        display: flex;
        justify-content: space-between;
    }
        footer .upper .logoContact
        {
            display: flex;
        }
        footer .upper .logoContact .logo img
        {
            width: 135px;
        }
    footer .col
    {
        padding: 0 1.125rem;
        line-height: 2.5;
        box-sizing: border-box;
    }
        footer .col h3
        {
            font-size: 0.875em;
            font-weight: bold;
            margin: 0;
            padding: 0;
            text-transform: uppercase;
        }
    footer .lower
    {
        font-size: 0.875em;
        color: var(--whiteMuted);
    }

@media(max-width: 1535px)
{
    footer .upper
    {
        margin: 2em 0;
        display: block;
    }

        footer .upper .logoContact
        {
            margin-bottom: 2em;
        }
}
@media(max-width: 1150px)
{
    header .logo img
    {
        height: 60px;
    }
}
@media (max-width: 900px)
{
    h1.pageTitle
    {
        font-size: 36px;
    }

}
@media (max-width: 800px)
{
    header .logo
    {
        width: 90px;
        padding: 5px;
    }

    footer .lower.flexBetweenCenter
    {
        display: block;
        text-align: center;
    }
}

@media (max-width: 767px)
{
    footer .flexBetweenStart
    {
        flex-wrap: wrap;
    }

    footer .upper
    {
        margin-bottom: 0;
    }

        footer .flexBetweenStart .col
        {
            width: 50%;
            margin-bottom: 2em;
        }
}

@media (max-width: 639px)
{
    footer .upper .logoContact
    {
        display: block;
    }
        footer .flexBetweenStart .col
        {
            width: 100%;
        }
}
@media print
{
    header
    {
        border-bottom: 0;
    }
}

/*************************************************************************************************/

.tiles
{
    text-align: center;
}
.tiles .tile
{
    display: inline-block;
    width: 31.3333333333%;
    margin: 1%;
    vertical-align: top;
}
@media (max-width: 800px)
{
    .tiles .tile
    {
        width: 48%;
    }
}
@media (max-width: 400px)
{
    .tiles .tile
    {
        width: 100%;
        margin: 10px 0 10px 0;
    }
}

/*********************************************************************************************************************/

.boxesContainer
{
    display: flex;
    flex-wrap: wrap;
    padding: 50px 0;
}
.subBranchListing .boxesContainer
{
    padding-top: 0;
}

    .boxesContainer .boxLink
    {
        width: 33.333333333333333%;
    }

        .boxesContainer .boxLink .text
        {
            position: relative;
        }

            .boxesContainer .boxLink .text .flexBetweenCenter
            {
                padding: 20px;
                margin: 0;
                font-size: 1em;
                text-transform: uppercase;
                font-weight: bold;
            }
            .boxesContainer .boxLink .text .inner
            {
                padding: 20px;
            }

                .boxesContainer .boxLink .text .flexBetweenCenter .icon::after
                {
                    font-size: 1.5em;
                    content: "🞢";
                }

        .boxesContainer .boxLink.active .text .flexBetweenCenter .icon::after
        {
            content: "🡢";
        }

        .boxesContainer .boxLink .text .border
        {
            position: absolute;
            border: solid 1px var(--rslNavyBlue);
            transition: .5s ease;
        }

        .boxesContainer .boxLink.inactive .text .border
        {
            border-color: var(--rslNavyBlueDisabled);
        }

        .boxesContainer .boxLink.active .text .borderTop, .boxesContainer .boxLink.active .text .borderBottom
        {
            left: 0;
            right: 0;
            z-index: 1;
        }

        .boxesContainer .boxLink.active .text .borderRight, .boxesContainer .boxLink.active .text .borderLeft
        {
            top: 0;
            bottom: 0;
            z-index: 1;
        }

        .boxesContainer .boxLink .text .borderTop
        {
            top: -1px;
            left: 15px;
            right: 15px;
        }
            .boxesContainer .boxLink .text .borderRight
            {
                right: -1px;
                top: 15px;
                bottom: 15px;
            }
            .boxesContainer .boxLink .text .borderBottom
            {
                bottom: -1px;
                left: 15px;
                right: 15px;
            }
        .boxesContainer .boxLink .text .borderLeft
        {
            left: -1px;
            top: 15px;
            bottom: 15px;
        }
        .boxesContainer .boxLink .image
        {
            position: relative;
        }
            .boxesContainer .boxLink .image h3
            {
                position: absolute;
                bottom: 5%;
                left: 5%;
                color: white;
                width: 90%;
                color: white;
                font-size: 2em;
                font-weight: normal;
                margin: 0;
                padding: 0;
                text-shadow: 0 0 10px rgba(0,0,0,1);
            }

    .boxesContainer .boxLinkLargeText .text .flexBetweenCenter
    {
        align-items: center;
        height: 100%;
        box-sizing: border-box;
    }

    .boxesContainer .boxLinkLargeText .text .flexBetweenCenter div:first-child
    {
        width: 100%;
        text-align: center;
        font-size: 3em;
        font-weight: 400;
    }
    .boxesContainer .text .inner .address
    {
        line-height: 1.3;
        margin-bottom: 10px;
    }
    .boxesContainer .text .inner .icon
    {
        color: var(--rslNavyBlue);
        margin-right: 10px;
    }

    @media (max-width: 767px)
    {
        .boxesContainer
    {
        display: block;
    }

        .boxesContainer .boxLink
        {
            width: 100%;
        }

}