/*Last update: 2025-04-17T14:25:09.539Z*/
@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial.ttf") format("truetype");
    font-style: normal;
    font-weight: normal
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: bold
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial Italic.ttf") format("truetype");
    font-style: italic;
    font-weight: normal
}

@font-face {
    font-family: "Arial";
    src: url("../fonts/Arial Bold Italic.ttf") format("truetype");
    font-style: italic;
    font-weight: bold
}

@font-face {
    font-family: "helvetica_neue";
    src: url("../fonts/helveticaneueblack-webfont.woff2") format("woff2"), url("../fonts/helveticaneueblack-webfont.woff") format("woff");
    font-weight: 950;
    font-style: normal
}

@font-face {
    font-family: "helvetica_neue";
    src: url("../fonts/helveticaneueheavy-webfont.woff2") format("woff2"), url("../fonts/helveticaneueheavy-webfont.woff") format("woff");
    font-weight: 900;
    font-style: normal
}

@font-face {
    font-family: "helvetica_neue";
    src: url("../fonts/helveticaneuebold-webfont.woff2") format("woff2"), url("../fonts/helveticaneuebold-webfont.woff") format("woff");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: "helvetica_neue";
    src: url("../fonts/helveticaneuemedium-webfont.woff2") format("woff2"), url("../fonts/helveticaneuemedium-webfont.woff") format("woff");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: "helvetica_neue";
    src: url("../fonts/helveticaneueroman-webfont.woff2") format("woff2"), url("../fonts/helveticaneueroman-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "helvetica_neue";
    src: url("../fonts/helveticaneuelight-webfont.woff2") format("woff2"), url("../fonts/helveticaneuelight-webfont.woff") format("woff");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: "helvetica_neue";
    src: url("../fonts/helveticaneueultralight-webfont.woff2") format("woff2"), url("../fonts/helveticaneueultralight-webfont.woff") format("woff");
    font-weight: 200;
    font-style: normal
}

@media screen and (min-width: 1200px) {
    .container {
        padding-right: 0;
        padding-left: 0
    }
}

.header-banner {
    height: 251px;
    background-image: url("../images/temp/Screenshot 2024-09-22 at 2.13.57 PM 1.png");
    background-size: cover;
    position: relative
}

    .header-banner h5 {
        position: absolute;
        top: 51.3%;
        left: 10.2%;
        max-width: 461px;
        font-weight: bold;
        color: #fff
    }

#bread-crumbs {
    font-family: "helvetica_neue";
    background-color: #1a1a1a;
    height: 59px;
    line-height: 59px
}

    #bread-crumbs > div > a {
        color: #747272
    }

        #bread-crumbs > div > a:hover {
            color: #fff
        }

    #bread-crumbs > div > span[current] {
        color: #fff
    }

    #bread-crumbs > div > span[slash] {
        color: #fff
    }

.tabs {
    position: sticky;
    top: 0;
    min-height: 102px;
    border-bottom: 4px solid #cacaca;
    background-color: #191738;
    z-index: 1
}

    .tabs > a {
        height: 80px;
        border-left: 1px solid #cacaca;
        padding: 24px 28px;
        cursor: pointer;
        color: rgba(229, 229, 229, .9);
        text-align: center
    }

@media screen and (max-width: 576px) {
    .tabs > a {
        font-size: 16px !important;
        padding: 24px 10px
    }
}

.tabs > a:last-child {
    border-right: 1px solid #cacaca
}

.tabs > a.link-active {
    color: #fff;
    font-weight: bold
}

.tabs > a:hover {
    color: #fff
}

main {
    position: relative
}

    main > .main-bg {
        position: absolute;
        inset: 0;
        background-color: pink;
        z-index: -999
    }

        main > .main-bg .white-plane {
            background-color: #fff;
            height: 100%;
            flex: 1 0 71.5%
        }

        main > .main-bg .beige-plane {
            background-color: #f9f2eb;
            height: 100%;
            flex: 1 0 28.5%
        }

    main > .container {
        padding-top: 38px;
        padding-bottom: 100px
    }

        main > .container > div {
            position: relative
        }

            main > .container > div hr {
                margin: 18.5px 0
            }

            main > .container > div h2 {
                position: absolute;
                top: -16px;
                left: 0;
                background-color: #fff;
                padding-right: 30px
            }

            main > .container > div > p,
            main > .container > div > div > p {
                padding-top: 24px;
                padding-bottom: 80px;
                width: 622px;
                color: #2c2f34;
                white-space: pre-line
            }

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

    main > .container > div > p,
    main > .container > div > div > p {
        width: auto
    }
}

main > .container > div > div > div.img-container {
    width: 459px;
    height: 632px;
    margin-top: 24px;
    /*background-image: url("../images/temp/Maskgroup.png");
    background-size: cover*/
}

div.img-container > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 576px) {
    main > .container > div > div > div.img-container {
        max-width: 459px
    }
}

main > .container > div > div.time-line-section {
    padding-top: 30px
}

    main > .container > div > div.time-line-section div:first-child {
        flex: 0 0 14.5%
    }

    main > .container > div > div.time-line-section div:nth-child(2) {
        width: 20px
    }

    main > .container > div > div.time-line-section div:last-child.time-line-section-info-1 {
        flex: 0 0 83.8%
    }

        main > .container > div > div.time-line-section div:last-child.time-line-section-info-1 > span:first-child {
            flex: 0 0 37.7%;
            /* background-image: url("../images/temp/Maskgroup.png");
            background-size: cover;*/
            min-height: 180px;
            max-width: 362px
        }

div:last-child.time-line-section-info-1 > span:first-child > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 576px) {
    main > .container > div > div.time-line-section div:last-child.time-line-section-info-1 > span:first-child {
        flex: 0 0 100%;
        max-width: 100%
    }
}

main > .container > div > div.time-line-section div:last-child.time-line-section-info-1 > span:last-child {
    background-color: #191738;
    flex: 0 0 62.3%;
    padding: 40px 40px 40px 30px;
    color: #fff
}

@media screen and (max-width: 576px) {
    main > .container > div > div.time-line-section div:last-child.time-line-section-info-1 > span:last-child {
        flex: 0 0 100%
    }
}

main > .container > div > div.time-line-section div:last-child.time-line-section-info-2 {
    flex: 0 0 83.8%
}

    main > .container > div > div.time-line-section div:last-child.time-line-section-info-2 > span:first-child {
        max-width: 960px
    }

/* main > .container > div > div.time-line-section div:last-child.time-line-section-info-2 > span:first-child > div {
            background-image: url("../images/temp/Maskgroup.png");
            background-size: cover;
            height: 225px
        }*/

div:last-child.time-line-section-info-2 > span:first-child > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

main > .container > div > div.time-line-section div:last-child.time-line-section-info-2 > span:last-child {
    background-color: #191738;
    padding: 40px;
    color: #fff
}

    main > .container > div > div.time-line-section div:last-child.time-line-section-info-2 > span:last-child > p {
        white-space: pre-line
    }

div.thumbnail-links {
    margin-top: 100px;
    gap: 30px
}

    div.thumbnail-links > div {
        width: 362px;
        height: 235px;
        position: relative;
        border-radius: 4px;
        overflow: hidden
    }

        div.thumbnail-links > div > div {
            width: 362px;
            height: 235px;
            transition: transform .15s ease-out
        }

            div.thumbnail-links > div > div > img {
                width: 100%;
                height: 100%;
                -o-object-fit: cover;
                object-fit: cover
            }

        div.thumbnail-links > div > button {
            background-color: #191738;
            opacity: .7;
            color: #fff;
            height: 48px;
            width: 182px;
            position: absolute;
            left: 16px;
            bottom: 16px;
            border-radius: 4px;
            border: none;
            padding: 12px 20px
        }

            div.thumbnail-links > div > button > h6 {
                position: relative;
                text-align: start;
                font-size: 1rem
            }

                div.thumbnail-links > div > button > h6 span.chevron-right-line {
                    top: 8px;
                    right: 9px
                }

                    div.thumbnail-links > div > button > h6 span.chevron-right-line + svg {
                        top: 2px;
                        right: 8px
                    }

        div.thumbnail-links > div:hover > div {
            transform: scale(1.1)
        }

        div.thumbnail-links > div:hover > button {
            opacity: 1
        }

            div.thumbnail-links > div:hover > button h6 span.chevron-right-line {
                width: 11px;
                right: 6px
            }

                div.thumbnail-links > div:hover > button h6 span.chevron-right-line + svg {
                    right: 5px
                }

main > .container > div #the-museum-anchor,
main > .container > div #our-history-anchor,
main > .container > div #timeline-anchor {
    position: absolute;
    margin: -134px
}

main > .container > div #related-resources-anchor {
    position: absolute;
    top: -100px;
    left: 0
}