/*
Item Name : Responsive Pricing Tables
Author URI : http://codecanyon.net/user/Pixelworkshop/
Version : 1.0
*/

/*

TABLE OF CONTENTS

01 TABLES STYLING
02 HEADERS
03 COLUMNS CONTENT
04 FOOTERS
05 COLORS
06 COLUMN HIGHLIGHT
07 MEDIA QUERIES

*/



/*
Page styling - Optionnal
*/

body {
	background: url('../img/bg.png');
}
.page_wrapper {
	position: relative;
	width: 85%;
	margin: 100px auto;
}
.page_wrapper2 {
	width: 65%;
}
.page_wrapper3 {
	width: 65%;
}
.page_wrapper4 {
	width: 75%;
}



/*  _______________________________________

	01 TABLES STYLING
    _______________________________________  */



.pricingtable {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:100%;
	color: #313131;
	text-shadow:1px 1px 1px #ffffff;
}
.pricingtable .column {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
	.pricingtable ul,
	.pricingtable ul li {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: center;
	}
.pricingtable .column {
	float: left;
	padding: 0;
	margin: 0;
	-webkit-box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4);
}
	.pricingtable .column_last {
		margin-right:0;
	}
.pricingtable_five .column {
	width: 20%;
}
.pricingtable_four .column {
	width: 25%;
}
.pricingtable_three .column {
	width: 33%;
}
.pricingtable_two .column {
	width: 50%;
}



/*  _______________________________________

	02 HEADERS
    _______________________________________  */



.pricingtable .header {
	padding: 24px 8% 12px 8%;
	*padding: 24px 8% 24px 8%;
	margin-bottom: 0;
	color: #eeeeee;
	text-shadow:1px 1px 1px #161616;
	-webkit-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.1);
}
	.pricingtable .header h3,
	.pricingtable .header h4 {
		color:#fff;
		margin: 0;
		padding: 0;
	}
	.pricingtable .header h3 {
		font-size: 36px;
		line-height: 42px;
		font-weight: 400;
	}
		.pricingtable .header h3 span {
			font-size: 11px;
		}
	.pricingtable .header h4 {
		font-size: 24px;
		line-height: 36px;
		font-weight: 400;
	}
	.pricingtable .header .subline {
		font-size: 14px;
		line-height: 18px;
		margin: 0;
	}
	.pricingtable .header .topheader {
		padding-bottom: 24px;
	}
	.pricingtable .header .bottomheader {
		padding-top: 18px;
	}



/*  _______________________________________

	03 COLUMNS CONTENT
    _______________________________________  */



.pricingtable .column {
	background: #dddddd;
}
.pricingtable .content {
}
.pricingtable .content .description {
	white-space:nowrap;
}
.pricingtable .content .description li {
	text-align: left;
	padding: 18px 8%;
	border-bottom: 1px solid #bbbbbb;
}
.pricingtable .content .description i {
	font-size: 18px;
	width: 30px;
	float: left;
}



/*  _______________________________________

	04 FOOTERS
    _______________________________________  */



.pricingtable .footer {
	padding: 24px 2% 12px 2%;
	margin: 12px 0 24px 0;
}

.pricingtable .pricing_button {
	transition:background 0.3s;
	border-radius:3px;
	display: inline;
	cursor: pointer;
	padding: 10px 32px 9px 32px;
	-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.5);
	-moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.5);
	box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.5);
}



.pricingtable .pricing_button a {
	text-decoration: none;
	font-size: 13px;
	color: #eeeeee;
	text-shadow:1px 1px 1px #161616;
}
	.pricingtable .pricing_button:hover {
	    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
	    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
	    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
	}



/*  _______________________________________

	05 COLORS
    _______________________________________  */



.column_blue .header,
.column_blue .pricing_button {
	background: #456366;
}
	.column_blue .pricing_button:hover {
		background: #374f52;
	}
	.column_blue .topheader {
		border-bottom: 1px solid #374f52; /* 1 or 2 tones lighter */
	}
	.column_blue .bottomheader {
		border-top: 1px solid #53777a; /* 2 tones darker than the BG */
	}
.column_brown .header,
.column_brown .pricing_button {
	background: #696758;
}
	.column_brown .pricing_button:hover {
		background: #575549;
	}
	.column_brown .topheader {
		border-bottom: 1px solid #575549;
	}
	.column_brown .bottomheader {
		border-top: 1px solid #727060;
	}
.column_deepblue .header,
.column_deepblue .pricing_button {
	background: #45484B;
}
	.column_deepblue .pricing_button:hover {
		background: #353739;
	}
	.column_deepblue .topheader {
		border-bottom: 1px solid #353739;
	}
	.column_deepblue .bottomheader {
		border-top: 1px solid #4d5054;
	}
.column_darkgrey .header,
.column_darkgrey .pricing_button {
	background: #36393B;
}
	.column_darkgrey .pricing_button:hover {
		background: #262829;
	}
	.column_darkgrey .topheader {
		border-bottom: 1px solid #262829;
	}
	.column_darkgrey .bottomheader {
		border-top: 1px solid #3e4244;
	}
.column_green .header,
.column_green .pricing_button {
	background: #496449;
}
	.column_green .pricing_button:hover {
		background: #3a513a;
	}
	.column_green .topheader {
		border-bottom: 1px solid #3a513a;
	}
	.column_green .bottomheader {
		border-top: 1px solid #506e50;
	}
.column_ocean .header,
.column_ocean .pricing_button {
	background: #3f4953;
}
	.column_ocean .pricing_button:hover {
		background: #303840;
	}
	.column_ocean .topheader {
		border-bottom: 1px solid #303840;
	}
	.column_ocean .bottomheader {
		border-top: 1px solid #4e5a66;
	}
.column_olive .header,
.column_olive .pricing_button {
	background: #504F48;
}
	.column_olive .pricing_button:hover {
		background: #3e3d38;
	}
	.column_olive .topheader {
		border-bottom: 1px solid #3e3d38;
	}
	.column_olive .bottomheader {
		border-top: 1px solid #595850;
	}
.column_orange .header,
.column_orange .pricing_button {
	background: #a64324;
}
	.column_orange .pricing_button:hover {
		background: #8a381e;
	}
	.column_orange .topheader {
		border-bottom: 1px solid #8a381e;
	}
	.column_orange .bottomheader {
		border-top: 1px solid #b44927;
	}
.column_pink .header,
.column_pink .pricing_button {
	background: #712941;
}
	.column_pink .pricing_button:hover {
		background: #582033;
	}
	.column_pink .topheader {
		border-bottom: 1px solid #582033;
	}
	.column_pink .bottomheader {
		border-top: 1px solid #7d2e49;
	}
.column_purple .header,
.column_purple .pricing_button {
	background: #493c45;
}
	.column_purple .pricing_button:hover {
		background: #362d33;
	}
	.column_purple .topheader {
		border-bottom: 1px solid #362d33;
	}
	.column_purple .bottomheader {
		border-top: 1px solid #52444e;
	}
.column_red .header,
.column_red .pricing_button {
	background: #742222;
}
	.column_red .pricing_button:hover {
		background: #5a1a1a;
	}
	.column_red .topheader {
		border-bottom: 1px solid #5a1a1a;
	}
	.column_red .bottomheader {
		border-top: 1px solid #812626;
	}
.column_yellow .header,
.column_yellow .pricing_button {
	background: #b28d19;
}
	.column_yellow .pricing_button:hover {
		background: #947615;
	}
	.column_yellow .topheader {
		border-bottom: 1px solid #947615;
	}
	.column_yellow .bottomheader {
		border-top: 1px solid #c1991b;
	}



/*  _______________________________________

	06 	COLUMN HIGHLIGHT
    _______________________________________  */



.pricingtable .column_highlight {
	position: relative;
	z-index: 2;
	background: #d3d3d3;
	border-bottom: 1px solid #cccccc;
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.6), 0 0 21px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,0.6), 0 0 21px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 1px rgba(0,0,0,0.6), 0 0 21px 0px rgba(0, 0, 0, 0.2);
}
.pricingtable .column_highlight .header {
	padding: 32px 8% 24px 8%;
	position: relative;
	margin-top: -20px;
	*padding: 24px 8% 24px 8%;
	*margin-top: 0;
}
.pricingtable .column_highlight .footer {
	padding: 32px 2% 24px 2%;
	*padding: 24px 2% 12px 2%;
}



/*  _______________________________________

	07 MEDIA QUERIES
    _______________________________________  */



@media screen and (max-width: 1023px) {

	.pricingtable .column {
		margin: 0 0 32px 0;
	}
	.pricingtable_five .column,
	.pricingtable_four .column,
	.pricingtable_three .column,
	.pricingtable_two .column {
		width: 50%; 
	}
	.pricingtable .content .description i {
		width: 30px;
	}
	.pricingtable .content .description li {
		padding-left: 10%;
	}
	.pricingtable .column_highlight {
		z-index: 1;
		background: #dddddd;
		border-bottom: none;
		-webkit-box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4);
	    -moz-box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4);
	    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4);
	}
	.pricingtable .column_highlight .header {
		padding: 24px 8% 12px 8%;
		margin-top: auto;
	}
	.pricingtable .column_highlight .footer {
		padding: 24px 2% 12px 2%;
	}

}

@media screen and (max-width: 480px) {

	.pricingtable .column {
		margin: 0 0 32px 0;
	}
	.pricingtable .column {
		margin-right: 0;
	}
	.pricingtable_five .column,
	.pricingtable_four .column,
	.pricingtable_three .column,
	.pricingtable_two .column {
		width: 100%; 
	}
	.pricingtable .content .description li {
		padding-left: 12%;
	}

}