/* ==============================================
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: 10px;
}
.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:30px;
}
.table6 .price .amount {
	font-size: 12px;
	position: relative;
	display: inline-block;
	color: #fff;
	margin: 0;
}
.table6 .price .amount span {
	font-size: 20px;
	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;
	font-size: 12px;
}
.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-color: #F00;
}

.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
=========================*/

@import "compass/css3";

html {font-size:16px;}

body { font-family: 'Droid Sans', sans-serif; font-weight:bold; margin:0; text-align:center; background-color:#fff; }

h1 { line-height:100px; margin:0; }

.hero-bg {
  background:#222;
  height:100%;
  max-height:500px;
  width:100%;
  clear:both;
  margin-bottom:5px;
  
  background:url(file:///C|/Users/Danny/Documents/Websites/belisha-comparison/codecanyon-20094237-x-price-responsive-pricing-tables/Main%20File/images/belisha-comparison.jpg) no-repeat center center;
  background-size:cover;
  
  @media (min-width:641px) and (max-width:1024px) {
    background:url (file:///C|/Users/Danny/Documents/Websites/belisha-comparison/codecanyon-20094237-x-price-responsive-pricing-tables/Main%20File/images/belisha-comparison.jpg) no-repeat center center;
    background-size:cover;
  }
  
  @media (min-width:1025px) and (max-width:1500px) { background:url (file:///C|/Users/Danny/Documents/Websites/belisha-comparison/codecanyon-20094237-x-price-responsive-pricing-tables/Main%20File/images/belisha-comparison.jpg) no-repeat center center;
    background-size:cover;
  }
  
  @media (min-width:1501px){
    background:url(file:///C|/Users/Danny/Documents/Websites/belisha-comparison/codecanyon-20094237-x-price-responsive-pricing-tables/Main%20File/images/belisha-comparison.jpg) no-repeat center center;
    background-size:cover;
  }
  
  
}

.hero-content {
	position: relative;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-box-orient: vertical;
	box-orient: vertical;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-box-pack: center;
	box-pack: center;
	height: 500px;
	overflow:auto;
	left:-200px;
	padding-top: 100px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.hero-content-img {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-box-pack: center;
  box-pack: center;
  height: 500px;
  overflow:auto;
  left:-100px;
}

h1 {
  color:#fff;
  font-family: 'Droid Sans', sans-serif; font-weight:bold;
  font-size:6em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  margin:0 0 20px;
}

a.btn {
  text-decoration:none;
  color:#005c9e;
  font-size:1.2em;
  border:1px solid #fff;
  padding:10px 20px;
  background:rgba(255,255,255,0.9);
  border-radius:5px;
}