styles.css

/* Module Layouts */
.col-a,
.col-b {
	clear: both;
	float: left;
}
@media( min-width: 60em ) {
	.col-a,
	.col-b {
		clear: none;
	}
	.col-a {
		width: 70%;
		float: left;
	}
	.col-b {
		width: 27%;
		float: right;
	}
}

/* Module Layout: Phase 1 */
.mod img {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 250px;
}

@media( min-width: 25em ) and ( max-width: 49.9375em ) {
	.mod img {
		float: left;
		width: 30%;
		max-width: 9999px;
	}
	.mod .mod-header,
	.mod .mod-desc {
		float: right;
		width: 68%;
		padding-left: 2%;
	}
}

@media( min-width: 50em ) {
	.three-col .mod {
		display: inline-block;
		float: left;
		width: 30%;
		margin: 0 5% 2em 0;
	}
	.three-col .mod:last-of-type {
		margin-right: 0;
		float: right;
	}
}

/* Module Layout: Phase 2 */
@media( min-width: 40em ) and ( max-width: 60em ) {
	.featured .mod img {
		float: left;
		width: 30%;
	}
	.featured .mod .mod-header,
	.featured .mod .mod-desc {
		float: right;
		width: 68%;
	}
}

/* Medium viewport three-across breakpoint: */
@media( min-width: 40em ) and ( max-width: 50em ) {
	.mod-cost {
		float: left;
	}
	.mod-buy {
		float: right;
	}
	.mod-buy .buy-remaining {
		text-align: right;
	}
}
/* Wide viewport three-across breakpoint, inc. sidebar treatment: */
@media( min-width: 105em ) {
	.mod-cost {
		float: left;
	}
	.mod-buy {
		float: right;
	}
	.mod-buy .buy-remaining {
		text-align: right;
	}
}

/* Featured module at medium widths: */
@media( min-width: 40em ) and ( max-width: 60em ) {
	.featured .mod-cost {
		float: left;
	}
	.featured  .mod-buy {
		float: right;
	}
	.featured .mod-buy .buy-remaining {
		text-align: right;
	}
}
/* Three-across layout on wide viewports: */
@media( min-width: 75em) {
	.featured .mod-cost {
		float: left;
	}
	.featured  .mod-buy {
		float: right;
	}
	.featured .mod-buy .buy-remaining {
		text-align: right;
	}
}

/* Theme */
img {
	max-width: 100%;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

input {
	cursor: pointer;
}

.demo {
	background: rgba(255,255,255,.95);
	width: 98%;
}
.demo {
	width: 97.5%;
	padding: 0 2%;
	margin: 0 auto;
}
.demo:after {
	content: "";
	clear: both;
	display: block;
}
html,
body {
	background: #222;
	margin: 0;
	padding: 0;
}
.demo header {
	background: #333;
	margin: 0;
	padding: .5em 1.5em;
	float: left;
	width: 100%;
}
.page-hed {
	border-bottom: 2px solid rgba(0,0,0,.3);
	color: #222;
	font-size: 2.2em;
	font-family: 'Pathway Gothic One', sans-serif;
	padding-bottom: .1em;
	text-transform: uppercase;
}
.logo-hed {
	background: rgba(0,0,0,.8);
	color: #fafafa;
	font-size: 3em;
	display: inline-block;
	font-family: 'Pathway Gothic One', sans-serif;
	line-height: .9;
	margin: 1em 0 15% 0;
	padding: .15em .5em;
	text-transform: uppercase;
}
.demo-lead {
	background: url(../img/hutch-header.jpg);
	display: block;
	margin: 0 auto;
	min-height: 5em;
	width: 97.5%;
	background-size: cover;
}

.mod {
	background: #fff;
	margin-bottom: 1em;
	box-shadow: 0 0 5px rgba(0,0,0,.2);
}
.mod:after {
	content: "";
	clear: both;
	display: block;
}
.mod-header,
.mod-desc {
	background: #4e4f4e;
	padding: .1em 1em;
}
.mod-desc {
	padding-bottom: 1em;
}
.mod-desc:after {
	content: "";
	clear: both;
	display: block;
}

.heading {
	color: #aaa;
	font-family: 'Pathway Gothic One', sans-serif;
	font-size: 1.8em;
	line-height: .95;
	margin: 0;
	padding: .5em 0 0 0;
	text-transform: uppercase;
}
.heading strong {
	display: inline-block;
	color: rgba(255,255,255,.85);
}
.meta {
	color: #999;
	font-family: 'Source Code Pro', monospace;
	font-size: .85em;
	margin: 0;
	padding: .4em 0 1em 0
}

p {
	color: rgba(255,255,255,.85);
	font-family: 'Source Sans Pro', sans-serif;
}
.mod-desc > p {
	padding-right: 1em;
}

.cost-prev {
	color: #888;
	font-family: 'Source Code Pro', monospace;
	font-size: 1.2em;
	margin: 0;
}
.cost-curr {
	color: rgba(255,255,255,.85);
	line-height: 1;
	font-family: 'Pathway Gothic One', sans-serif;
	font-size: 3.5em;
	margin: 0;
}

.buy-remaining {
	color: #eee;
	font-family: 'Source Code Pro', monospace;
	font-size: .8em;
	font-style: italic;
	margin: 1.5em 0 .5em 0;
}
.btn-buy {
	background-image: linear-gradient( #fe9358, #fe6b1f ); 
	border: 1px solid #e77c3f;
	border-radius: .15em;
	color: #fff;
	display: block;
	font-family: 'Pathway Gothic One', sans-serif;
	font-size: 1.3em;
	padding: .15em 1.2em;
	text-transform: uppercase;
	text-shadow: 0 1px 1px #6b3011;
}