$col-border-color: #ddd;
$title-background-color: #f2f2f2;
$button-background-color: #333;
$button-background-color-hover: #4d4d4d;

.pricing-col {
    overflow: hidden;
    margin-bottom: 26px;
    padding: 0;
    font-size: 16px;
    font-weight: $light;
    text-align: center;
    border: 1px $col-border-color solid;
    border-right: none;
    @media (max-width: 767px) {
        width: 100% !important;
        border: 1px $col-border-color solid;
    }
    &:last-child {
        border-right: 1px $col-border-color solid;
        border-left: none;
        @media (max-width: 767px) {
            border: 1px $col-border-color solid;    
        }
    }
    &.pricing-col-featured {
        top: -27px;
        &:not(:first-child) {
            margin-left: 0;
            border: solid 1px $primary-color;
        }
        @media (max-width: 767px) {
            top: 0;
        }
        .pricing-ribbon {
            background: $primary-color;
        }
        .title {
            margin-bottom: 33px;
            @media (max-width: 767px) {
                margin: 0;
            }
        }
        .price {
            margin-bottom: 30px;
            color: $primary-color;
        }
        .pricing-content {
            padding-top: 2px;
            @media (max-width: 767px) {
                padding: 0;
            }
        }
        .button {
            margin-top: 45px;
            background: $primary-color;
            &:hover {
                background: $primary-color-hover;    
            }
            @media (max-width: 767px) {
                margin: 0;
            }
            &.disabled {
                &:hover {
                    background: $primary-color;
                }      
            }
        }
    }
    .title {
        font-size: 32px;
        font-weight: $light;
        margin: 0;
        padding: 20px 0;
        background: $title-background-color;
    }
    .price {
        margin: 30px 0 10px;
        padding: 26px 0;
        font-size: 65px;
        font-weight: $light;
        color: #000;
    }
    .currency {
        font-size: 32px;
    }
    .button {
        font-size: 32px;
        display: block;
        margin-top: 30px;
        padding: 7px 25px 10px;
        color: #fff;
        background: $button-background-color;
        font-weight: $light;
        text-decoration: none;
        &:hover {
            background: $button-background-color-hover;
        }
        &.disabled {
            &:hover {
                background: $button-background-color;
            }      
        }
        &.fallback {
            font-size: 18px;
            line-height: 1.4;
        }
    }
    .pricing-ribbon {
        position: absolute;
        top: 10px;
        right: -45px;
        padding: 5px 50px;
        transform: rotate(45deg);
        color: #fff;
        background: $button-background-color;
    }
}
.pricing-content {
    font-weight: $regular;
    ul {
        width: 80%;
        margin: 0 auto;
        margin-top: 16px;
        padding: 0;
    }
    li {
        padding: 16px 0;
        list-style: none;
        border-bottom: solid 1px $col-border-color;
        &:last-child {
            border-bottom: none;
        }
    }
}