/**
 * All of the CSS  for public-facing functionality
 */

/* --- Pricing Tables --- */
/* grid layout */
/* For browsers that do support CSS Grid */

/* for browsers that DO NOT support CSS Grid */


.fc-pricingtable.flexwrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: center;
    -webkit-align-content: flex-start;
    flex-flow: row wrap;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}

.fc-pricingtable.flexwrap .fc-pricingtable-col {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-flow: column;
    flex-flow: column;
    width: 31%;
    margin-left: 0.5%;
    margin-right: 0.5%;
}

.fc-pricingtable.flexwrap.cols4 .fc-pricingtable-col {
    width: 22%;
}

.fc-pricingtable.flexwrap.cols5 .fc-pricingtable-col {
    width: 18%;
}

@media (max-width: 900px) {
    .fc-pricingtable.flexwrap .fc-pricingtable-col {
        width: 48%;
    }

    .fc-pricingtable.flexwrap.cols4 .fc-pricingtable-col,
    .fc-pricingtable.flexwrap.cols5 .fc-pricingtable-col {
        width: 31%;
    }
}

@media (max-width: 600px) {
    .fc-pricingtable.flexwrap.cols4 .fc-pricingtable-col,
    .fc-pricingtable.flexwrap.cols5 .fc-pricingtable-col {
        width: 48%;
    }
}

@media (max-width: 450px) {
    .fc-pricingtable.flexwrap .fc-pricingtable-col,
    .fc-pricingtable.flexwrap.cols4 .fc-pricingtable-col,
    .fc-pricingtable.flexwrap.cols5 .fc-pricingtable-col {
        width: 100%;
    }
}

@supports ( (display: grid)) {

    .fc-pricingtable.flexwrap {
        display: grid;
        justify-content: center;
        align-content: center;
        justify-items: stretch;
        grid-template-columns: repeat(auto-fit, 200px);
        grid-gap: 15px;
    }

    .fc-pricingtable.flexwrap .fc-pricingtable-col {
        margin-left: 0;
        margin-right: 0;
    }
    .fc-pricingtable.flexwrap.cols4 .fc-pricingtable-col,
    .fc-pricingtable.flexwrap.cols5 .fc-pricingtable-col {
        width: auto;
    }

    @media (min-width: 701px) {
        .fc-pricingtable.flexwrap.cols2, .fc-pricingtable.flexwrap.cols3 {
            grid-template-columns: repeat(auto-fit, 300px);
        }


        .fc-pricingtable.flexwrap.cols4 {
            grid-template-columns: repeat(4, 1fr);
        }

        .fc-pricingtable.flexwrap.cols5 {
            grid-template-columns: repeat(5, 1fr);
        }
    }

    @media (max-width: 700px) {
        .fc-pricingtable.flexwrap {
            grid-template-columns: repeat(auto-fit, 300px);
        }
    }

    .fc-pricingtable.flexwrap .fc-pricingtable-col {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        width: auto;
    }

}
.fc-pricingtable-footer {
    margin-top: auto;
}

/* --- end of grid --- */

/* --- content style --- */

.fc-pricingtable.flexwrap .fc-pricingtable-col {
    border: 2px solid #ebebeb;
    position: relative;
    text-align: center;
    padding-bottom: 2rem;
    margin-top: 60px;

}

.fc-pricingtable.flexwrap .fc-pricingtable-col.highlight {
    border: 4px solid #249A41;
}

.fc-pricingtable-col .highlighttext {
    display: block;
    color: white;
    background-color: #249A41;
    position: absolute;
    bottom: 100%;
    margin-right: -4px;
    margin-left: -4px;
    left: 0;
    right: 0;
    padding: 1rem;
}

.fc-pricingtable-col ul {
    margin: 0 0 2rem 0;
}

.fc-pricingtable-col ul li {
    list-style-type: none;
    border-bottom: 1px solid #ebebeb;
    padding-left: 24px;
    padding-right: 24px;

}

.fc-pricingtable-body .pricedesc {
    display: block;
    font-size: 80%;
}