
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
@import "font-awesome.css";

.gst{
	font-size:12px;	
}
.pricing-table{
	width: 280px;
	padding: 0;
	margin: 5px;
	list-style: none;
	float: left;
	font-family: 'Open Sans', sans-serif;
	background: #fff;
	border-top: solid 1px #dedede;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 1px 2px #d9d9d9;

}
.pricing-table li{
	width: 100%;
	float: left;
	color: #000;
	text-align: center;
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box;
}
.pricing-table:hover{
	box-shadow: 0 1px 20px #999;
}

/* PLAN
================================*/
.pricing-table .plan{
	padding: 10px 26px 0;
	float: left;
	color: #999;
	font-size: 24px;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

/* PRICE
================================*/
.pricing-table .table-price{
	padding: 12px 26px 20px;
	float: left;
	font-size: 26px;
	color: #656d78;
	text-transform: uppercase;
}
.pricing-table .table-price .price{
	width: 120px;
	height: 120px;
	display: block;
	line-height: 114px;
	text-align: center;
	margin: auto;
	border: solid 5px #656d78;
	border-radius: 100px;
	overflow: hidden;

}
.pricing-table .dollar{
	font-size: 20px;
}
.pricing-table:hover .table-price .price{
	background: #656d78;
	color: #fff;
}
.pricing-table:hover .table-price .price{
	-webkit-animation: toRightFromLeft 0.5s forwards;
	-moz-animation: toRightFromLeft 0.5s forwards;
	animation: toRightFromLeft 0.5s forwards;
}


/* DETAILS
================================*/
.pricing-table .detail{
	padding: 8px 26px;
	float: left;
	font-size: 14px;
	border-top: solid 1px #dedede;
	position: relative;
	background: #f7f7f7;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMGYwZjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #f7f7f7 0%, #f0f0f0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#f0f0f0));
	background: -webkit-linear-gradient(top,  #f7f7f7 0%,#f0f0f0 100%);
	background: -o-linear-gradient(top,  #f7f7f7 0%,#f0f0f0 100%);
	background: -ms-linear-gradient(top,  #f7f7f7 0%,#f0f0f0 100%);
	background: linear-gradient(to bottom,  #f7f7f7 0%,#f0f0f0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f0f0f0',GradientType=0 );
}

/* SIGN UP BUTTON
================================*/
.pricing-table .sign-up{
	padding: 12px 26px;
	float: left;
	font-size: 16px;
	text-decoration: none;
	border-top: solid 1px #dedede;
}
.pricing-table .sign-up a{
	width: 60%;
	margin: 0 auto;
	padding: 10px 10px;
	display: block;
	font-size: 14px;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: #656d78;
	border-radius: 100px;
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	-webkit-box-sizing:border-box;

}


	
/* STYLES
================================*/

/* blue */
.blue .table-price{ color: #3498db; }
.blue .table-price .price{ border-color: #3498db; }
.blue:hover .table-price .price, .blue .sign-up a{ background: #3498db; }

/* green */
.green .table-price{ color: #1abc9c; }
.green .table-price .price{ border-color: #1abc9c; }
.green:hover .table-price .price, .green .sign-up a{ background: #1abc9c; }

/* red */
.red .table-price{ color: #C44747; }
.red .table-price .price{ border-color: #C44747; }
.red:hover .table-price .price, .red .sign-up a{ background: #C44747; }

/* orange */
.orange .table-price{ color: #e67e22; }
.orange .table-price .price{ border-color: #e67e22; }
.orange:hover .table-price .price, .orange .sign-up a{ background: #e67e22; }

/* yellow */
.yellow .table-price{ color: #f1c40f; }
.yellow .table-price .price{ border-color: #f1c40f; }
.yellow:hover .table-price .price, .yellow .sign-up a{ background: #f1c40f; }

/* purple */
.purple .table-price{ color: #9b59b6; }
.purple .table-price .price{ border-color: #9b59b6; }
.purple:hover .table-price .price, .purple .sign-up a{ background: #9b59b6; }

/* black */
.black .table-price{ color: #333; }
.black .table-price .price{ border-color: #333; }
.black:hover .table-price .price, .black .sign-up a{ background: #333; }

/* RESPONSIVE DESIGN
================================*/
@media (max-width: 768px) {
	.pricing-table{
		width: 100%;
		margin: 5px 0;
	}
}












