.button-bar-wrapper{
    display: flex;
    justify-content: center;
}

.button-bar-trim{
    background-color: #eeeeee;
    {# min-width: 200px; #}
    flex: 1;
    padding: 40px 0px;
}

.button-bar-button{
    padding: 20px 40px;
    background-color: #c0dfe8;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center !important;
    flex: 2;
    cursor: pointer;
    transition: 500ms;
}
.button-bar-button a{
    color: #666666;
    font-family: 'Didact Gothic';
    text-align: center !important;
    font-size: 26px;
    text-decoration: none !important;
    transition: 500ms;
}


.button-bar-button:active,
.button-bar-button:hover,
.button-bar-button:focus{
    background-color: #ec1c24 !important;
}
.button-bar-button:active a,
.button-bar-button:hover a,
.button-bar-button:focus a{
    color: #fff !important;
}

@media(min width: 780px and max-width: 889px){
    .button-bar-trim{
        max-width: 20px !important;   
    }
}
@media(max-width: 779px){
    .button-bar-wrapper{
        flex-direction: column;
    }
    .button-bar-button{
        margin-left: 0px;
        margin-right: 0px;
        margin: 3px 0px;
    }
    .button-bar-trim{
        padding: 30px;
        margin: 3px 0px;
    }
}