<h2 class="text-center"><a href="http://www.nextbootstrap.com/" target="_blank">Next Bootstrap</a> for free bootstrap themes and code snippets</h2>
  <!-- Pricing # -->
  		<div class="pricing">
  			<div class="container">
  				<div class="pricing-table table-responsive">
  					<table class="table">
  						<!-- Heading -->
  						<thead>
  							<tr>
  								<th>&nbsp;</th>
  								<th>
  									Free
  									<span class="ptable-star red">
  										<i class="fa fa-star"></i>
  										<i class="fa fa-star"></i>
  										<i class="fa fa-star"></i>
  										<i class="fa fa-star-half-o"></i>
  										<i class="fa fa-star-o"></i>
  									</span>
  									<span class="ptable-price">$0.0</span>
  								</th>
  								<th class="highlight">
  									Basic
  									<span class="ptable-star green">
  										<i class="fa fa-star"></i>
  										<i class="fa fa-star"></i>
  										<i class="fa fa-star"></i>
  										<i class="fa fa-star"></i>
  										<i class="fa fa-star-o"></i>
  									</span>
  									<span class="ptable-price">$99.0</span>
  								</th>
  								<th>
  									Business
  									<span class="ptable-star lblue">
  										<i class="fa fa-star"></i>
  										<i class="fa fa-star"></i>
  										<i class="fa fa-star"></i>
  										<i class="fa fa-star"></i>
  										<i class="fa fa-star"></i>
  									</span>
  									<span class="ptable-price">$149.0</span>
  								</th>
  							</tr>
  						</thead>
  						<tbody>
  							<tr>
  								<td><span class="ptable-title"><i class="fa fa-hdd-o"></i> Storage</span></td>
  								<td>
  									<!-- Icon -->
  									<i class="fa fa-hdd-o red"></i>
  									500 MB
  								</td>
  								<td>
  									<!-- Icon -->
  									<i class="fa fa-hdd-o green"></i>
  									100 GB
  								</td>
  								<td>
  									<!-- Icon -->
  									<i class="fa fa-hdd-o lblue"></i>
  									500 GB
  								</td>
  							</tr>
  							<tr>
  								<td><span class="ptable-title"><i class="fa fa-signal"></i> Band Width</span></td>
  								<td>
  									<i class="fa fa-signal red"></i>
  									100 TB
  								</td>
  								<td>
  									<i class="fa fa-signal green"></i>
  									500 TB
  								</td>
  								<td>
  									<i class="fa fa-signal lblue"></i>
  									1000 TB
  								</td>
  							</tr>
  							<tr>
  								<td><span class="ptable-title"><i class="fa fa-shield"></i> Security</span></td>
  								<td>
  									<i class="fa fa-shield red"></i>
  									100% Secure
  								</td>
  								<td>
  									<i class="fa fa-shield green"></i>
  									100% Secure
  								</td>
  								<td>
  									<i class="fa fa-shield lblue"></i>
  									100% Secure
  								</td>
  							</tr>
  							<tr>
  								<td><span class="ptable-title"><i class="fa fa-headphones"></i> Support</span></td>
  								<td>
  									<i class="fa fa-times red"></i>
  									No Support
  								</td>
  								<td>
  									<i class="fa fa-phone green"></i>
  									Phone
  								</td>
  								<td>
  									<i class="fa fa-envelope-o lblue"></i>
  									E-mail / Phone
  								</td>
  							</tr>
  							<!-- Buttons -->
  							<tr>
  								<td>&nbsp;</td>
  								<td class="bg-red"><a class="btn" href="#">Sign Up</a></td>
  								<td class="bg-green"><a class="btn" href="#">Sign Up</a></td>
  								<td class="bg-lblue"><a class="btn" href="#">Sign Up</a></td>
  							</tr>
  						</tbody>
  					</table>
  				</div>
  			</div>
  		</div>

.pricing{
	margin:40px 0px;
}
.pricing .table{
	border-top:1px solid #ddd;
	background:#fff;
}
.pricing .table th,
.pricing .table {
	text-align: center;
}
.pricing .table th,
.pricing .table td {
	padding: 20px 10px;
	border:1px solid #ddd;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.pricing .table th {
	width: 25%;
	font-size: 30px;
	font-weight: 400;
	border-bottom: 0;
	background:#2F313A;
	color: #EBEDF3;
	text-transform: uppercase;
}
.pricing .table th.highlight{
	border-top: 4px solid #4caf50 !important;
}
.pricing .table tr:nth-child(odd){
	background: #f0f8ff;
}
.pricing .table td:first-child{
	padding-left: 20px;
	text-align: left;
	padding-top:35px;
	background: #5F97FB;
}
.pricing tr td .ptable-title {
	font-size: 22px;
	font-weight:400;
	color: #fff;
}
.pricing tr td .ptable-title i {
	width: 23px;
	line-height: 25px;
	text-align: right;
	margin-right: 5px;
}
.pricing .ptable-star {
	position: relative;
	display: block;
	text-align: center;
}
.pricing .ptable-star.red{
	color: #e91e63;
}
.pricing .ptable-star.green{
	color: #4caf50;
}
.pricing .ptable-star.lblue{
	color: #03a9f4;
}
.pricing .ptable-star i {
	width: 8px;
	font-size: 13px;
}
.pricing .ptable-price {
	display: block;
}
.pricing tr td {
	font-size: 16px;
	line-height:32px;
	text-transform:uppercase;
}
.pricing tr td.bg-red{
	background: #e91e63;
}
.pricing tr td.bg-green{
	background: #4caf50;
}
.pricing tr td.bg-lblue{
	background: #03a9f4;
}
.pricing tr td.bg-red a,
.pricing tr td.bg-green a,
.pricing tr td.bg-lblue a{
	color: #fff;
}
.pricing tr td i {
	display: block;
	margin-bottom: 12px;
	font-size: 30px;
}
.pricing tr td i.red{
	color: #e91e63;
}
.pricing tr td i.green{
	color: #4caf50;
}
.pricing tr td i.lblue{
	color: #03a9f4;
}
.pricing tr td:first-child i{
	display:inline;
	margin-bottom:0px;
	font-size:22px;
}