[data-bs-theme=light] {
    --color-pagetitle: #cab57b;
    --color-pagetitle-secondary: #cab57b;
    --bg-about-category: #012350;
    --bg-about-category-active: #f5f5f5;
    --color-about-category-icon: #3d4c65;
    --color-about-category-title: white;
    --color-about-category-description: #6d84a6;
    --color-about-contact-title: #012350;
    --color-about-contact-description: #666;
    --color-about-honor-border: #cab57b;
}

body {
    background: var(--bg-main) url(/Images/bg-nav-about.png) center top/100% 280px no-repeat;
}

header {
    background: var(--bg-nav) url(/Images/bg-nav-about-small.png) center top/100% 80px no-repeat;
}

    header nav {
        background-color: transparent;
    }

main .PageTitle {
    color: var(--color-pagetitle);
}

main .PageSecondarytitle {
    color: var(--color-pagetitle-secondary);
}

main #divAboutAndContact a.Image {
    background-repeat: no-repeat;
    background-position: center;
    /*background-size: 100% 100%;*/
    background-size: contain;
}

    main #divAboutAndContact a.Image:hover {
        transform: scale(1.1);
        transition: all .2s linear;
    }

main #divAboutAndContact h2.PartTitle {
    color: #16275d;
}

main #divAboutAndContact .PartSecondarytitle {
    color: #9a9a9a;
}

@media (min-width: 0px) {
    #dg-qualifications .dg-wrapper {
        width: 140px;
        height: 198px;
    }

        #dg-qualifications .dg-wrapper a {
            width: 140px;
            height: 198px;
        }

            #dg-qualifications .dg-wrapper img,
            #dg-qualifications .dg-wrapper a img {
                width: 140px;
                height: 198px;
                padding: 0px;
            }


    #dg-honors .dg-wrapper {
        width: 150px;
        height: 102px;
    }

        #dg-honors .dg-wrapper a {
            width: 150px;
            height: 102px;
        }

            #dg-honors .dg-wrapper img,
            #dg-honors .dg-wrapper a img {
                width: 150px;
                height: 102px;
                padding: 0px;
            }

    #dg-patents .dg-wrapper {
        width: 140px;
        height: 192px;
    }

        #dg-patents .dg-wrapper a {
            width: 140px;
            height: 192px;
        }

            #dg-patents .dg-wrapper img,
            #dg-patents .dg-wrapper a img {
                width: 140px;
                height: 192px;
                padding: 0px;
            }
}

@media (min-width: 576px) {
    #dg-qualifications .dg-wrapper {
        width: 192px;
        height: 271px;
    }

        #dg-qualifications .dg-wrapper a {
            width: 192px;
            height: 271px;
        }

            #dg-qualifications .dg-wrapper img,
            #dg-qualifications .dg-wrapper a img {
                width: 192px;
                height: 271px;
                padding: 0px;
            }

    #dg-honors .dg-wrapper {
        width: 192px;
        height: 131px;
    }

        #dg-honors .dg-wrapper a {
            width: 192px;
            height: 131px;
        }

            #dg-honors .dg-wrapper img,
            #dg-honors .dg-wrapper a img {
                width: 192px;
                height: 131px;
                padding: 0px;
            }

    #dg-patents .dg-wrapper {
        width: 192px;
        height: 263px;
    }

        #dg-patents .dg-wrapper a {
            width: 192px;
            height: 263px;
        }

            #dg-patents .dg-wrapper img,
            #dg-patents .dg-wrapper a img {
                width: 192px;
                height: 263px;
                padding: 0px;
            }
}

@media (min-width: 992px) {
    #dg-qualifications .dg-wrapper {
        width: 300px;
        height: 424px;
    }

        #dg-qualifications .dg-wrapper a {
            width: 300px;
            height: 424px;
        }

            #dg-qualifications .dg-wrapper img,
            #dg-qualifications .dg-wrapper a img {
                width: 300px;
                height: 424px;
                padding: 0px;
            }

    #dg-honors .dg-wrapper {
        width: 300px;
        height: 204px;
    }

        #dg-honors .dg-wrapper a {
            width: 300px;
            height: 204px;
        }

            #dg-honors .dg-wrapper img,
            #dg-honors .dg-wrapper a img {
                width: 300px;
                height: 204px;
                padding: 0px;
            }

    #dg-patents .dg-wrapper {
        width: 300px;
        height: 412px;
    }

        #dg-patents .dg-wrapper a {
            width: 300px;
            height: 412px;
        }

            #dg-patents .dg-wrapper img,
            #dg-patents .dg-wrapper a img {
                width: 300px;
                height: 412px;
                padding: 0px;
            }
}

main #divAboutAndContact div.TitleMargin,
main #divAboutAndContact div.Categories {
    height: 100px;
}

    main #divAboutAndContact div.Categories .nav-link {
        background-color: var(--bg-about-category);
        color: var(--color-about-category-title);
        margin-right: 0.05em;
    }

        main #divAboutAndContact div.Categories .nav-link.active {
            background-color: var(--bg-about-category-active);
            color: var(--bg-about-category);
            text-decoration: underline;
            text-underline-offset: 6px;
        }

main #divAboutAndContact #divAbout {
}

    main #divAboutAndContact #divAbout .title {
    }

    main #divAboutAndContact #divAbout .description {
        text-indent: 2em;
    }

    main #divAboutAndContact #divAbout .image {
        background: url(/Images/bg-about-description.png) center top no-repeat;
        background-size: contain;
        min-height: 249px;
    }

    main #divAboutAndContact #divAbout .card svg {
        width: 2em;
        height: 2em;
    }

    main #divAboutAndContact #divAbout .card .description {
        border-left: solid 1px gray;
    }

main #divAboutAndContact #divContact .bmap {
    min-height: 400px;
    background: url(/Images/bmap-bj.png) center center no-repeat;
    background-size: contain;
}

main #divAboutAndContact #divContact .title {
    color: var(--color-about-contact-title);
}

main #divAboutAndContact #divContact .description {
    color: var(--color-about-contact-description);
}

main #divAboutAndContact #divHonor button.dg-prev,
main #divAboutAndContact #divHonor button.dg-next {
    border: none;
    background: none;
}

    main #divAboutAndContact #divHonor button.dg-prev:hover,
    main #divAboutAndContact #divHonor button.dg-next:hover {
        border: var(--color-about-honor-border);
        background: var(--color-about-honor-border);
    }

main #divAboutAndContact #divTypicalCustomers .carousel {
    height: 130px;
}