/* ==============================================
Author Name: Codeglim
Author URI: http://codeglim.com
Project Name: X Price,
Description: X Price is a responsive pricing table,you can use this pricing table for your any hosting,business,corporate website.
================================================= */

/*=======================================
[Table of contents]
* Table Default CSS
* Table Style 1
	+ 3 Column
	+ 4 Column
	+ Without Grid
	+ Table Detailes
* Table Style 2
	+ 3 Column
	+ 4 Column
	+ Without Grid
	+ Table Detailes
* Table Style 3
	+ 3 Column
	+ 4 Column
	+ Without Grid
	+ Table Detailes
* Table Style 4
	+ 3 Column
	+ 4 Column
	+ Without Grid
* Table Style 5
	+ 3 Column
	+ 4 Column
	+ Without Grid (white bg)
* Table Style 6
	+ 3 Column
	+ 4 Column
	+ Wthout Grid
	+ Table Detailes
=========================================*/
/* Table Default CSS */
.table-section{
    padding: 70px 0;
}
/* Table Header */
.table-header {
    text-align: center;
    margin-bottom: 20px;
}
.table-header .title {
    text-transform: capitalize;
    font-size: 22px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: 400;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    display: inline-block;
    color: #555;
    text-transform: uppercase;
    margin: 0;
}
.table-header .title:before{
    position:absolute;
    left:50%;
    width:50%;
    height:2px;
    margin-left:-25%;
    content:"";
    background:#336E7B;
    bottom:0;
}
.table-header .title::after {
    position: absolute;
    left: 50%;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    content: "";
    background: #336E7B;
    bottom: 0;
    top: 35px;
    margin-left: -10px;
}
/* Table Default Style */
.table-default{
    margin-top:30px;
}
.table-default .title {
    margin: 0;
    font-family: 'Droid Sans', sans-serif;
    font-weight:700;
}
.table-default .text {
    font-family: 'Droid Sans', sans-serif;
    font-weight: 400;
}
.table-default .amount {
    font-family: 'Droid Sans', sans-serif;
}
.table-default .table-list,
.table-default .table-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.table-default .table-list li {
    font-family: 'Droid Sans', sans-serif;
    font-size: 14px;
    font-weight:400;
    display: block;
    cursor:pointer;
}
.table-default .button {
    font-family: 'Droid Sans', sans-serif;
    display: inline-block;
    font-size: 14px;
    padding: 12px 40px;
    text-decoration: none;
    font-weight:400;
    cursor: pointer;
    background: #f2f2f2;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/* Table Fix */
.row-fix {
    margin-left: -10px;
    margin-right: -10px;
}
.col-fix{
    padding-left:10px;
    padding-right:10px;
}

/* Table No Grid */
.table-section.no-grid .row-fix,
.table-section.detailes .row-fix{
    margin:0;
}
.table-section.no-grid .col-fix,
.table-section.detailes .col-fix{
    padding:0;
}


/*=======================
  Table Style 1
=========================*/
.table1 {
    overflow: hidden;
    background: #fff;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.40);
    -moz-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.40);
}

/* Table Head */
.table1 .table-head {
    position: relative;
    padding:15px;
}
.table1 .title {
    color: #fff;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
}
.table1 .table-head .amount {
    color: #fff;
    margin: 0;
    font-size: 20px;
}
.table1 .price span {
    font-size: 45px;
    font-weight: 700;
}

/* Table List */
.table1 .table-list {
    padding: 10px 15px;
}
.table1 .table-list li {
    color: #666;
    position: relative;
    text-transform: capitalize;
    padding: 12px 0;
}
.table1 .table-list li:last-child{
    margin:0;
}
.table1 .table-list li.cross {
    opacity: 0.5;
    text-decoration: line-through;
}
.table1 .table-list i {
    font-size: 13px;
    text-align: center;
    margin-right: 10px;
}

/* Table Bottom */
.table1 .table-bottom {
    text-align: center;
    background: #252525;
    padding: 15px;
    height: 100px;
}
.table1 .button {
    z-index: 1;
    position: relative;
    display: inline-block;
    padding: 10px 30px;
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 5px;
    border-radius: 5px;
    overflow: hidden;
}
.table1 .button:hover{
    color:#444;
    transform:scale(1.1);
}
.table1 .button:before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    transition:all 0.4s ease;
}
.table1 .button:hover:before{
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
.table1 .button i {
    font-size: 16px;
    margin-right: 10px;
}
.table1 .table-bottom .text{
    color:#fff;
    margin:0;
}
.table1 .table-bottom .text i{
    margin-right:5px;
}

/* Table Ribbon */
.table1 .ribbon {
    position: absolute;
    right: 5px;
    top: 24px;
    z-index: 1;
    overflow: hidden;
    width: 90px;
    height: 90px;
    text-align: right;
}
.table1 .ribbon span {
    font-size: 11px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 107px;
    display: block;
    background: #DB0A5B;
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 18px;
    right: -23px;
    height: 25px;
    line-height: 25px;
}
.table1 .ribbon span::before {
    content: "";
    position: absolute; left: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid #DB0A5B;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #DB0A5B;
}
.table1 .ribbon span::after {
    content: "";
    position: absolute; right: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #DB0A5B;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #DB0A5B;
}

/* Table Ribbon */
.table-section.style1.no-grid .ribbon {
    right: -5px;
}
/* Table Deatiles */
.table-section.detailes .col-fix{
    margin:0;
    padding:0;
}
.table-section.style1.detailes .table1{
    overflow:visible;
}
.table-section.style1.detailes .table1 .ribbon {
    position: absolute;
    right: -5px;
    top: 24px;
    z-index: 1;
    overflow: hidden;
    width: 90px;
    height: 90px;
    text-align: right;
}
.table-section.style1.detailes .features .table-head {
    padding: 50px 15px;
}
.table-section.style1.detailes .features .title{
    color:#444;
}
.table-section.style1.detailes .table-head{
    height:120px
}
.table-section.style1.detailes .table-head .text{
    color:#555;
    margin-top:5px;
}

/* Table Color */
.table1.color1 .table-list i,
.table1.color1 .table-bottom .text i,
.table1.features .table-list li i{
    color:#336E7B
}
.table1.color2 .table-list i,
.table1.color2 .table-bottom .text i{
    color:#16a085
}
.table1.color3 .table-list i,
.table1.color3 .table-bottom .text i{
    color:#82B440;
}
.table1.color4 .table-list i,
.table1.color4 .table-bottom .text i{
    color:#E74C3C;
}
.table1.color1 .table-head,.table1.color1 .button{
    background: #336E7B;
}
.table1.color2 .table-head,.table1.color2 .button{
    background: #16a085;
}
.table1.color3 .table-head,.table1.color3 .button{
    background: #82B440;
}
.table1.color4 .table-head,.table1.color4 .button{
    background: #E74C3C;
}
/* Responsive */

@media only screen and (max-width: 767px){
    .table-section.style1.no-grid .ribbon,
    .table-section.style1.detailes .table1 .ribbon {
        right: 7px;
    }
}
/*=======================
  End Table Style 1
=========================*/

/*=======================
  Table Style 2
=========================*/
.table-section.style2{
    background:#f5f5f5;
}
.table2 {
    overflow: hidden;
    background: #fff;
    padding: 20px;
   /* border-radius: 5px;*/
    text-align: center;
    /*border-radius: 10px;*/
    position: relative;
}
.table2 .bg-icon i {
    position: absolute;
    right: 20px;
    bottom: 139px;
    font-size: 70px;
    opacity: 0.2;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    color: #fff;
}
.table2:hover .bg-icon i{
    right:100%;
}

/* Table Head */
.table2 .table-head {
    position: relative;
}
.table2 .title {
    color: #fff;
    font-size: 25px;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 15px;
}
.table2 .table-head .amount {
    color: #fff;
    margin: 0;
    font-size: 20px;
}
.table2 .price span {
    font-size: 45px;
    font-weight: 700;
    margin: 0 5px;
}

/* Table List */
.table2 .table-list {
    padding: 0px;
    text-align: left;
}
.table2 .table-list li {
    color: #fff;
    position: relative;
    text-transform: capitalize;
    padding: 12px 0;
}
.table2 .table-list li.cross{
    opacity:0.5;
    text-decoration:line-through;
}
.table2 .table-list i {
    font-size: 15px;
    width: 16px;
    height: 16px;
    text-align: center;
    border-radius: 10px;
    line-height: 16px;
}
/* Table Bottom */
.table2 .table-bottom {
    text-align: center;
    margin-top: 15px;
}
.table2 .button {
    z-index: 1;
    position: relative;
    text-transform: uppercase;
    background: #fff;
    border-radius: 30px;
    font-size: 13px;
    border:1px solid transparent;
}
.table2.color1 .button:hover,
.table2.color2 .button:hover,
.table2.color3 .button:hover,
.table2.color4 .button:hover{
    background:transparent;
    border-color:#fff;
    color:#fff;
}
.table2.color1{
    background:#336E7B;
}
.table2.color2{
    background:#16A085;
}
.table2.color3{
    background:#82B440;
}
.table2.color4{
    background:#E74C3C;
}
/* Table No Grid */
.table-section.style2.no-grid .col-fix{
    padding:0;
}
.table-section.style2.no-grid .table-default{
    border-radius:0px;
}

/* Table Detailes */
.table-section.style2.detailes .col-fix{
    padding:0;
}
.table-section.style2.detailes .table2{
    border-radius:0px;
}
.table-section.style2.detailes .features {
    margin-top: 134px;
}
.table-section.style2.detailes .features  li:last-child{
    margin:0;
}
/* Table Color */

.table2.color1 .button{
    color: #336E7B;
}
.table2.color2 .button{
    color: #16A085;
}
.table2.color3 .button{
    color: #82B440;
}
.table2.color4 .button{
    color: #E74C3C;
}
/*=======================
  End Table Style 2
=========================*/

/*=======================
  Table Style 3
=========================*/
.table3 {
    overflow: hidden;
    border-radius: 5px;
    text-align: center;
    border-radius: 10px;
    background:#fff;
    position: relative;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33);
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    transition:all 0.4s ease;
}
.table3.active{
    z-index:44;
    background:#444;
}
.table3.active .table-list li{
    color:#fff;
}
.table3.active  .amount{
    color:#fff;
}
.table3.active.color1  .button:hover,
.table3.active.color2  .button:hover,
.table3.active.color3  .button:hover,
.table3.active.color4  .button:hover{
    background:#fff;
    color:#444;
}
/* Table Head */
.table3 .table-head {
    position: relative;
    background: #252525;
    padding: 10px 0;
}
.table3 .table-head .price {
    width: 110px;
    height: 110px;
    line-height: 110px;
    border: 1px solid #ddd;
    margin: 0 auto;
    border-radius: 100%;
    margin-bottom: 15px;
}
.table3 .table-head .price .amount{
    color:#fff;
}
.table3 .title {
    color: #fff;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 15px;
}
.table3 .amount {
    font-family: 'Droid Sans', sans-serif;
    font-weight: 700;
    font-size: 45px;
    color: #444;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    margin: 0;
}
.table3 .price span {
    margin-right:5px;
}
.table3 .icon i {
    font-size: 80px;
    margin-bottom: 15px;
    color:#fff;
    -webkit-transition:all 2s ease;
    -moz-transition:all 2s ease;
    transition:all 2s ease;
}
.table3:hover .icon i{
    left:100%;
}
/* Table List */
.table3 .table-list {
    text-align: left;
    padding: 15px;
}
.table3 .table-list li {
    position: relative;
    text-transform: capitalize;
    padding:12px 0;
    color: #444;
}
.table3 .table-list li.cross{
    opacity:0.5;
}
.table3 .table-list i {
    font-size: 15px;
    text-align: center;
    border-radius: 10px;
    float: right;
}
/* Table Bottom */
.table3 .table-bottom {
    text-align: center;
    background:#336E7B;
    padding:20px;
}
.table3 .button {
    color: #fff;
    text-transform: uppercase;
    border-radius: 30px;
    background:transparent;
    border:1px solid #fff;
    font-size: 13px;
}
.table3 .button:hover{
    border-color:transparent;
}
.table3 .button i{
    margin-right:5px;
}
.table3 .table-bottom .text{
    color:#fff;
    margin: 5px 0 0;
    text-transform:capitalize;
}
/* Table No Grid*/
.table-section.style3.no-grid{}
.table-section.style3.no-grid .col-fix{
    padding:0;
}
.table-section.style3.no-grid .table3{
    border-radius:0px;
}
/* Table Detailes */
.table-section.style3.detailes .table-bottom{
    height:84px;
}
.table-section.style3.detailes .col-fix{
    padding:0;
}
.table-section.style3.detailes .table3{
    border-radius:0px;
}
.table-section.style3.detailes .features {
    margin-top: 188px;
    border-top-color: #444;
}
/* Table Color */
.table3.color1 .table-head,
.table3.color1 .table-bottom{
    background:#336E7B;
}
.table3.color2 .table-head,
.table3.color2 .table-bottom{
    background:#16A085;
}
.table3.color3 .table-head,
.table3.color3 .table-bottom{
    background:#82B440;
}
.table3.color4 .table-head,
.table3.color4 .table-bottom{
    background:#E74C3C;
}
.table3.color1 .amount{
    color:#336E7B;
}
.table3.color2 .amount{
    color:#16A085;
}
.table3.color3 .amount{
    color:#82B440;
}
.table3.color4 .amount{
    color:#E74C3C;
}
/*=======================
  End Table Style 3
=========================*/

/*=======================
  Table Style 4
=========================*/
.table-section.style4{
    background:#f5f5f5;
}
.table4 {
    text-align: center;
    position: relative;
    overflow:hidden;
    background: #fff;
    padding: 20px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.table4:hover{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    transform:scale(1.1);
}
.table4.active::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    border-top: 26px solid;
    border-left: 30px solid transparent;
    background: #F5F5F5;
}
/* Table Head */
.table4 .table-head {
    position: relative;
}
.table4 .title {
    color: #fff;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 15px;
}
.table4 .table-head{}
.table4 .table-head i{
    width:110px;
    height:110px;
    border:1px solid #ddd;
    line-height:110px;
    color:#fff;
    border-radius:100%;
    font-size:50px;
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    transition:all 0.4s ease;
}
.table4 .table-head:hover i{
    transform:rotate(360deg);
}
.table4 .table-head .text {
    margin-bottom:5px;
    color: #fff;
}
.table4 .price{
    margin:15px 0;
}
.table4 .table-head .amount span {
    font-size: 30px;
    font-weight: 700;
}
.table4 .price .amount {
    font-size: 20px;
    color: #fff;
    margin: 0;
    font-weight:400;
}
.table4 .price .amount span {
    font-size: 40px;
    font-weight: 700;
}
/* Table Text */
.table4 .table-text .text {
    color: #eee;
    margin: 0;
}
/* Table Bottom */
.table4 .table-bottom {
    text-align: center;
    padding:15px;
}
.table4 .button {
    z-index: 1;
    position: relative;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    padding: 0;
}
.table4 .button:hover{
    opacity:0.5;
}
.table4 .button i{
    margin-left:5px;
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    transition:all 0.4s ease;
}
.table4:hover .button i{
    margin-left:10px;
}
.table4 .table-bottom .text{
    color:#fff;
    margin: 5px 0 0;
    text-transform:capitalize;
}

/* Table Wthout Grid */
.table-section.style4.no-grid{}
.table-section.style4.no-grid .table4{
    transform:none;
}
.table-section.style4.no-grid .col-fix{
    padding:0;
}

/* Table Color */
.table4.color1,.table4.color1 .button{
    background: #336E7B;
}
.table4.color2,.table4.color2 .button{
    background: #16A085;
}
.table4.color3,.table4.color3 .button{
    background: #82B440;
}
.table4.color4,.table4.color4 .button{
    background: #E74C3C;
}
/*=======================
  End Table Style 4
=========================*/

/*=======================
  Table Style 5
=========================*/
.table-section.style5{
    background:#f1f1f1;
    background-size:cover;
    background-position:center;
}
.table5 {
    position: relative;
    text-align: center;
    background: transparent;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    padding: 20px 0 0;
    -webkit-box-shadow: 0px 1px 10px #fff;
    -moz-box-shadow: 0px 1px 10px #fff;
    box-shadow: 0px 1px 10px #fff;
}
/* Table Head */
.table5 .table-head {
    position: relative;
}
.table5 .table-head .icon{
    margin-bottom:10px;
}
.table5 .table-head .icon i {
    color:#fff;
    font-size: 70px;
}
.table5 .table-head .title {
    color: #fff;
    font-size: 30px;
    margin-bottom: 10px;
}
.table5 .price .amount {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    margin: 0;
    font-size: 15px;
}
.table5 .price .amount span {
    font-size: 45px;
    color: #fff;
    margin: 0 5px;
    font-weight: 700;
}
.table5 .price {
    margin-bottom: 10px;
}
/* Table List */
.table5 .table-list li {
    position: relative;
    text-transform: capitalize;
    color: #fff;
    padding-bottom: 20px;
}
.table5 .table-list i {
    width: 18px;
    height: 18px;
    text-align: center;
    border-radius: 100%;
    line-height: 18px;
    margin-right: 5px;
    border: 1px solid #1CB99E;
    color: #1CB99E;
    font-size: 13px;
}
/* Table Bottom */
.table5 .table-bottom {
    text-align: center;
    margin-top: -22px;
}
.table5 .button {
    z-index: 1;
    border-radius: 5px;
    position: relative;
    display: block;
    display: inline-block;
    border-radius: 0px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 5px;
    border-radius: 30px;
    font-size: 13px;
    position: relative;
    bottom: -22px;
    border: 1px solid transparent;
}
.table5 .button:hover{
    box-shadow:0px 1px 6px rgba(0, 0, 0, 0.40);
}

/* Table Detailes */
.table5.color1 .button:hover,
.table5.color2 .button:hover,
.table5.color3 .button:hover,
.table5.color4 .button:hover{
    color:#333;
    background:#fff;
}
.table5 .table-bottom .text{
    color:#fff;
    margin: 5px 0 0;
    text-transform:capitalize;
}

/*Table Color */
.table5.color1{
    background:#336E7B;
}
.table5.color2{
    background:#16A085;
}
.table5.color3{
    background:#82B440;
}
.table5.color4{
    background:#E74C3C;
}
.table5.color1 .button{
    background:#336E7B;
}
.table5.color2 .button{
    background:#16A085;
}
.table5.color3 .button{
    background:#82B440;
}
.table5.color4 .button{
    background:#E74C3C;
}
/*=======================
  End Table Style 5
=========================*/

/*=======================
  Table Style 6
=========================*/
.table6{
    text-align: center;
    position: relative;
    background:#fff;
    -webkit-transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    transition:all 0.4s ease;
    -webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.33);
    -moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.33);
    box-shadow:1px 1px 5px rgba(0, 0, 0, 0.33)
}
/* Table Head */
.table6 .table-head {
    position: relative;
    padding: 20px;
}
.table6 .title {
    color: #fff;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
}
.table6 .price{
    margin-bottom:10px;
}
.table6 .price .amount {
    font-size: 25px;
    position: relative;
    display: inline-block;
    color: #fff;
    margin: 0;
}
.table6 .price .amount span {
    font-size: 46px;
    color: #fff;
    font-weight: 700;
}
.table6 .price .amount .currency {
    font-size: 25px;
    position: absolute;
    top: 0;
    left: -15px;
}
.table6 .table-head .button {
    background: #fff;
    color: #444;
    padding: 10px 30px;
    border-radius: 0px;
    display: block;
    text-transform: capitalize;
    font-size: 15px;
    border-radius: 5px;
    box-shadow: 1px 1px 9px rgba(78, 75, 75, 0.37);
    display: inline-block;
}
.table6 .table-head .button:hover{
    color:#fff;
    background:transparent;
}
.table6 .table-list {
    border-bottom: 1px solid #ddd;
    text-align: left;
    padding: 20px;
}
.table6 .table-list li{
    padding:10px 0;
    color:#555;
}
.table6 .table-list li.cross{
    opacity:0.5;
    text-decoration:line-through;
}
.table6 .table-list li i{
    float:right;
}

/* Table Bottom */
.table6 .table-bottom .text {
    padding: 15px;
    margin: 0;
    color: #fff;
}
.table6 .table-bottom .text i{
    margin-right:5px;
}
/* Table Detailes */
.table-section.style6.detailes .features {
    margin-top: 228px;
}
.table-section.style6.detailes .table6{
    border-radius:0px;
}
.table-section.style6.detailes .col-fix {
    padding:0;
}
.table6.features .table-list li i {
    float: none;
    margin-right: 5px;
}
/* Table Color */
.table6.color1 .table-head .button:hover{
    background:#336E7B;
}
.table6.color1 .table-head,
.table6.color1 .table-bottom .text{
    background:#336E7B;
}

.table6.color2 .table-head .button:hover{
    background:#1CB99E;
}
.table6.color2 .table-head,
.table6.color2 .table-bottom .text{
    background:#1CB99E;
}

.table6.color3 .table-head .button:hover{
    background:#82B440;
}
.table6.color3 .table-head,
.table6.color3 .table-bottom .text{
    background:#82B440;
}

.table6.color4 .table-head .button:hover{
    background:#E74C3C;
}
.table6.color4 .table-head,
.table6.color4 .table-bottom .text{
    background:#E74C3C;
}
/*=======================
  End Table Style 6
=========================*/
/*=======================
  Table Style 7
=========================*/
.table-section.style7{
    background:#f5f5f5;
}
.table7{
    text-align: center;
    border-radius: 10px;
    position: relative;
    background:#fff;
    border: 1px solid #eee;
}
.table7 .ribbon {
    position: absolute;
    background: #DB0A5B;
    top: 25px;
    right: -9px;
    border-radius: 12px 0;
    z-index: 33;
}
.table7 .ribbon::after {
    position: absolute;
    right: 0;
    top: -4px;
    content: "";
    border-bottom: 4px solid #DB0A5B;
    border-right: 8px solid transparent;
    border-left: 1px solid #DB0A5B;
}
.table7 .ribbon p{
    color:#fff;
    margin:0;
    padding:5px 10px;
}
/* Table Head */
.table7 .table-head {
    position: relative;
    background-size: cover;
    z-index: 5;
    padding: 20px 0;
}
.table7 .table-head:before{
    position:absolute;
    left:0;
    top:0;
    content:"";
    background:#000;
    opacity:0.6;
    content:"";
    z-index:-5;
    width:100%;
    height:100%;
}
.table7 .price .amount {
    font-size: 25px;
    position: relative;
    display: inline-block;
    color: #fff;
    margin: 0;
}
.table7 .price .amount span {
    font-size: 50px;
    color: #fff;
    display: block;
    font-weight:700;
}
.table7 .price .amount .currency {
    font-size: 25px;
    position: absolute;
    top: 0;
    left: -15px;
    font-weight: 700;
}
.table7 .title {
    color: #fff;
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 700;
    display: inline-block;
    padding: 8px 25px;
    border-radius: 20px;
    margin: 12px 0 0;
}
.table7 .table-head .button {
    background: #fff;
    color: #444;
    padding: 10px 30px;
    border-radius: 0px;
    display: block;
    text-transform: capitalize;
    font-size: 15px;
    border-radius: 5px;
    box-shadow:1px 1px 9px rgba(78, 75, 75, 0.37);
}
.table7 .table-list {
    border-bottom: 1px solid #ddd;
    text-align: left;
}
.table7 .table-list li {
    padding: 12px 15px;
    color: #555;
}
.table7 .table-list li.cross{
    opacity:0.5;
    text-transform:line-through;
}
.table7 .table-list li i{
    margin-right:5px;
}

/* Table Bottom */
.table7 .table-bottom {
    background: #252525;
    padding: 10px 0;
}
.table7 .table-bottom .button{
    border-radius:5px;
    color:#fff;
    position:relative;
    overflow:hidden;
}
.table7 .table-bottom .button::before {
    position: absolute;
    background: #fff;
    content: "";
    bottom: 0;
    top: 0;
    content: "";
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    left: 0;
    right: -100%;
    transform: rotate(180deg);
}
.table7 .table-bottom .button:hover:before{
    left:0;
    right:100%;
    opacity:0.7;
    visibility:visible;
}
.table7 .table-bottom .text{
    padding:10px;
    color:#1CB99E;
}
.table7 .table-bottom .text i{
    margin-right:5px;
}

/* Table No Grid */
.table-section.style7.no-grid .col-fix{
    padding:0;
}
.table-section.style7.no-grid .table7 {
    border-radius: 0px;
    border: none;
    border: box;
    -webkit-box-shadow: 0px 1px 1px #000;
    -moz-box-shadow: 0px 1px 1px #000;
    box-shadow: 0px 1px 1px #000;
    overflow: hidden;
}

/* Table Color */
.table7.color1 .title,
.table7.color1 .table-bottom .button{
    background: #336E7B;
}
.table7.color2 .title,
.table7.color2 .table-bottom .button {
    background: #16A085;
}
.table7.color3 .title,
.table7.color3 .table-bottom .button {
    background: #82B440;
}
.table7.color4 .title,
.table7.color4 .table-bottom .button {
    background: #E74C3C;
}
/*=======================
  End Table Style 7
=========================*/

/*=======================
  Table Style 8
=========================*/
.table-section.style8{
    background:#f5f5f5;
}
.table8{
    border-radius: 5px;
    text-align: center;
    border-radius: 10px;
    position: relative;
    background:#fff;
    -webkit-box-shadow:0px 1px 4px rgba(0, 0, 0, 0.30);
    -moz-box-shadow:0px 1px 4px rgba(0, 0, 0, 0.30);
    box-shadow:0px 1px 4px rgba(0, 0, 0, 0.30);
}
.table8 .icon-bg i {
    position: absolute;
    left: 0;
    top: 45%;
    font-size: 70px;
    opacity: 0.1;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.table8:hover .icon-bg i{
    opacity:1;
}
/* Table Head */
.table8 .table-head {
    position: relative;
    padding: 15px 0;
}
.table8 .price .amount {
    font-size: 20px;
    position: relative;
    display: inline-block;
    color: #555;
}
.table8 .price .amount span {
    font-size: 50px;
    color: #444;
    font-weight: 700;
    margin-right: 5px;
}
.table8 .title {
    color: #fff;
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 700;
    display: block;
    padding: 10px;
    position: relative;
}
.table8.active .title::before {
    position: absolute;
    left: 0px;
    top: 0;
    content: "";
    border-bottom: 21px solid transparent;
    border-left: 21px solid #fff;
    border-top: 21px solid transparent;
}
.table8.active .title::after {
    position: absolute;
    right: 0px;
    top: 0px;
    content: "";
    border-bottom: 21px solid transparent;
    border-right: 21px solid #fff;
    border-top: 21px solid transparent;
}
.table8 .table-head .button {
    background: #fff;
    color: #444;
    padding: 10px 30px;
    border-radius: 0px;
    display: block;
    text-transform: capitalize;
    font-size: 15px;
    border-radius: 5px;
    box-shadow:1px 1px 9px rgba(78, 75, 75, 0.37);
}
.table8 .table-list li {
    padding: 15px;
    color: #555;
}
.table8 .table-list li.cross{
    opacity:0.5;
    text-transform:line-through;
}
.table8 .table-list li i{
    margin-right:5px;
}

/* Table Bottom */
.table8 .table-bottom {
    padding:0 0 15px;
}
.table8 .table-bottom .button{
    border-radius:5px;
    color:#fff;
    position:relative;
    overflow:hidden;
}
.table8 .table-bottom .button::before {
    position: absolute;
    background: #fff;
    content: "";
    bottom: 0;
    top: 0;
    content: "";
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    left: 0;
    right: -100%;
    transform: rotate(180deg);
}
.table8 .table-bottom .button:hover:before{
    left:0;
    right:100%;
    opacity:0.7;
    visibility:visible;
}
.table8 .table-bottom .text{
    padding:10px;
    color:#1CB99E;
}
.table8 .table-bottom .text i{
    margin-right:5px;
}

/* Table No Grid */
.table-section.style8.no-grid .table8{
    border-radius:0px;
}
/* Table Color */
.table8.color1 .title,
.table8.color1 .table-bottom .button{
    background: #336E7B;
}
.table8.color2 .title,
.table8.color2 .table-bottom .button {
    background: #16A085;
}
.table8.color3 .title,
.table8.color3 .table-bottom .button {
    background: #82B440;
}
.table8.color4 .title,
.table8.color4 .table-bottom .button {
    background: #E74C3C;
}
.table8.color1:hover .icon-bg i{
    color:#336E7B;
}
.table8.color2:hover .icon-bg i{
    color:#16A085;
}
.table8.color3:hover .icon-bg i{
    color:#82B440;
}
.table8.color4:hover .icon-bg i{
    color:#E74C3C;
}
/*=======================
  End Table Style 8
=========================*/