html {
    scroll-behavior: smooth;
}

.banner {
    width: 100%;
}

.collapsible {
    cursor: pointer;
    transition: 0.5s;
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.active,
.collapsible:hover {
    background-color: #BA2231;
    color: white;
    transition: 0.5s;
    border-radius: 10px;
}

.about-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.nav {
    flex-direction: column;
}

.large-img {
    width: 80%;
    max-width: 400px;
    display: block;
    margin: auto;
}

.infographic-header {
    color: #FFF;
    background-color: #BA2231;
}

.red-text {
    color: #BA2231;
}

@media (orientation: portrait) {
    .nav {
        flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 0 !important;
    }
}