/*
 *
 * CSS Styles for IAT381 Assignment 2 Company Website
 * by Bradley Sutherland & Jonathan Bongato
 * 
 *
 */

/* =========================================================
 * Font Embed Styles
 * ========================================================= */

 @font-face {
    font-family: 'haymaker';
    
    src: url('../type/haymaker-webfont.eot');
    src: url('../type/haymaker-webfont.eot?#iefix') format('embedded-opentype'),
         url('../type/haymaker-webfont.woff') format('woff'),
         url('../type/haymaker-webfont.ttf') format('truetype'),
         url('../type/haymaker-webfont.svg#haymakerregular') format('svg');

         /*src: url('../type/Chunkfive-webfont.eot');
    	 src: url('../type/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('../type/Chunkfive-webfont.woff') format('woff'),
         url('../type/Chunkfive-webfont.ttf') format('truetype'),
         url('../type/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');*/
    font-weight: normal;
    font-style: normal;

}

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

}

/* =========================================================
 * Common Elements
 * ========================================================= */

* {
	font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}

h1, h2 {
	font-family: 'haymaker';
}

h1 { font-size: 26px; margin-bottom: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

.cta, .pgnum {
	text-decoration: none;
	height: 45px;
	display: inline-block;
	line-height: 45px;
	font-family: 'haymaker';
	padding-left: 16px;
	padding-right: 16px;
	font-size: 14px;
	/*border: 2px solid #26211d;*/
	border: 2px solid #143f66;
	/*color: #26211d;*/
	color: #143f66;
}
	.cta:hover {
		/*background-color: #26211d;*/
		background-color: #143f66;
		color: #faf6ed;
	}

.prime-cta {
	/*background-color: #26211d;*/
	background-color: #143f66;
	color: #faf6ed;
}
	
	.prime-cta:hover {
		/*background-color: #403730;*/
		/*border-color: #403730;*/
		background-color: #0f5699;
		border-color: #0f5699;
		color: #fff;
	}

.cta-selected {
	background-color: rgba(20,63,102,0.5);
	color: #faf6ed;
}
	
	.cta-selected:hover, .cta-selected-right:hover {
		background-color: rgba(20,63,102,0.5);
	}

	.cta-selected-left {
		background-color: rgba(20,63,102,0.5);
		color: #faf6ed;
		border-right: 0px;
	}

	.cta-selected-right {
		background-color: rgba(20,63,102,0.5);
		color: #faf6ed;
		border-left: 0px;
	}



#pagination {
	margin-top: 32px;
}
	.pgnum {
		border-color: #807c73;
		color: #807c73;
		margin-right: 4px;
	}

	.pgnum-selected {
		background-color: rgba(128,124,115,0.5);
		color: #faf6ed;
	}

	.pgnum:hover {
		background-color: #807c73;
		color: #faf6ed;
	}

	#pagination .columns {
		text-align: right;
	}

	.next {
		margin-left: 16px;
	}

.regular-top {
	padding-top: 32px;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

 /* =========================================================
 * Page Styles
 * ========================================================= */
 
 .title h1 {
	margin-top: 80px;
	margin-left: 50px;
 }
	.title h2 {
		margin-bottom: 50px;
		margin-left: 50px;
	}
 
 .pickbeer p {
	margin-left: 80px;
 } 
	 .pickbeer img {
		display: block;
		margin-left: auto;
		margin-right: auto;
	 }

header {
	width: 100%;
	background-color: #26211d;
	height: 100px;
}

	header #nav-home {
		font-family: 'haymaker';
		color: #faf6ed;
		font-size: 24px;
		padding-top: 40px;
		text-decoration: none;
		display: block;
		width: 300px;
	}

	header #nav-home:hover {
		color: #daac36;
	}

	nav {
		text-align: right !important;
	}

	#nav-menu {
		display: none;
	}

	#nav-menu img {
		width: 44px;
		position: absolute;
		right: 16px;
		top: 0px;
	}

	header #nav-home img {
		width: 32px;
		float: left;
		margin-top: -8px;
		margin-right: 16px;
	}

	nav a {
		font-size: 14px;
		font-family: 'haymaker';
		text-decoration: none;
		color: #e6dcc3;
		margin-left: 32px;
		padding-top: 42px;
		display: inline-block;
	}

	nav a:hover, nav .selected {
		color: #daac36;
	}

	nav a#order {
		color: #add5fb;
	}

	nav a#order:hover {
		color: #d1e9ff;
	}

footer {
	background-color: #bab6ae;
	height: 86px;
	color: #504c47;
	padding-top: 32px;
	font-size: 14px;
}

footer .four {
	text-align: right !important;
}

footer img  { display: none; }

/* Homepage Styles */

#home-brewery {
 	display: block;
 	height: 500px;
 	background-color: #a3cbf1;
 	background-image: url('../img/home-brewery.jpg');
 	background-size: 100%;
 	background-repeat: no-repeat;
 	background-position: center;
}

	#home-brewery .row {
		width: 100%;
		height: 500px;
		display: table;
	}

	#home-brewery .eight {
		text-align: center;
		margin: auto;
		float: none;
		display: table-cell;
		vertical-align: middle;
	}

	#home-brewery .centered-content {
		width: 66.6667%;
		margin: auto;
	}

	#home-brewery h1 {
		font-family: 'haymaker';
		background-color: #26211d;
		width: 360px;
		height: 75px;
		color: #add5fb;
		margin: auto;
		line-height: 82px;
		margin-bottom: 44px;
		font-size: 36px;
	}

	#home-brewery .cta {
		margin-top: 16px;
		margin-right: 16px;
	}

	#home-brewery .cta:hover {
		color: #add5fb;
	}

	

	#home-brewery .prime-cta:hover {
		color: #fff;
	}

	#home-logo {
		width: 640px;
	}

#home-featured, #brews-featured {
	display: block;
	height: 500px;
	background-color: #26211d;
	color: #add5fb;
	background-image: url('../img/home-featured.jpg');
 	background-size: 100%;
 	background-repeat: no-repeat;
 	background-position: center;
}
	#home-featured .cta, #brews-featured .cta {
		color: #add5fb;
		border-color: #add5fb;
		margin-right: 16px;
		margin-top: 16px;
	}

	#home-featured .cta:hover, #brews-featured .cta:hover {
		background-color: #add5fb;
		color: #26211d;
	}

	#home-featured .prime-cta, #brews-featured .prime-cta {
		background-color: #add5fb;
		color: #26211d;
	}

	#home-featured .prime-cta:hover, #brews-featured .prime-cta:hover {
		background-color: #d1e9ff;
		border-color: #d1e9ff;
	}
 
 	#home-featured .row, #brews-featured .row {
		width: 100%;
		height: 500px;
		display: table;
	}

	#home-featured .six {
		margin: auto;
		float: none;
		display: table-cell;
		vertical-align: middle;
	}

	#home-featured .left-content {
		width: 50%;
	}

	#home-featured-img {
		display: none;
	}

#home-latestpost {
	display: block;
}
	#home-latestpost .container {
		padding-top: 32px;
		padding-bottom: 48px;
	}

	#home-latestpost #latestpost-img {
		width: 100%;
		height: 300px;
	}

	#home-latestpost #suggestion-box {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		border: 2px solid rgba(102,89,78,0.2);
		height: 300px;
		padding: 16px;
	}

	#home-latestpost .post-label {
		position: absolute;
		bottom: 0px;
		padding-left: 32px;
		padding-bottom: 32px;
	}

	#home-latestpost .post-label h2, h3 {
		margin: 0px;
		color: #fff;
	}

	#home-latestpost .post-label h3 {
		font-size: 16px;
	}

/* The Crew Page Styles */
#crew-started {
 	background-color: #a3cbf1;
 	background-image: url('../img/crew-started.jpg');
 	background-size: 100%;
 	background-repeat: no-repeat;
 	background-position: center;
}
	#crew-started .row {
		padding-top: 32px;
		padding-bottom: 32px;
		display: inline-block;
	}

	#crew-started p {
		text-align: center;
		margin: auto;
		width: 75%;
		margin-top: 48px;
	}

#crew-bios {

}
	#crew-bios .container {
		padding-top: 32px;
		padding-bottom: 24px;
	}

	#crew-bios img {
		width: 100%;
	}

	#crew-bios h2 {
		margin-top: 40px;
	}

/* Join The Mix Styles */
#mix-intro {
	background-color: #a3cbf1;
 	background-image: url('../img/crew-started.jpg');
 	background-size: 100%;
 	background-repeat: no-repeat;
 	background-position: center;
 	display: block;
}

	#mix-intro .container {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	#mix-intro .cta {
		float: right;
		margin-top: 10px;
	}

	#mix-intro p {
		margin: 0px;
	}

#mix-suggestions {

}
	#mix-suggestions .container {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	#mix-suggestions #cta-nav {
		text-align: right;
		padding-top: 3px;
	}

	#mix-suggestions .column, #mix-suggestions .columns {
		padding-right: 0px;
	}

	#mix-suggestions .suggestion-row .columns:first-child {
		width: 320px;
	}

	#mix-suggestions .row {
		margin-bottom: 20px;
	}

	#mix-suggestions .suggestion-row {
		padding-left: 10px;
		padding-right: 10px;
	}

	.suggestion {
		background-color: #fff;
		box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
		padding: 16px;
		margin: 4px;
		width: 100;
	}

	.suggestion-text {
		margin-bottom: 16px;
		padding-bottom: 16px;
		border-bottom: 1px solid #e5e0dc;
	}

	.suggestion-vote {
		float: right;
		line-height: 48px;
		font-size: 14px;
		font-weight: bold;
		color: #807c73;
	}

	.suggestion-vote .cta {
		margin-left: 16px;
	}

	#mix .suggestion-vote .cta {
		display: none;
	}




#mix-makesuggestion {
	overflow: hidden;
}

	#suggestion-overlay {
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		position: absolute;
		left: 0px;
		top: 0px;
	}

	#suggestion-dialog {
		width: 500px;
		background-color: #faf6ed;
		height: 420px;
		margin: auto;
		position: absolute;
		top: 50%;
		margin-top: -210px;
		left: 50%;
		margin-left: -250px;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
		padding: 32px;
	}

	#suggestion-dialog h1 {
		margin-top: 0px;
	}

	#suggestion-dialog form {
		margin: 0px;
	}

	#suggestion-dialog .mix-name input {
		width: 100%;
		height: 44px;
		background-color: #fff;
		padding-left: 16px;
		padding-right: 16px;
		margin-bottom: 16px;
	}

	#suggestion-dialog .mix-description textarea {
		width: 100%;
		height: 120px;
		padding: 16px;
		margin-bottom: 16px;
	}

	#suggestion-dialog label {
		padding-bottom: 5px;
	}

	#suggestion-dialog .mix-actions {
		text-align: right;
		margin-top: 11px;
	}

	#suggestion-dialog .mix-actions input {
		width: auto;
		padding: 0px;
		padding-left: 16px;
		padding-right: 16px;
		margin-left: 16px;
	}

	#message-overlay {
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		position: absolute;
		left: 0px;
		top: 0px;
		display: none;
	}

	#message-dialog {
		width: 500px;
		background-color: #faf6ed;
		height: 280px;
		margin: auto;
		position: absolute;
		top: 50%;
		margin-top: -210px;
		left: 50%;
		margin-left: -250px;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
		padding: 32px;
	}

	 #message-dialog .mix-actions {
		text-align: center;
		margin-top: 32px;

	}

	#message-dialog .mix-actions input:first-child {
		margin-left: 0px;
	}

/* Blog Styles */
#blog {

}

	
	.blog-post h2 {
		margin-bottom: 0px;
		margin-top: 23px;
	}
	.blog-post h3 {
		color: #807c73;
		padding-top: 0px;
		margin-top: 0px;
		margin-bottom: 4px;
	}

	.blog-events h2 {
		margin-top: 0px;
	}

	.blog-post {
		padding-bottom: 32px;
		margin-bottom: 48px;
		border-bottom: 1px solid #e5e0dc;
	}

	.blog-events {
		font-size: 14px;
	}

	.blog-events article {
		padding-bottom: 16px;
		margin-bottom: 16px;
		border-bottom: 1px solid #e5e0dc;
	}

	.blog-events article:last-child {
		border-bottom: 0px;
	}

	.blog-events h3 {
		color: #26211d;
		font-weight: bold;
		font-size: 14px;
	}

	.blog-events h4{
		margin: 0px;
		color: #807c73;
	}

	.blog-events p {
		margin: 0px;
		color: #807c73;
	}

	#blog #pagination {
		float: right;
		margin-top: 0px;
		margin-bottom: 32px;
	}

/* Keep In Touch Page Styles */
#keep-in-touch {

}

	#keep-in-touch form {
		margin: 0px;
	}

	#keep-in-touch .kit-name input, #keep-in-touch .kit-email input {
		width: 100%;
		max-width: 500px;
		height: 44px;
		background-color: #fff;
		padding-left: 16px;
		padding-right: 16px;
		margin-bottom: 16px;
	}

	#keep-in-touch .kit-message textarea {
		width: 100%;
		height: 120px;
		padding: 16px;
	}

	#keep-in-touch input[type='submit'] {
		margin-left: 0px;
	}

	#keep-in-touch label {
		padding-bottom: 5px;
		display: block;
	}

	#keep-in-touch .kit-actions {
		margin-top: 11px;
		margin-bottom: 32px;
	}

	#keep-in-touch .kit-actions input {
		width: auto;
		padding: 0px;
		padding-left: 16px;
		padding-right: 16px;
	}

	#keep-in-touch section {
		padding-bottom: 32px;
	}

	#keep-in-touch #location-info {
		margin-top: 23px;
	}

	#keep-in-touch .seven img {
		width: 583px;
	}

/* Our Brews Page Styles */
#brews {

}

#brews-featured {
	background-color: rgba(0,0,0,0.3);
	display: block;
 	height: 500px;
 	background-color: #a3cbf1;
 	background-image: url('../img/home-featured.jpg');
 	background-size: 100%;
 	background-repeat: no-repeat;
 	background-position: center;
}
	
	#brews-featured .row {
		width: 100%;
		height: 400px;
		display: table;
	}

	#brews-featured .six {
		text-align: left;
		margin: auto;
		float: none;
		display: table-cell;
		vertical-align: middle;
	}

	#brews-featured .left-content {
		width: 50%;
		margin-top: 90px;

	}

	#brews-featured .cta {
		margin-top: 16px;
		margin-right: 16px;
	}

#brews-season {
	background-color: #a3cbf1;
}

	#brews-season h2 {
		margin-top: 45px;
	}

	#brews-season h3 {
		font-family: 'haymaker';
		color: #26211d;
		margin-top: 21px;
	}

	#brews-season .cta {
		margin-right: 16px;
	}

	#brews-season .column, #brews-season .columns {
		padding: 0px;
		padding-right: 2%;
	}

/*	#brews-season .column:last-child, #brews-season .columns:last-child {
		margin-right: 0px;
		padding-right: 0;
	}*/

	#brews-season .row:last-child {
		padding-bottom: 48px;
	}

	#brews-season img {
		width: 300px;
	}

#brews-past {
	font-size: 14px;
	line-height: 21px;
}

	#brews-past img {
		width: 200px;
	}
	
	#brews-past h2 {
		margin-top: 32px;
		margin-bottom: 28px;
	}

	#brews-past h3 {
		font-family: 'haymaker';
		color: #26211d;
		margin-top: 21px;
		font-size: 14px;
	}

	#brews-past .column, #brews-past .columns {
		padding: 0px;
		padding-right: 4%;
	}

	#brews-past .row {
		padding-bottom: 16px;
		margin-bottom: 32px;
		border-bottom: 1px solid #e5e0dc;
	}

	#brews-past .row:first-child {
		margin-bottom: 0px;
		border-bottom: 0px;
	}

	#brews-past .row:last-child {
		border-bottom: 0px;
	}

/* Order Flow Styles */

#order {

}
	#order h3 {
		font-family: 'haymaker';
		color: #26211d;
		font-size: 16px;
	}

	#order #pick-beer img {
		width: 330px;
	}

	#order label {
		float: left;
		width: 40%;
		margin-top: 0px;
		height: 40px;
		line-height: 40px;
	}

	#order .field {
		height: 40px;
		line-height: 40px;
		text-align: left;
	}

	#order .quantity {
		width: 30%;
	}

 	#order .orderactions {
 		text-align: right;
 		margin-top: 10px;
 		padding-top: 32px;
 		margin-bottom: 48px;
 		border-top: 1px solid #e5e0dc;
 	}

 	#order .order-toggle {
 		padding-bottom: 32px;
 	}
	
	#order .mobile-select-quantity {
		display: none;
	}

#pick-beer .column, #pick-beer .columns {
padding: 0px;
}
	
	#pick-beer h3 {
		margin-top: 21px;
		margin-bottom: 10px;
	}

	#pick-beer .inactive-beer {
		opacity: 0.5;
	}

#order-details {
	font-size: 14px;
	line-height: 21px;
	color: #807c73;
}

	#order-details h3 {
		/*margin-top: 11px;*/
	}

	#order-details-beer img {
		float: left;
		margin-right: 16px;
	}

	#order-details-beer h2 {
		line-height: 50px;
	}

	#order-details .order-values {

	}

	#order-details .order-values .left-column {
		display: inline-block;
		width: 60%;
		font-weight: bold;
		padding-left: 0%;
	}

	#order-details-beer img {
		width: 50px;
	}

	#order-details .order-values .right-column, #order-details .order-values .left-column {
		line-height: 40px;
		display: inline-block;
	}

	#order-details .order-values p {
		margin: 0px;
	}

	#order-details .total {
		color: #26211d;
		font-size: 16px;
	}

#order-left {}

	#order-left label {
		float: left;
		display: block;
		width: 40%;
		line-height: 45px;
		padding-left: 3%;
	}

	#order-left input {
		width: 60%;
		margin-bottom: 16px;
	}

	#order-left h3 {
		/*margin-top: 32px;*/
		margin-bottom: 32px;
	}

	#order-left .creditcard {
		display: block;
		width: 100%;
	}

	#order-left input[type='radio'] {
		width: auto;
	}

	#order-left .creditcard img {
		position: relative;
		top: -5px;
		margin-right: 16px;
		margin-left: 4px;
	}

	#order-left select {
		width: auto;
		margin-bottom: 16px;
	}

	#order-left .cid input {
		width: 15%;
	}

	#order-left h3:nth-child(2n) {
		padding-top: 32px;
	}


	#order-left .sameaddress input, #order-left .sameaddress label {
		width: auto;
		float: left;
	}

	#order-left .sameaddress input {
		margin-right: 8px;
	}

	#order-left .previous-address {
		font-size: 14px;
		line-height: 21px;
		padding-left: 40px;
	}

	#order-left .previous-address h4 {
		font-weight: bold;
		margin-bottom: 0px;
	}

	#order-left .confirmation-message {
		margin-bottom:48px;
	}

	
 /* =========================================================
 * Baseline CSS Styles
 * ========================================================= */
 

 
 form {
 }
 
	 form * {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-o-box-sizing: border-box;
				box-sizing: border-box;
		}
		
	form input#quantity {
	width: 50px;
	}

	form input, form select {
		width: 100%;
		height: 44px;
		background-color: #fff;
		padding-left: 16px;
		/*padding-right: 16px;*/
		line-height: 45px;

		border: 1px solid #e5e0dc;
		color: #26211d;

		border-radius: 0px;

		box-sizing: border-box;

		-moz-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
			transition: all 0.5s ease;

	}

	form input[type='button'] {
		background: transparent;
	}

	form textarea {
		width: 100%;
		height: 120px;
		padding: 16px;
	}

	form label {
		padding-bottom: 5px;
		font-weight: bold;
	}

	input.cta {
		width: auto;
		padding: 0px;
		padding-left: 16px;
		padding-right: 16px;
		margin-left: 16px;
	}

 	
 /* =========================================================
 * Media Queries
 * ========================================================= */
 

/* Mobile Queries */
@media only screen and (max-width: 768px) {

	body {
		padding-top: 44px;
	}

	header {
		height: 44px;
		position: fixed;
		z-index: 100000;
		top: 0px;
	}

	header #nav-home {
		padding-top: 0px;
		font-size: 18px;
		line-height: 48px;
	}

	header #nav-home img {
		margin-top: 6px;
		width: 25px;
	}

	#nav-menu {
		display: block;
	}

	.row {
		padding-left: 16px;
		padding-right: 16px;
	}

	.column, .columns {
		width: 100%;
		padding: 0px;
	}

	.cta {
		width: 100%;
	}
	
	.desktop {
		display: none;
	}

	header nav {
		background-color: #1a1613;
		width: 100%;
		height: auto;
		position: fixed;
		top: 44px;
		left: 0px;
		display: none;
	}

	header nav a {
		margin: 0px;
		padding: 0px;
		display: block;
		text-align: left;
		margin-left: 16px;
		margin-right: 16px;
		height: 44px;
		line-height: 44px;
		border-bottom: 1px solid #26211d;
	}

	/* Home Page */
	#home-brewery {
		background-size: auto;
	}

	#home-brewery .centered-content {
		margin: 0px;
		width: auto;
		text-align: left;
	}

	#home-logo {
		width: 100%;
	}

	#home-featured {
		background-image: none;
		height: auto;
		padding-top: 16px;
		padding-bottom: 32px;
	}

	#home-featured .left-content {
		width: auto;
	}

	#home-featured .row {
		height: auto;
	}

	#home-featured-img {
		display: block;
		width: 100%;
	}

	#home-latestpost .container {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	#home-latestpost h1 {
		margin-left: 16px;
	}

	#home-latestpost #latestpost-img {
		height: auto;
	}

	#home-latestpost .eight {
		position: relative;
	}

	#home-latestpost .post-label {
		padding-left: 16px;
		padding-bottom: 16px;
	}

	#home-latestpost h2 {
		margin-top: 0px;
	}


	#home-latestpost #suggestion-box {
		height: auto;
	}

	
	/* Crew Page Styles */
	
	#crew-started {
		background-size: auto;
	}
	
	#crew-started img {
		width: 100%;
	}
	
	#crew-started p {
		margin: 0px;
		width: auto;
		text-align: left;
	}
	
	#crew-bios .column, #crew-bios .columns{
		float: none;
		width: 100%;
		max-width: 100%;
	}
	
	/* Keep in Touch Styles */
	
	#keep-in-touch .seven img {
		width: 100%;
	}
	
	
	#keep-in-touch .kit-actions input {
		width: 100%;
	}

	/* Order Page Styles */

	#order .order-toggle .cta {
		width: 50%;
		text-align: center;
	}

	#order h1 {
		margin-top: 0px;
	}

	#order #order-details .left-column p {
		padding-left: 16px;
	}
	
	#order .desktop-select-quantity{
		display: none;
	}
	
	#order #pick-beer .active-beer {
		margin-top: 10px;
		width: 25%;
		float: left;
	}
	
	#order #pick-beer .inactive-beer {
		width: 100%;
		padding-top: 12px; 
	}
	
	#order #pick-beer .quantity-info {
		float: left;
		width: 75%;
	}
		#order #pick-beer .quantity-info h3 {
			margin-top: 8px;
			margin-bottom: 5px;
			padding-left: 5px;
		}
		
		#order #pick-beer .quantity-info label {
			padding-left: 5px;
		}

	#order .orderactions {
		margin-bottom: 0px;
		position: relative;
	}

	#order .orderactions .cta {
		width: 100%;
		margin-bottom: 16px;
		margin-left: 0px;
	}

	#order .orderactions {
		height: 155px;
		max-height: 155px;
	}

	#order .orderactions input[type='submit'] {
		position: absolute;
		top: 32px;
		left: 0px;
	}

	#order .orderactions a {
		position: absolute;
		left: 0px;
		top: 92px;
		width: 100%;
	}

}


/* Tablet Styling */
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
	
	body {
		padding-top: 44px;
	}

	header {
		height: 44px;
		position: fixed;
		z-index: 100000;
		top: 0px;
	}

	header #nav-home {
		padding-top: 0px;
		font-size: 18px;
		line-height: 48px;
	}

	header #nav-home img {
		margin-top: 6px;
		width: 25px;
	}

	#nav-menu {
		display: block;
	}

	.row {
		padding-left: 16px;
		padding-right: 16px;
	}

	.column, .columns {
		width: 100%;
		padding: 0px;
	}

	.cta {
		width: 100%;
	}

	header nav {
		background-color: #1a1613;
		width: 100%;
		height: auto;
		position: fixed;
		top: 44px;
		left: 0px;
		display: none;
	}

	header nav a {
		margin: 0px;
		padding: 0px;
		display: block;
		text-align: left;
		margin-left: 16px;
		margin-right: 16px;
		height: 44px;
		line-height: 44px;
		border-bottom: 1px solid #26211d;
	}
	
	/* Order Page Styles */
	
	#order h1 {
		margin-top: 0px;
	}
	
	#order .order-toggle .cta {
		width: 50%;
		text-align: center;
	}
	
	#order .order-values{
		padding-left: 3%;
	}
	
	#order .order-values  .left-column{
		width: 40%;
	}
	
	#order #pick-beer .column, #order #pick-beer .columns {
		float: left;
		width: 33.33333%;
	}
	
	#order #pick-beer img {
		width: 99%;
	}
	
	/* Crew Page Styles */
	
	#crew-started {
		background-size: auto;
	}
	
	#crew-started img {
		width: 100%;
	}
	
	#crew-bios .column, #crew-bios .columns {
		padding: 0 2%;
	}
	
	#crew-bios img {
		width: 100%;
	}
	
	/* Keep in Touch Styles */
	
	#keep-in-touch .seven img {
		width: 100%;
	}
	
	
 }
 
 /* Desktop Styling */
  @media only screen and (min-width: 768px) {
	.mobile {
		display: none;
	}
  }