* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #000;
	color: #fff;
  	font-family: 'Adelle-Regular', Arial, Sans-Serif;
	/*font-family: 'MotterCorpusITCTT';*/
}


h2 {
	font-size: 50px;
	line-height: 50px;
	font-family: 'MotterCorpusITCTT';
	font-weight: normal;
	text-transform: uppercase;
	color: #000;
	padding-bottom: 30px;
}

.clear {
	clear: both;
}

.container {
	width: 956px;
	margin: 0 auto;
}

.paper_background {
	background-image: url('/images/light_texture.jpg');
	background-size: cover;
	background-position: center center;
}

.login {
	padding-top: 175px;
	padding-bottom: 175px;
	color: #000;
}

.login .container {
	width: 600px;
}

fieldset {
	border: 0px;
}

.login .fieldblock {
	margin-bottom: 10px;
}

.login label {
	text-align: right;
	width: 200px;
	display:inline-block;
}

.login input {
	width: 300px;
	padding: 5px;
}

.login input.button {
	width: auto;
	margin-left: 200px;
}

.header_spacing {
	padding-top: 175px;
	padding-bottom: 175px;
}

#errors {
	color: #ff0000;
	font-size: 25px;
	margin-bottom: 20px;
}


.monocle {
	background-image: url('/images/monocle.png');
	background-position: 85% 100%;
	background-repeat: no-repeat;
	min-height: 500px;
}

.left_col {
	float: left;
	width: 410px;
	color: #000;
	padding-left: 15px;
}

.left_col p {
	padding: 8px 0;
	font-size: 14px;
	line-height: 22px;
}

.left_col p.lead {
	font-size: 22px;
	line-height: 25px;
	padding: 80px 0 5px 0;
}

.wood_background {
	background-image:url("/images/wood_bg.jpg");
	background-repeat: repeat-y;
	background-size: 100% auto;
}

.ale_left {
	background-image:url("/images/ale_label_left.png");
	width: 150px;
	float: left;	
	background-repeat: no-repeat;
	background-position: center top;	
}

.ale_right {
	background-image:url("/images/ale_label_right.png");
	width: 151px;
	background-repeat: no-repeat;
	background-position: center top;
	float: left;
	margin-right: 20px;
}

.ale_right:nth-child(3n+3) {
	margin-right: 0px;
}

.ale_left:nth-child(3n+4) {
	clear: left;
}



.label_as_circle {
	height: 150px;
	width: 150px;
	background-position: center center;
	background-size: cover;
	-webkit-clip-path: circle(55px at center);	
	margin-top: 47px;
	margin-bottom: 47px;
}

.ale_left .label_as_circle {
	margin-left: -5px;
}

.ale_right .label_as_circle {
	margin-left: 6px;
}

.ale {
	position: relative;
}

.ale:last-of-type {
	margin-right: 0px;
}

.beer_label {
	position: absolute;
	z-index: 70;
}

.label_1 {
	top: 150px;
	left: 0px;
}

.label_2 {
	top: 150px;
	left: 47px;
}

.label_3 {
	top: 150px;
	left: auto;
	left: 95px;
}



.label_5 {
	top: 150px;
	right: 0px;
}

.label_6 {
	top: 150px;
	right: 47px;
}

.label_7 {
	top: 150px;
	left: auto;
	right: 95px;
}



.label_favourite {
	left: -5px;	
	bottom: 0px;	
	top: 18px;
}

.label_favourite_right {
	right: -5px;
	bottom: 0px;	
	top: 18px;
}

.key {
	width: 23%;
	float: right;
	text-align: left;
}

.label_vegan_key {
	width: 26%;
	float: right;
}

.label_vegetarian_key {
	width: 27%;
	float: right;
}

.key_image {
	float: left;
	width: 17%;
}

.label_favourite_key .key_image {
	width: 30%;
}

.label_favourite_key .key_text {
	width: 70%;
}

.key span {
	padding-top: 6px;
	float: left;
}


.past_beers {
	width: 360px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

.past_beers_background {
	background-image: url("/images/button.png");
	background-repeat: no-repeat;
	opacity: .4; 
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s; 
	top: 0;
}

.past_beers:hover > .past_beers_background {
	opacity: 1; 
}

.past_beers a {
	color: #fff;
	font-family: 'MotterCorpusITCTT';
	font-weight: normal!important;
	letter-spacing: 1px;
	font-size: 18px;	
	display: inline-block;
	width: 100%;
	padding: 10px 0;
	margin-top: 8px;
	text-transform: uppercase;
	text-decoration: none;
	z-index: 2;	
	position: relative;
	
}




@media all and (max-width:956px) {
	.container {
		width: 100%;
	}
	.key {
		width: 50%;
		height: 100px;
		text-align: center;	
	}
	.label_favourite_key .key_image {
		width: 17%;
	}
}



@media all and (max-width: 607px) {
	.key {
		width: 100%;
		height: 100px;
		text-align: left;	
	}
	.key_image {
		text-align: center;
	}
}

@media all and (max-width: 520px) {
	.header_spacing {
		padding-top: 100px;
		padding-bottom: 20px;
	}
	.ale_imformation_left h3 {
		font-size: 40px;
	}
}


@media all and (max-width: 470px) {
	.key_image, .label_favourite_key .key_image {
		width: 25%;
	}
}