.sub-nav {
    background-color: var(--sub-nav-bg-color);
    padding: 1.5rem 0 1.5rem 0;
}
    .sub-nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        list-style: none;
        margin: 0;
        align-items: stretch;
    }
        .sub-nav ul li {
            background-color: #e8e8e8;
            text-align: center;
            display: flex;
            align-items: center;
            padding: .5rem;
            margin: 0 .5rem 0 0;
            cursor: pointer;
        }
        .sub-nav ul li a {
            color: var(--sub-nav-color);
            text-transform: uppercase;
            font-weight: 500;
        }
            .sub-nav ul li.active {
                border: 1px solid #ccc;
            }

@media (max-width: 1024px) {
        .sub-nav ul li {
            font-size: 1.4rem;
        }
}

@media (max-width: 767px) {
    .sub-nav ul {
        flex-direction: column;
    }
        .sub-nav ul li {
            margin: 0 0 .5rem 0;
            padding: .5rem;
        }
            .sub-nav ul li.active {
                background-color: #ccc;
            }
            .sub-nav ul li.active a {
                text-decoration: none;
            }
}