@import '../../../../assets/scss/variables';
@import '../../../../assets/scss/mixins';

.ftm_pricing_table {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;

    @media (max-width: $breakpoint-lg) {
        justify-content: center;
    }

    .membership {

        @media (max-width: $breakpoint-lg) {
            margin-left:5px;
            margin-right:5px;
            width: 30%;
        }

        @media (max-width: $breakpoint-md) {
            width: 100%;
        }

        display: flex;
        flex-direction: column;
        box-shadow: 0px 10px 40px -5px rgba(0, 0, 0, 0.15);
        margin: 25px 25px 25px 25px;
        padding: 10px;
        width: 28%;

        .membership-wrapper {
            background-color: #F8F8F8;
            position: relative;

            .membership-ribbon {
                position: absolute;
                top: -33px;
                background-color: #12ABF4;
                color: white;
                font-weight: bold;
                width: 100%;
                text-align: center;
                font-size: 13px;
                padding: 2px 10px;
            }
        }

        .membership-wrapper {

                .membership-titles{
                    background-color: black;
                    padding: 30px 0;
                    color: white;
                    text-align: center;
             }

        }

        ul {
            margin:0px;
            list-style: none;
            padding: 30px 0;

            li{
                margin-left: 15px;
                margin-right: 15px;
                font-size: 14px;
                line-height: 14px;
            }

            li:not(:first-child):before {
                border-top-style: solid;
                border-top-color: #ddd;
                border-top-width: 1px;
                margin-top: 8px;
                margin-bottom: 8px;
                content: '';
                display: block;
                margin-left: 20px;
            }

        }

        a.btn {
            display: block;
            margin-left: auto;
            margin-right: auto;
            background-color: black;
            padding: 10px;
            color: white;
            width: fit-content;
            margin-bottom: 30px;
            margin-top: 30px;
            font-size: 14px;
        }

    }

    .membership-price{
        display: flex;

        span {
            display: flex;
            flex-wrap: wrap;
            text-align: left;
            align-self: stretch;
            align-items: flex-start;
            flex-direction: column;
            font-size: .3em;
            line-height: 1.5;
        }
    }

    .membership-title {
        display: block;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        text-align: center;
    }

    .membership-subtitle {
        font-size: 13px;
    }

    .membership-price {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        color: #555;
        font-weight: 800;
        font-size: 65px;
        transition: all 0.3s ease;
        line-height: 65px;
        padding-bottom: 0px;
        padding-top: 30px;
    }

    .membership-price-detail {
        text-align: center;
        display: block;
    }

    

}