.bgrid {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-auto-flow: dense;
    text-align: left;
    max-width: 915px;
    margin: auto;
    grid-row-gap: 25px;
}
.b-static-grid {
    max-width: 1300px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}
.static-benefit {
    flex: 1 0 30.33%;
    margin-left: auto;
    margin-right: auto;
    margin: 15px;
}

/*
.b-static-grid {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-auto-flow: dense;
    text-align: left;
    margin-top: 40px;
    grid-row-gap: 40px;
}
.static-benefit {
    width: 415px;
    margin-left: auto;
    margin-right: auto;
}
.benefit-static-image img{
    width: 415px;
    height: 240px;
}
*/

.benefit-static-text {
    padding: 20px 20px 10px 15px;
    margin: -10px 0 0 15px;
    border-left: solid 1px #dddddd;
}

.benefit-static-title p {
    font-weight: bold;
    text-align: left;
    margin-top: 5px;
}

.binner {
    position: relative;
    margin: 0 auto;
}

.bcontent {
    position: relative;
    text-align: center;
    width: 280px;
    height: 280px;
}

.benefit-overlay {
    position: absolute;
    width: 280px;
    top: 0px;
    color: white !important;
    align-content: center;
}

.benefit-overlay p {
    font-family: 'PT Sans', sans-serif;
    font-style: italic;
    color: white;
    font-size: 34px;
    font-weight: bold;
    line-height: 44px;
    text-align: left;
    text-shadow: 0 0 30px rgba(0,0,0,0.15);
    padding-left: 20px;
    padding-right: 20px;
}

.benefit-title {
    font-weight: bold;
    text-align: left;
    top: -9px;
    left: -33px;
    padding-left: 15px;
    padding-right: 15px;
}
.benefit-title p {
    font-size: 16px;
    line-height: 22px;
    color: black;
    font-weight: bold;
}

.benefit-text {
    padding-left: 15px;
    padding-right: 15px;
}
.benefit-text p {
    font-size: 16px;
    line-height: 22px;
}

.benefit-quote {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: auto;
    margin-bottom: 20px;
    font-weight: bold;
}

.benefit-quote p {
    line-height: 22px;
    font-size: 16px;
    color: #4099ff;
    font-style: italic;
}

/* entire container, keeps perspective */
.bflip-container {
    perspective: 1000px;
}
/* flip the pane when hovered */
.bflip-container:hover .bflipper, .bflip-container.hover .bflipper {
    transform: rotateY(180deg);
    box-shadow: 0 0 30px rgba(0,0,0,0.15);
}

/* flip speed goes here */
.bflipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.bfront, .bback {
    color: white;
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    visibility:visible;
    backface-visibility: hidden;

    /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);*/
}

.bfront:hover {
    box-shadow: 0 0 30px rgba(0,0,0,0.15);
}

/* front pane, placed above back */
.bfront {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.bback {
    transform: rotateY(180deg);
}

.bback {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* flex-wrap: wrap */
    background-color: white;
}

.bfront, .bback {
    position: absolute;
    width: 280px;
    height: 280px;
}

/* Button */
.benefit-button {
    text-align: center;
}
.hidden-benefits {
    display: none;
}

.three-static-benefits {
    max-width: 45%;
}

@media (max-width: 1000px) {
    .bgrid {
        grid-template-columns: 50% 50%;
        max-width: 610px;
    }
    .static-benefit {
        flex: 1 0 45%;
        max-width: 45%;
    }
}

@media (max-width: 768px) {
    .static-benefit {
        flex: 1 0 90%;
        margin: 20px 5% 5px 5%;
        max-width: 100%;
    }
    .three-static-benefits {
        max-width: unset;
    }
}

@media (max-width: 600px) {
    .bgrid {
        grid-template-columns: 100%;
        max-width: 305px;
    }
}