@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);

/* PRICING TABLE
================================*/
.pricing-table{
	width: 90%;
	padding: 0;
	list-style: none;
	float: left;
	position: relative;
	background: #fff;
	position: relative;
	-o-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-webkit-transition: all .3s linear;
	transition: all .3s linear;
}
.pricing-table li{
	width: 100%;
	float: left;
	color: #999;
	font-family: 'Lato', Calibri, Arial, sans-serif;
	text-align: center;
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box;
}

/* PLAN
================================*/
.pricing-table .plan{
	padding: 12px 0 0;
	height: 150px;
	color: #f0f0f0;
	font-size: 18px;
	font-weight: 400;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	background: #770c15;
}
.pricing-table .plan.special{
    background: #c10b17 !important;
    position:relative;
}
.flag{
    position:absolute;
    top:0;
}
.element {   
  font-size:14px;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
}

.horiz-flag { 
  font-weight:bold;
  width :125px;
  background-image: -moz-linear-gradient(#ff7800, #ff7800);
  background-image: -webkit-linear-gradient(#ff7800, #ff7800);
  background-image: linear-gradient(#ff7800, #ff7800);
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  height: 39px;
  line-height: 40px;
  position: absolute;
  padding-right: 31px;
  left: -2px;
  padding-left: 1px;
  top: 1px;
  color: #fff;
}
.horiz-flag:before {
  content: '';
  display: block;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 20px;
  border-color: transparent;
  border-right-color: #C10B17;
  position: absolute;
  right: -1px;
  top: 0;
}
/* PRICE
================================*/
.pricing-table .table-price{
	padding: 5px 26px 10px;
	font-size: 40px;
	font-weight: 300;
	color: #f0f0f0;
	background: #444;
}
.pricing-table .table-price .month{
	font-size: 10px;	
}
.pricing-table .table-price .dollar{
	font-size: 14px;
}

/* DETAILS
================================*/
.pricing-table .detail{
	padding: 19px 26px;
	font-size: 16px;
	font-weight: 600;
	position: relative;
	border-top: solid 1px #f0f0f0;
    color:#757373;
}
.pricing-table .detail strong{
	font-weight: 700;
}
.pricing-table .detail i.success{
    color:#6ad60b;
    float:right;
    font-weight:bold;
    vertical-align:sub;
    font-size:20px;
    margin-right:20px;
}
.pricing-table .detail i.not-success{
    color:#a80202;
    float:right;
    font-weight:bold;
    vertical-align:sub;
    font-size:20px;
    margin-right:20px;
}

/* SIGN UP BUTTON
================================*/
.pricing-table .sign-up{
	font-size: 16px;
	text-decoration: none;
}
.pricing-table .sign-up a{
    position:relative;
	width: 100%;
	padding: 20px 0;
	display: inline-block;
	font-size: 18px;
	font-weight: 800;
	text-decoration: none;
	text-transform: uppercase;
	color: #f1f2f4;
	background: #9e0b0f;
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box;
}
.pricing-table .sign-up a:hover{
   background:#990000;
}
/* HOVER EFFECT
================================*/
.pricing-table:hover,
.pricing-table.active{
	-ms-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	z-index: 10;
	box-shadow: 0 1px 10px #333;
}


/* STYLES
================================*/
/* blue */
.blue .plan{ border-bottom-color: #00B4CC; }
.blue .sign-up a{ background: #00B4CC; color: #fff; }
/* green */
.green .plan{ border-bottom-color: #37bc9b; }
.green .sign-up a{ background: #37bc9b; color: #fff; }
/* red */
.red .plan{ border-bottom-color: #F03C02; }
.red .sign-up a{ background: #F03C02; color: #fff; }
/* orange */
.orange .plan{ border-bottom-color: #ff9900; }
.orange .sign-up a{ background: #ff9900; color: #fff; }
/* yellow */
.yellow .plan{ border-bottom-color: #f1c40f; }
.yellow .sign-up a{ background: #f1c40f; color: #fff; }
/* purple */
.purple .plan{ border-bottom-color: #967adc; }
.purple .sign-up a{ background: #967adc; color: #fff; }
/* black */
.black .plan{ border-bottom-color: #222; }
.black .sign-up a{ background: #222; color: #fff; }
/* pink */
.pink .plan{ border-bottom-color: #FC75DD; }
.pink  .sign-up a{ background: #FC75DD; color: #fff; }


/* RESPONSIVE DESIGN
================================*/
@media (max-width: 768px) {
	.pricing-table{
		width: 50%;
	}
}
@media (max-width: 480px) {
	.pricing-table{
		width: 100%;
		margin: 0 0 10px;
	}
}