<div class="prising_table">
    <div class="column_red active">
        <ul>
            <li class="title-row"><span></span>Basic</li>
            <li class="pricing-row">
                <span class="triggle"></span>
                <span class="h1">From</span>
                <span class="pt-price">$199</span>
            </li>
            <li class="normal-row">12 months premium support access</li>
            <li class="normal-row">12 months  updates access</li>
            <li class="normal-row">Unlimitted concurrent domain users</li>
            <li class="normal-row">Free WordPress and  theme setup </li>
            <li class="footer-row">
                  <a class="pt-btn" target="_self"
                       href="http://ordasoft.com/os-simple-membership-joomla-membership-extension">
                   Add to Cart
                  </a>
            </li>
        </ul>
    </div>
    <div class="column_red">
        <ul>
            <li class="title-row"><span></span>Standard</li>
            <li class="pricing-row">
                <span class="triggle"></span>
                <span class="h1">From</span>
                <span class="pt-price">$299</span>
            </li>
            <li class="normal-row">12 months premium support access</li>
            <li class="normal-row">12 months  updates access</li>
            <li class="normal-row">Unlimitted concurrent domain users</li>
            <li class="normal-row">Free WordPress and  theme setup</li>
            <li class="footer-row">
                <a class="pt-btn" target="_self" href="http://ordasoft.com/os-simple-membership-joomla-membership-extension">Add to Cart</a>
            </li>
        </ul>
    </div>
    <div class="column_red active">
        <ul>
            <li class="title-row"><span></span>Utimate</li>
            <li class="pricing-row">
                <span class="triggle"></span>
                <span class="h1">From</span>
                <span class="pt-price">$399</span>
            </li>
            <li class="normal-row">12 months premium support access</li>
            <li class="normal-row">12 months  updates access</li>
            <li class="normal-row">Unlimitted concurrent domain users</li>
            <li class="normal-row">Free WordPress and  theme setup </li>
            <li class="footer-row">
                <a class="pt-btn" target="_self" href="http://ordasoft.com/os-simple-membership-joomla-membership-extension">Add to Cart</a>
            </li>
        </ul>
    </div>
</div>


<style type="text/css">
a, a:hover {
  text-decoration: none;
}
.prising_table {
	text-align: center;
  margin-top: 30px;
}
.column_red:hover {
  box-shadow: 0 0 10px #FF2121;
  top: -15px;
}
.column_red {
  text-align: center;
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  width: 250px;
  display: inline-block;
  margin:0 15px 15px 0;
}
.column_red ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.column_red .title-row {
  background: #FF2121;
  color: white;
  font-family: 'Oswald', sans serif;
  line-height: 24px;
  background: white;
  color: #FF2121;
  border: none;
  padding: 45px 20px 15px;
  font-size: 28px;
  text-shadow: 1px 1px 0px #FF2121:;
  font-weight: 600;
}
.column_red.active .title-row span {
  background: #CCC;
}
.column_red ul li.title-row span {
  width: 100%;
  height: 30px;
  background: #FF2121;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.column_red.active .pricing-row {
  background: #CCC;
  border-bottom: 1px solid #E8E8E8;
}
.column_red ul li.pricing-row {
  background: #FF2121;
  font-size: 24px;
  border: none;
  padding: 25px 35px 50px;
  position: relative;
}
.column_red ul li.pricing-row span.triggle {
  content: '';
  position: absolute;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 20px solid white;
  top: 0;
  left: 50%;
  margin-left: -25px;
  bottom: -1px;
}
.column_red.active .pricing-row span {
  color: #FF2121;
}
.column_red ul li.pricing-row span.h1, .column_red ul li.pricing-row span.widget-title.style2 {
  font-weight: 400;
  text-transform: capitalize;
}
h1, .h1, .widget-title.style2 {
  font-size: 24px;
  line-height: 32px;
}
.column_red ul li.pricing-row span.pt-price {
  font-size: 55px;
  line-height: 55px;
  margin-top: 20px;
  display: block;
  font-weight: 700;
}
.column_red ul li {
  padding: 15px 40px;
  border: 1px solid #E8E8E8;
  border-top: none;
  color: #000;
  font-size: 16px;
}
.column_red ul li.footer-row {
  padding: 20px 0;
  line-height: 13px;
}
.column_red ul li.normal-row {
  font-family: 'Quicksand' sans-serif;
  font-size: 14px;
  font-weight: 400;
}
.column_red ul li.footer-row .pt-btn {
  background: #FF2121;
  color: white;
  line-height: 40px;
  padding: 10px 25px;
  border: 1px solid #FF2121;
  text-shadow: 0 1px 0 #fff;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
.column_red ul li.footer-row .pt-btn:hover {
  background: white;
  color: #FF2121;
  text-shadow: 0 1px 0 #FF2121;
  border: 2px solid #FF2121;
}
</style> 
