@font-face {
	font-family: EngraversMTBold;
	src: url(../fonts/EngraversMTBold.ttf);
}

@font-face {
	font-family: EngraversGothicBT;
	src: url(../fonts/EngraversGothicBT.ttf);
}

@font-face {
	font-family: BrandonGrotesque;
	src: url(../fonts/BrandonGrotesque.otf);
}

html, body {
	width: 100%;
	margin: 0;
	padding: 0;
}

h1 {
	color: #fefefe;
	height: 1px;
	font-size: 5px;
	margin: 0;
	padding: 0;
}

#gateway {
	display: none;
	position: fixed;
	z-index: 10;
	width: 100%;
	height: 100%;
	background-image: url(../img/gateway.png);
	background-repeat: no-repeat;
	background-color: #1c1c1c;
	background-size: 100% auto;
}
	.gateway-header{
		letter-spacing: 5px;
		font-family: EngraversMTBold;
		font-size: 20px;
		color: white;
		text-align: center;
		margin-top: 50px;
	}
	.gateway-text {
		width: 203px;
		height: 83px;
		position: absolute;
		top: 15%;
		cursor: pointer;
	}
		.gateway-text-yes {
			background-image: url('../img/gateway-yes.png');
			left: 25%;
		}
		.gateway-text-no {
			background-image: url('../img/gateway-no.png');
			right: 25%;
			margin-top: 10px;
		}
.content {
	display: none;
	width: 100%;
}
	#header {
		width: 100%;
		text-align: center;
	}
		.bio-container {
			width: 800px;
			margin: 0 auto;
		}
			.bio {
				float: left;
				margin: 0 0 20px 0;
				width: 160px;
			}
				.bio-image {
					text-transform: uppercase;
				}
					.bio-image img {
						display: block;
						margin: 0 auto;
					}

					.bio-name {
						font-family: BrandonGrotesque;
					}
				.bio-words {
					width: 148px;
					padding: 6px;
					font-family: arial;
					font-size: 11px;
					line-height: 19px;
				}
			.bio-words-container {
				/*display: none;*/
				overflow: hidden;
			}
	#info {
		background-image: url(../img/info_background.png);
		background-repeat: no-repeat;
		background-size: 100%;
		height: 300px;
		width: 100%;
	}
		.glass-and-bottle {
			width: 40%;
			margin: 0;
			padding: 0 0 0 10%;
			height: 100%;
			float: left;
			overflow: hidden;
			position: relative;
		}
			.glass-and-bottle-image {
				background-image: url(../img/bottle-and-glass.png);
				position: absolute;
				width: 268px;
				height: 550px;
				right: 100px;
				top: -215px;
			}
		.info-words {
			margin-left: 40%;
			padding: 0 30px;
		}
			.nineteen-forty {
				font-size: 30.5px;
				font-family: EngraversMTBold;
				letter-spacing: 2px;
				padding: 30.5px 0 0;
			}
			.red-hr {
				height: 22px;
				display: inline-block;
				padding: 0;
				margin: 10px 0;
			}
				.red-hr-left {
					background-image: url(../img/red_hr_left.png);
					background-repeat: no-repeat;
					width: 14px;
				}
				.red-hr-mid {
					background-image: url(../img/red_hr_mid.png);
					background-repeat: repeat-x;
					width: 80%;
					max-width: 400px;
				}
				.red-hr-right {
					background-image: url(../img/red_hr_right.png);
					background-repeat: no-repeat;
					width: 16px;
				}
			.bring-it-back {
				font-family: EngraversGothicBT;
				font-size: 20px;
				line-height: 25px;
				letter-spacing: 2px;
			}
				.bring-it-back span {
					display: block;
				}
	#glass {
		position: relative;
		height: 300px;
		width: 100%;
	}
		.large-glass {
			position: absolute;
			height: 300px;
			width: 100%;
			background-image: url(../img/large-glass-bg.png);
			background-position: center 65%;
			background-size: 100%;
			background-repeat: no-repeat;
		}
		.glass-text {
			position: relative;
			top: 90px;
			letter-spacing: 5px;
			font-size: 20px;
			line-height: 41px;
			text-align: center;
			font-family: EngraversMTBold;
			color: white;
		}
			.glass-text span {
				display: block;
			}
	#social {
		background: url(../img/info_background.png);
		text-align: center;
		padding: 1em 0;
		background-repeat: no-repeat;
		background-size: 100%;
	}
		#social a {
			text-decoration: none;
		}
		#social img {
			padding: 0 1em;
		}
		#social span {
			font-size: 60px;
			font-family: EngraversMTBold;
		}
	#distribution {
		width: 100%;
		overflow: hidden;
		position: relative;
	}
		.distribution-header {
			width: 100%;
			height: 60px;
			background-color: rgba(0, 0, 0, 0.65);
		}
			.distribution-header-text {
				font-family: EngraversGothicBT;
				color: white;
				text-align: center;
				font-size: 25px;
				text-transform: uppercase;
				letter-spacing: 8px;
				line-height: 60px;
			}
				.distribution-header-text span {
					font-family: EngraversMTBold;
					font-size: 23px;
					letter-spacing: 6px;
				}
		.usa-map img{
			height: 100%;
			width: 100%;
		}
			.map-bottle {
				width: 15px;
				height: 57px;
				cursor: pointer;
				transition: all .4s;
				-moz-transition: all .4s; /* Firefox 4 */
				-webkit-transition: all .4s; /* Safari and Chrome */
				-o-transition: all .4s; /* Opera */
				-ms-transition: all .4s; /* IE9 (maybe) */
			}
			.map-bottle:hover {
				-webkit-transform: scale(1.1);
				-moz-transform: scale(1.1);
				-o-transform: scale(1.1);
				-ms-transform: scale(1.1);
				transform: scale(1.1);
			}
		#distribution-text {
			pointer-events: none;
			color: #da2705;
			position: absolute;
			left: 5%;
			top: 50%;
			font-family: EngraversGothicBT;
			font-size: 30px;
			line-height: 50px;
			text-transform: lowercase;
		}
			#distribution-text button {
				pointer-events: auto;
			}
			.golden-rule-image {
				height: 16px;
				position: absolute;
			}
				.golden-rule-left {
					background-image: url(../img/golden-rule-left.png);
					background-repeat: no-repeat;
					width: 28px;
				}
				.golden-rule-mid {
					background-image: url(../img/golden-rule-mid.png);
					background-repeat: repeat-x;
					left: 28px;
					right: 31px;
				}
				.golden-rule-right {
					right: 0;
					background-image: url(../img/golden-rule-right.png);
					background-repeat: no-repeat;
					width: 31px;
				}
			#distribution-text img {
				height: 22px;
				vertical-align: middle;
			}
		#recipe-list {
			position: absolute;
			top: 15%;
			left: 5%;
			width: 40%;
			background-color: #e0e0dd;
			background-color: rgba(255, 255, 255, 0.7);
		}
			.recipe-list-item {
				text-align: center;
				padding: 5%;
			}
				.recipe-short {
					font-family: EngraversGothicBT;
					letter-spacing: 3px;
					padding: 5px 0;
				}
					.recipe-short-name {
						cursor: pointer;
						text-decoration: underline;
						color: #da2705;
					}
		#recipe-card {
			position: absolute;
			top: 15%;
			right: 5%;
			width: 40%;
			background-image: url(../img/info_background.png);
			padding: 20px;
			border-right: 3px solid rgba(0,0,0,.5);
			border-bottom: 3px solid rgba(0,0,0,.5);
			text-align: center;
			font-family: EngraversGothicBT;
			letter-spacing: 2px;
			color: #555;
			font-size: 15px;
		}
			.recipe-close {
				position: absolute;
				top: 5px;
				right: 5px;
				cursor: pointer;
				width: 14px;
				height: 13px;
				background-image: url(../img/recipe-close.png);
				z-index: 100;
			}
			.recipe-long-available {
				color: black;
				text-align: center;
				font-family: EngraversMTBold;
				font-size: 17px;
				letter-spacing: 3px;
			}
			.recipe-long-name {
				color: #da2705;
				font-family: EngraversGothicBT;
				letter-spacing: 3px;
				padding: 5px 0;
				font-size: 20px;
				text-align: center;
			}
			.recipe-long ul {
				list-style: none;
				padding: 0;
			}
			.recipe-long-instructions {
				text-align: left;
			}
	#depot {
		width: 100%;
		height: 300px;
		position: relative;
	}
		.depot {
			height: 300px;
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center;
		}
			.depot-back {
				background-image: url(../img/depot-full.png);
				width: 100%;
			}
			.depot-fore {
				background-image: url(../img/depot-blur.png);
				width: 40%;
				position: absolute;
				top: 0;
				left: 50%;
			}
				.depot-text {
					font-family: EngraversGothicBT;
					color: white;
					text-align: center;
					font-size: 18px;
					line-height: 30px;
					letter-spacing: 5px;
					padding-top: 75px;
				}
	#crest {
		background-image: url(../img/crest.png);
		width: 89px;
		height: 71px;
		margin-top: -35px;
		margin-bottom: -36px;
		position: relative;
		z-index: 1;
		width: 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	#footer {
		width: 100%;
		padding: 50px 0;
		background-image: url(../img/footer-bg.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}
		.footer-header {
			text-transform: uppercase;
			font-family: BrandonGrotesque;
			font-weight: 900;
			text-align: center;
			color: #d6a734;
			padding: 10px 0;
			letter-spacing: 3px;
		}
		.footer-info {
			font-family: EngraversGothicBT;
			color: white;
			text-align: center;
			padding: 10px 0;
			letter-spacing: 4px;
		}
			.footer-info a {
				color: #d6a734;
				cursor: pointer;
			}
			.footer-info a:hover {
				color: #da2705;
			}
		.footer-contact {
			padding: 10px 0;
			display: none;
		}
			.contact {
				float: left;
				font-size: 18px;
				width: 50%;
			}
				.contact-info {
					color: white;
					font-family: BrandonGrotesque;
					text-align: center;
				}
					.contact-info-text {
						float: right;
						margin-right: 30px;
					}
						.contact-info-text span {
							display: block;
						}
				.contact-form {
					font-family: BrandonGrotesque;
				}
					.contact-form-line {
						padding: 5px 0;
					}
						.contact-form-line label {
							color: white;
							width: 70px;
							display: block;
							float: left;
						}
						.contact-form-line input, .contact-form-line textarea {
							border-radius: 3px;
							border: none;
							padding: 3px;
						}
							.contact-form-line input {
								width: 200px;
							}
							.contact-form-line textarea {
								padding: 5px;
								margin-top: 5px;
								width: 270px;
								height: 75px;
								font-family: BrandonGrotesque;
								font-size: 18px;
								letter-spacing: 1px;
							}
						.contact-form-submit {
							margin-left: 230px;
						}
							.contact-form-submit input {
								width: 75px;
								padding: 3px;
								border: 0;
								background-color: #d6a734;
								color: white;
								cursor: pointer;
								font-weight: 900;
								letter-spacing: 1px;
							}
							.contact-form-submit input:hover{
								background-color: #da2705;
							}
						.contact-form-loading {
							color: white;
							display: none;
						}
						.contact-form-thankyou {
							color: white;
							display: none;
						}
						.contact-form-error {
							color: white;
							display: none;
						}
/* Misc */

.block {
	clear: both;
	width: 100%;
}

.clear {
	clear: both;
	width: 0;
	height: 0;
}