/*
 *
 *    [Table of contents]
 *
 *    [&. Content / #key]
 *    [Let press Ctrl + f and type of paste the key, then press Enter to search the content ]
 *
 *    Summary: Pricing Box
 *
 *    1. Pricing Box
 *    2. Responsive
 *
 *
 */



/*----------  1. Pricing Box  ----------*/

    .slz-pricing-plan-01 .slz-list-block .item {
        padding: 0 8px;
    }

    .slz-pricing-table-01 {
        position: relative;
        padding: 0;
        background-color: #fbfbfb;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        border: none;
        overflow: hidden;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
    }

    .slz-pricing-table-01 .pricing-header {
        margin-bottom: 0;
    }

    .slz-pricing-table-01 .pricing-header .title {
        font-size: 14px;
        font-weight: 500;
        color: #3f506c;
        text-transform: uppercase;
        margin-bottom: 0;
        padding: 40px 15px 15px 15px;
        background: #f5f5f5;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        position: relative;
    }

    .slz-pricing-table-01 .pricing-section {
        color: #fff;
        font-size: 29px;
        font-weight: 600;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background: #1b4269;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        text-align: center;
        display: inline-block;
        margin-top: 20px;
        padding: 38px 9px;
        min-width: 100px;
    }
    
    .slz-pricing-table-01 .pricing-body .pricing-option {
        margin-bottom: 0;
        color: #868e97;
        padding-top: 10px;
    }

    .slz-pricing-table-01 .pricing-body {
        padding: 15px 15px 0 15px;
    }

    .slz-pricing-table-01 .pricing-footer .btn {
        padding: 10px 35px;
        width: auto;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        background: #d32eb2;
        background: -moz-linear-gradient(left, #d32eb2 0%, #0c72c7 100%);
        background: -webkit-linear-gradient(left, #d32eb2 0%, #0c72c7 100%);
        background: linear-gradient(to right, #d32eb2 0%, #0c72c7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d32eb2', endColorstr='#0c72c7',GradientType=1 );
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .slz-pricing-table-01.active,
    .slz-pricing-table-01:hover {
        box-shadow: none;
        background-color: #1b4269;
    }

    .slz-pricing-table-01.active .pricing-header .title,
    .slz-pricing-table-01:hover .pricing-header .title {
        color: #eaf1f8;
        background: #2c537b;
    }

    .slz-pricing-table-01.active .pricing-body .pricing-option,
    .slz-pricing-table-01:hover .pricing-body .pricing-option {
        color: #92a6ba;
    }
    
    .slz-pricing-table-01.active .pricing-section,
    .slz-pricing-table-01:hover .pricing-section {
        color: #1b4269;
        background-color: #fbfbfb;
    }
    
    .slz-pricing-table-01 .pricing-footer {
        padding-top: 25px;
        padding-bottom: 45px;
        margin-top: 0;
        margin-bottom: 0;
        text-transform: uppercase;
    }

    .slz-pricing-table-01:before,
    .slz-pricing-table-01:after {
        content: '';
        position: absolute;
        top: 0;
        z-index: 10;
        left: -7px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        box-shadow: inset 10px 0 0 20px #fff, 30px 0 0 0px #fff, 60px 0 0 0px #fff, 90px 0 0 0px #fff, 
                        120px 0 0 0px #fff, 150px 0 0 0px #fff, 180px 0 0 0px #fff, 210px 0 0 0px #fff, 
                        240px 0 0 0px #fff, 270px 0 0 0px #fff, 300px 0 0 0px #fff, 330px 0 0 0px #fff,
                        360px 0 0 0px #fff, 390px 0 0 0px #fff, 420px 0 0 0px #fff, 450px 0 0 0px #fff,
                        480px 0 0 0px #fff, 510px 0 0 0px #fff, 540px 0 0 0px #fff, 570px 0 0 0px #fff, 
                        600px 0 0 0px #fff, 630px 0 0 0px #fff, 660px 0 0 0px #fff, 690px 0 0 0px #fff, 
                        720px 0 0 0px #fff, 750px 0 0 0px #fff, 780px 0 0 0px #fff, 810px 0 0 0px #fff, 
                        840px 0 0 0px #fff, 870px 0 0 0px #fff, 900px 0 0 0px #fff, 930px 0 0 0px #fff, 
                        960px 0 0 0px #fff, 990px 0 0 0px #fff, 1020px 0 0 0px #fff, 1050px 0 0 0px #fff, 
                        1080px 0 0 0px #fff, 1110px 0 0 0px #fff, 1140px 0 0 0px #fff, 1170px 0 0 0px #fff, 
                        1200px 0 0 0px #fff, 1230px 0 0 0px #fff, 1260px 0 0 0px #fff, 1290px 0 0 0px #fff, 
                        1320px 0 0 0px #fff, 1350px 0 0 0px #fff, 1380px 0 0 0px #fff, 1410px 0 0 0px #fff, 
                        1440px 0 0 0px #fff, 1470px 0 0 0px #fff, 1500px 0 0 0px #fff, 1530px 0 0 0px #fff;
        -webkit-transform: translateY(-60%);
        -ms-transform: translateY(-60%);
        -o-transform: translateY(-60%);
        transform: translateY(-60%);
    }

    .slz-pricing-table-01:after {
        top: auto;
        bottom: 0;
        -webkit-transform: translateY(60%);
        -ms-transform: translateY(60%);
        -o-transform: translateY(60%);
        transform: translateY(60%);
    }


/*=====================================
=            2. Responsive            =
=====================================*/

    @media screen and (max-width: 736px) {
        .slz-pricing-plan-01 .slz-list-block {
            margin: 0 8px;
        }

        .slz-pricing-plan-01 .slz-list-block .item {
            margin-bottom: 30px;
        }
    }
    
    @media screen and (max-width: 480px) {
        .slz-pricing-plan-01 .slz-list-block {
            margin: 0;
        }

        .slz-pricing-plan-01 .slz-list-block .item {
            margin-bottom: 20px;
            padding: 0 15px;
        }
    }

/*=======  End of 2. Respinsive  =======*/