﻿body {
}

.pricing-box-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    @media screen and (width <= 950px) {
        flex-flow:column;
    }

    .pricing-box {
    background: linear-gradient(180deg, #1f1b50 18%, #fff 18%);
    box-shadow: 3px 7px 4px 1px rgba(163,163,163,0.75);
    border-radius: 4px;
    flex: 1;
    padding: 0 1em 1.5em;
    margin: 2%;
    min-width: 250px;
    max-width: 450px;
    min-height: -webkit-fill-available;
    min-height:stretch;
    > .wrapper
    {
        margin:0;
        padding: 0 0 2% 0;
        display: flex;
        flex-flow: row wrap;
        width: 100%;
        font-size: large;
    }
    > .wrapper > .header {
        order: 1;
        flex-basis: 39%;
        font-weight: 600;
        background-color: lightgrey;
    }
    > .wrapper > .headerfiller {
        order: 1;
        flex-basis: 20%;
        background-color: lightgrey;
    }
    > .wrapper > .columnleft {
        font-weight: 200;
        order: 2;
        flex-basis: 37.5%;
        /*border-right: 2px solid black;*/
        border-bottom: 2px solid black;
        align-content:center;
    }
> .wrapper > .columnmiddle {
    font-weight: 800;
    order: 2;
    flex-basis: 23%;
    /* border-right: 2px solid black;*/
    border-bottom: 2px solid black;
    align-content: center;

    @media screen and (width <= 1020px) {
        font-size:medium;
    }
}
    > .wrapper > .columnright {
        font-weight: 200;
        order: 2;
        flex-basis: 37.5%;
        border-bottom: 2px solid black;
        align-content: center;
    }
}

.pricing-box h5 {
    text-transform: uppercase;
    font-size: 1.5rem;
    color: #fff;
    min-height: 70px;
    margin-bottom: 0.25em;
}

.price {
    margin: 0 0 0.5em 0;
    font-size: 36px;
    font-weight: 900;
}
.price sub, .price sup {
    font-size: 16px;
    font-weight: 100;
}