/* Header */
.page-header {
    padding-top: 9.5rem;
    padding-bottom: 52px;
}
/* End Header */


.search-by-letter-button {
    margin: 0;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.letter-button {
    width: 30px;
    line-height: 30px;
    text-align: center;
    background-color: var(--primary);
    font-size: 14px;
    text-transform: uppercase;
}
.letter-button.active {
    background-color: var(--primary);
}

@media only screen and (max-width:768px){
    .letter-button{
        width: auto;
        line-height: auto;
        font-size: 16px;
        background-color: white;
        color: var(--black);
    }

    .btn-secondary{
        color: var(--black);
        background-color: #fff;
        border-color: #e3e6ec;
    }

}

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

    /* Header */
    .page-header {
        padding-top: 6rem;
    }
    /* End Header */

}

@media (max-width: 767.98px) {

    /* Header */
    .page-header {
        padding-top: 4.5rem;
    }
    /* End Header */

}