body {text-align: center;font: 14px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;background:#FC0;}
body > .wrapper {
background:#FAFAFA;border-radius:16px;-webkit-border-radius:16px;-moz-border-radius:16px;border:1px solid #CCC;
margin: 60px auto;
width:90%;
max-width:960px;
min-width:760px;
overflow: hidden;
}
.wrapper > p {padding:1em 0 0;clear: both;display: block;}
h1 {background-color: #FFF;padding:24px 16px 16px 0;font-size:20px;margin:0;
	-webkit-border-top-left-radius: 16px;
	-webkit-border-top-right-radius: 16px;
	-moz-border-radius-topleft: 16px;
	-moz-border-radius-topright: 16px;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	border-bottom:1px solid #CCC;
}
h1 strong {position: absolute;left:-9999px;top:0;}
h1 img {display: inline-block;vertical-align: middle;position: relative;top:-4px;left:10px;}

ul.preview {margin: 0;padding:0;float: left;overflow: hidden;height:200px;
}
ul.preview li {margin: 0;padding:0;list-style:none;}
ul.preview li img {margin: 0;padding:0;display: block;float: left;}
article {display: block;float: left;width:100%;position: relative;padding:1.5em 0;margin:0;}
.js .js-hide {display: none;}
.js article {transition: background-color 0.3s;-webkit-transition: background-color 0.3s;-moz-transition: background-color 0.3s;color:#444;}
.js article:hover,
.js article:focus {color:#000;}
article ul {margin:0;padding:0.5em;font-weight: bold;}
article li {list-style:none;margin:0 1em 0.5em;padding:0;display: block;text-align: center;font-size:22px;}
article h2 {font-size: 24px;font-weight: bold;}
article abbr[title="per month"] {font-size: 0.5em;margin-left:6px;color:#777;font-style: italic;font-weight: normal;position: relative;top:-0.4em;}
/*p.button {position: absolute;bottom:10px;right:0;left:0;}*/
p.button a {display: block;padding:8px 20px;background:#FFF;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;text-decoration: none;color:#000;font-weight: bold;display: inline-block;
	box-shadow: 0 2px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.6);
	border-top:1px solid #FFF;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
	border-bottom:1px solid #999;
	position: relative;
	text-shadow: 0px 1px 1px rgba(255,255,255,1), 0px -1px 1px rgba(0,0,0,0.2);
	-webkit-text-shadow: 0px 1px 1px rgba(255,255,255,1), 0px -1px 1px rgba(0,0,0,0.2);
	-moz-text-shadow: 0px 1px 1px rgba(255,255,255,1), 0px -1px 1px rgba(0,0,0,0.2);
	font-size: 22px;
}
p.button a:hover,
p.button a:focus {
	box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	top:1px;
	color:#333;
}
p.button a:active {
	box-shadow: 0 -1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 -1px 3px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 -1px 3px rgba(0,0,0,0.6);
	text-shadow: 0px 1px 1px rgba(255,255,255,1), 0px -1px 1px rgba(0,0,0,0.2), 0px 0px 5px rgba(150,0,0,0.2), 0px 0px 15px rgba(150,0,0,0.1);
	-webkit-text-shadow: 0px 1px 1px rgba(255,255,255,1), 0px -1px 1px rgba(0,0,0,0.2), 0px 0px 5px rgba(150,0,0,0.2), 0px 0px 15px rgba(150,0,0,0.1);
	-moz-text-shadow: 0px 1px 1px rgba(255,255,255,1), 0px -1px 1px rgba(0,0,0,0.2), 0px 0px 5px rgba(150,0,0,0.2), 0px 0px 15px rgba(150,0,0,0.1);
	top:2px;
	color:#C00;
}
p.button.button-disabled a{
    color: #999;
}
p.button.button-disabled a:hover,
p.button.button-disabled a:focus {
	box-shadow: 0 2px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.6);
    color: #999;
    top:0;
}

form {
	float: left;
	width:100%;
	padding:1em 2.5% 0;
	clear:both;
	text-align: left;
	border-top:	1px solid #CCC;
}
fieldset {
	border:0;
	padding:0;
	margin:0;
	width:95%;
	float:left;
}
form .field {
	overflow: hidden;
	padding:0 2.5% 10px;
	width:93%;
}
form select,
form input[type="text"],
form input[type="email"],
form textarea {
	width:100%;
	padding: 10px;
	border:1px solid #666;
	background:white;
	font-size:16px;
}
form label {
	display: block;
	padding: 4px 0;
	font-weight: bold;
}

form .checkbox {
	margin: .25em 0;
}

form .checkbox label {
	display:inline;
	font-size:18px;
}

form fieldset.two-column .field {
	width: 44%;
	float: left;
}
form fieldset.two-column {
	margin-bottom:10px;
}

form button {
	font-size: 20px;
	padding: 10px 20px;
	font-family: "Helvetica Neue", sans-serif;
	border: 0;
	background: black;
	color: #fc0;
	border-radius: 3px;
	margin: 10px 0;
	font-weight: bold;
	outline:0;
}

form .full-only {
	display: none;
}

footer {background-color: #FFF;padding:16px;font-size:20px;margin:0;
	-webkit-border-bottom-left-radius: 16px;
	-webkit-border-bottom-right-radius: 16px;
	-moz-border-radius-bottomleft: 16px;
	-moz-border-radius-bottomright: 16px;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
	border-top:1px solid #CCC;
	font-size:14px;
	clear: both;
}
footer p {margin:0;}
h1, footer, p.button a {
	background-image: linear-gradient(bottom, rgb(255,255,255) 100%, rgb(230,230,230) 0%);
	background-image: -o-linear-gradient(bottom, rgb(255,255,255) 100%, rgb(230,230,230) 0%);
	background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 100%, rgb(230,230,230) 0%);
	background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 100%, rgb(230,230,230) 0%);
	background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 100%, rgb(230,230,230) 0%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1, rgb(255,255,255)),
		color-stop(0, rgb(230,230,230))
	);
}

@font-face {
	font-family: 'entypo';
	src:url('../fonts/entypo.eot');
	src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
		url('../fonts/entypo.svg#entypo') format('svg'),
		url('../fonts/entypo.woff') format('woff'),
		url('../fonts/entypo.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'entypo';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: 'entypo';
	font-style: normal;
	speak: none;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
}
.icon-bars:before {
	content: "\e000";
}
.icon-graph:before {
	content: "\e001";
}
.icon-archive:before {
	content: "\e002";
}
.icon-statistics:before {
	content: "\e003";
}
.icon-pie:before {
	content: "\e004";
}
.icon-users:before {
	content: "\e006";
}
.icon-upload:before {
	content: "\e005";
}
.icon-database:before {
	content: "\e007";
}
.icon-thumbs-up:before {
	content: "\e009";
}
.icon-cart:before {
	content: "\e008";
}
.icon-new:before {
	content: "\e00b";
}
.icon-gauge:before {
	content: "\e00c";
}
.icon-earth:before {
	content: "\e00a";
}
.icon-right-bold:before {
	content: "\e4ae";
}

h3[class^="icon-"] {position: relative;}
h3[class^="icon-"]:before {padding-right:.5em;color:#444;}

#feature-outline {float: left;width:100%;margin-bottom: 1.5em;padding-top:1.5em;border-top:1px solid #CCC;margin-top: .5em;}
#feature-outline /*div*/.row {float: left;width:90%;padding:.5em 5%;}
#feature-outline /*div*/.row div {float: left;width:29.833333%;padding:0 3% 0 0;text-align: left;}
#feature-outline /*div*/.row div+div {padding:0 1.5%;}
#feature-outline /*div*/.row div+div+div {padding: 0 0 0 3%;}
#feature-outline > p {text-align: center;}

.button-list {clear: both;float: left;width:100%;padding:1em 0 0;}
.button-list p {font-weight: bold;display: inline-block;margin-left:.5em;margin-right:.5em;margin-bottom: 2em;}
.button-list p a {font-size:16px;}

.button.current a {color:#C00 !Important;}

.product-info {clear: both;padding:1em;margin:0 3em 2em;background-color: #FC0;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;border:1px solid #EEE;}
.product-info input,
.product-info button {font-size: 16px;font-weight: bold;padding:.5em;}
.product-info input {border:1px solid #888;}


.package {padding:3em 0;float:left;width:100%;background:white;}
.package img {display: block;height:auto;width:90%;max-width:90%;height:auto;margin: .5em auto 2em;}

.package ul {overflow: hidden;padding:0;margin:1em 0;}
.package ul li {width:40%;margin-left: 7%;float: left;text-align: left;font-size:18px;position: relative;}
.package ul li span {position: absolute;left:-1.5em;}

.clear {float: left;width:100%;clear: both;}