/*
  Stylesheet for Vanessa House
*/

@import "fonts.css";

#preferredKitten {
	display: none;
}

.taproom h1 {
	margin-bottom: 20px;
}

.centered > .columns {
	display: inline-block;
	float: none !important;
	vertical-align: middle;
}

.baseline > .columns {
	display: inline-block;
	float: none !important;
	vertical-align: bottom;
}

html, body {
	height: 100%;
}

#beer {
	padding-top: 100px;
}

body {
	background: #fff;
}

#taproom-preview h1 {
	color: #a7a9ac;
	font-size: 3em;
	margin: 40px 0px;
	
	-webkit-transition-delay: 500ms;
		 -moz-transition-delay: 500ms;
		 	-ms-transition-delay: 500ms;
		 			transition-delay: 500ms;
}

#taproom-preview *:not(iframe) {
	opacity: 0;
	position: relative;
		top: 30px;
	
	-webkit-transition: all 600ms ease-in-out;
		 -moz-transition: all 600ms ease-in-out;
		 	-ms-transition: all 600ms ease-in-out;
		 			transition: all 600ms ease-in-out;
}

#taproom-preview h4 {
	margin: 40px 0px 0px 0px;
	
	-webkit-transition-delay: 800ms;
		 -moz-transition-delay: 800ms;
		 	-ms-transition-delay: 800ms;
		 			transition-delay: 800ms;
}

#taproom-preview.active *:not(iframe) {
	opacity: 1;
	top: 0px;
}

#taproom-preview img {
	-webkit-transition-delay: 250ms;
		 -moz-transition-delay: 250ms;
		 	-ms-transition-delay: 250ms;
		 			transition-delay: 250ms;
}

#taproom-preview p {
	-webkit-transition-delay: 750ms;
		 -moz-transition-delay: 750ms;
		 	-ms-transition-delay: 750ms;
		 			transition-delay: 750ms;
}

#taproom-preview .taproom-address {
	border-top: 2px solid #5d5d5e;
	border-bottom: 2px solid #5d5d5e;
	font: normal 400 1.5em/1.2em "Gotham", sans-serif;
	margin-bottom: 15px;
	padding: 20px 0px;
	
	-webkit-transition-delay: 1000ms;
		 -moz-transition-delay: 1000ms;
		 	-ms-transition-delay: 1000ms;
		 			transition-delay: 1000ms;
}

#taproom-preview .hours {
	font: normal 400 1em/1.75em "Gotham", sans-serif;
	
	-webkit-transition-delay: 1250ms;
		 -moz-transition-delay: 1250ms;
		 	-ms-transition-delay: 1250ms;
		 			transition-delay: 1250ms;
}

	#taproom-preview .hours strong {
		margin-right: 10px;
	}

@media only screen and (max-width: 40em) {
	#taproom-preview .taproom-address {
		margin-top: 25px;
	}
}

#taproom-preview p:last-child {
	margin-bottom: 0px;
}

.light-grey {
	color: #a7a9ac;
}

.fallback {
  display: none;
}

#bottle {
	background: url(../images/bt-bottle.png) right top no-repeat;
	display: block;
	position: absolute;
		top: 0px;
		right: 0px;
	width: 100%; height: 100%;
	z-index: 100;
	
	-webkit-background-size: contain !important;
		 -moz-background-size: contain !important;
		 	-ms-background-size: contain !important;
		 			background-size: contain !important;
}

.button {
	background: none !important;
	border: 3px solid #d7df21;
	color: #d7df21 !important;
	font: normal 1.875em/1em "AltGothic", sans-serif;
	padding: .5rem .75rem;
	text-transform: uppercase;
	width: 100%;
}

/* Typography */

h1 {
	display: inline-block;
	font: normal 500 6em/1em "AltGothic", sans-serif;
	letter-spacing: .1em;
	margin: 0px;
	text-transform: uppercase;
}

h2 {
	font: normal 3.5em/1em "AltGothic", sans-serif;
	letter-spacing: .1em;
	position: relative;
	text-transform: uppercase;
}

	h2 span {
		background: #fff;
		padding: 0px 25px;
		position: relative;
			z-index: 10;
	}
	
	h2:after {
		background: #a7a9ac;
		content: "";
		display: block;
		position: absolute;
			left: 50%;
			top: 25px;
		max-width: 650px; width: 100%; height: 3px;
		
		-webkit-transform: translateX(-50%);
			 -moz-transform: translateX(-50%);
			 	-ms-transform: translateX(-50%);
			 			transform: translateX(-50%);
	}
	
@media only screen and (max-width: 40em) {
	h2 {
		font-size: 2.5em;
	}
	
		h2:after {
			top: 17px;
		}
}

h3 {
	font: normal 300 1.75em/1em "AltGothic", sans-serif;
	text-transform: uppercase;
}

h4 {
	font: normal 300 2em/1.5em "AltGothic", sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}

h5 {
	font: normal 700 1.25em/1.3em "Gotham", sans-serif;
	margin: 0px;
}

p {
	font: normal 0.938em/1.4em "Gotham", sans-serif;
	text-align: justify;
}

p a {
	color: #222;
	text-decoration: underline;
}

/* Header */

header {
	margin-top: 275px;
	position: relative;
	z-index: 500;
}

	header .logo {
		background: #fff;
		box-shadow: 0px 2px 10px rgba(0,0,0,.3);
		display: inline-block;
		max-width: 250px; width: 100%;
		
		-webkit-border-radius: 300px 300px 300px 300px;
			 -moz-border-radius: 300px 300px 300px 300px;
			 	-ms-border-radius: 300px 300px 300px 300px;
			 			border-radius: 300px 300px 300px 300px;
	}
	
	header nav {
		margin-top: 166px;
		margin-bottom: 166px;
	}
	
		header nav a {
			border: 3px solid transparent;
			color: #5d5d5e;
			display: inline-block;
			font: normal 1.875em/1em "AltGothic", sans-serif;
			margin: 0px 15px;
			padding: .5rem .75rem;
			text-shadow: 0px 0px 20px #fff;
			text-transform: uppercase;
			
			-webkit-transition: border-color 200ms ease, color 50ms linear;
				 -moz-transition: border-color 200ms ease, color 50ms linear;
				 	-ms-transition: border-color 200ms ease, color 50ms linear;
				 			transition: border-color 200ms ease, color 50ms linear;
		}
		
			header nav a:hover {
				border-color: #d7df21;
				color: #d7df21;
			}
			
			header nav a:focus, header nav a:active, header nav a:visited {
				color: #5d5d5e;
			}
			
.success-message {
	display: none;
	position: absolute;
		top: 50px;
	width: 100%;
	z-index: 9999;
}

	.success-message .success {
		background: #d7df21;
	}
	
		.success-message .success p {
			color: #414141;
			font: normal 700 1.25em/1em "Gotham", sans-serif !important;
			text-align: center !important;
		}
			
/* Featured Beer */

.beer-401-k {
	background: url(../images/featured.png) center top no-repeat;
	
	-webkit-background-size: auto 650px;
}

.beer-5th-keg {
	background: url(../images/5th-keg-background.png) center top no-repeat;
	
	-webkit-background-size: auto 700px;	
}

.beer-broken-tile {
	background: url(../images/broken-tile-pattern.jpg) center top no-repeat;
	
	-webkit-background-size: auto 700px;	
}

.featured {
	margin-bottom: 125px;
	margin-top: 125px;
}

#shop {
	background: #f4f4f5;
	margin-top: 210px;
}

	#shop h2 {
		color: #d7df21;
		margin-top: 75px;
		margin-bottom: 25px;
	}
	
		#shop h2 span {
			background: #f4f4f5;
		}
		
			#shop h2:after {
				background: #d7d521;
			}
			
	#shop .button {
		display: inline-block;
		margin-top: 20px;
		width: auto;
	}

@media only screen and (max-width: 40em) {
	.featured .beer {
		margin-bottom: 100px;
	}
}

.label {
	display: inline-block;
	font: normal 700 1.5em/1em "Gotham", sans-serif;
	letter-spacing: .4em;
	margin-bottom: 45px;
	margin-top: 45px;
	padding: 7px 30px 7px 40px;
	text-transform: uppercase;
}

.descriptors {
	border-top: 2px solid #5d5d5e;
	border-bottom: 2px solid #5d5d5e;
	color: #5d5d5e;
	font: normal 700 1.25em/1em "Gotham", sans-serif;
	margin-top: 70px;
	padding: 25px 0px;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

	.descriptors .tag {
		margin: 0px 40px;
	}
	
		.descriptors .bullet:first-child {
			display: none;
		}
		
@media only screen and (max-width: 40em) {
	.descriptors .bullet {
		display: none;
	}
	
	.descriptors .tag {
		display: block;
		margin: 10px 0px;
	}
}

/* Taproom Menu */

.taproom-menu {
	margin-top: 50px;
}
	
/* Coming Soon */

.coming-soon {
	background: #5e0a1c;
	margin: 200px 0px;
	padding: 50px 0px;
	position: relative;
}

.text-center p {
	text-align: center !important;
}

@media only screen and (max-width: 40em) {
	.coming-soon {
		margin: 100px 0px;
	}
}

	.coming-soon h2 {
		margin-bottom: 25px;
	}
	
	.coming-soon h2, .coming-soon p {
		color: #fff;
	}
	
	.coming-soon h2 span {
		background: #5e0a1c;
	}
	
		.coming-soon h2:after {
			background: #fff;
			max-width: 500px;
		}
	
		.coming-soon p {
			margin: 0px;
		}
		
	.coming-soon .beer {
		position: absolute;
			top: -50px;
	}
	
@media only screen and (max-width: 40em) {
	.coming-soon .beer {
		margin-top: 25px;
		position: relative;
			top: 0px;
	}
}
	
.stats {
	color: #5d5d5e;
	font: normal 300 1.5em/1em "AltGothic", sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}

	.stats .value {
		display: block;
		font: normal 700 1em/1em "Gotham", sans-serif;
		margin-bottom: 20px;
	}
	
.border-right {
	border-right: 2px solid #5d5d5e;
	padding-top: 45px;
}

.pairings {
	color: #5d5e5e;
	padding-top: 45px;
	padding-left: 2rem;
	padding-right: 2rem;
}

	.pairings h4 {
		margin: 0px;
	}
	
	.pairings .pairing {
		font: normal 300 1.1em/1.2em "Gotham", sans-serif;
		letter-spacing: .05em;
		margin-bottom: 15px;
	}
	
.icon {
	display: inline-block;
	margin-bottom: 30px;
	padding: 10px;
	width: 55px; height: 55px;
	
	-webkit-border-radius: 300px 300px 300px 300px;
		 -moz-border-radius: 300px 300px 300px 300px;
		 	-ms-border-radius: 300px 300px 300px 300px;
		 			border-radius: 300px 300px 300px 300px;
}

	.alc-vol {
		line-height: 1.75em;
		padding: 7px;
	}
	
	.ibus {
		line-height: 1.65em;
	}
	
/* About */

.about {
	margin-top: 150px;
}

@media only screen and (max-width: 40em) {
	.about {
		margin-top: 125px;
	}
}

	.about h2 {
		color: #a7a9ac;
		margin-bottom: 75px;
	}
	
		.about h2:after {
			max-width: 500px;
		}
	
	.about p {
		margin: 0px;
	}

.circled {
	-webkit-border-radius: 300px 300px 300px 300px;
		 -moz-border-radius: 300px 300px 300px 300px;
		 	-ms-border-radius: 300px 300px 300px 300px;
		 			border-radius: 300px 300px 300px 300px;
	
	margin-bottom: 20px;
	overflow: hidden;
}

.team-slide-holder {
	position: relative;
	height: 280px;
	
	-webkit-transition: all 250ms ease;
		 -moz-transition: all 250ms ease;
		 	-ms-transition: all 250ms ease;
		 			transition: all 250ms ease;
}

.team-slide {
	opacity: 0;
	position: absolute;
		top: 0px;
		left: 50%;
	max-width: 75rem;width:100%;
	z-index: 1;
	
	-webkit-transform: translateX(-50%);
		 -moz-transform: translateX(-50%);
		 	-ms-transform: translateX(-50%);
		 			transform: translateX(-50%);
	
	-webkit-transition: all 250ms ease;
		 -moz-transition: all 250ms ease;
		 	-ms-transition: all 250ms ease;
		 			transition: all 250ms ease;
}

	.team-slide h2 {
		margin-top: 50px;
	}

	.team-slide.active {
		opacity: 1;
		z-index: 9999;
	}


	.team-slide * {
		-webkit-transition: all 250ms ease;
			 -moz-transition: all 250ms ease;
			  -ms-transition: all 250ms ease;
						transition: all 250ms ease;
	}

.team {
	margin-top: 75px;
	position: relative;
	z-index: 9999;
}

	.team .circled {
		cursor: pointer;
		position: relative;
		bottom: 0px;
		
		-webkit-transition: bottom 200ms ease;
			 -moz-transition: bottom 200ms ease;
			 	-ms-transition: bottom 200ms ease;
			 			transition: bottom 200ms ease;
	}
	
		.team .circled:hover {
			bottom: 5px;
		}

/* Events */

.events {
	margin-top: 210px;
}

@media only screen and (max-width: 40em) {
	.events {
		margin-top: 155px;
	}
}

	.events h2 {
		color: #a7a9ac;
		margin-bottom: 40px;
	}

.event h3 {
	margin-top: 45px;
}


@media only screen and (max-width: 40em) {
	.event {
		margin-bottom: 50px;
	}
}

/* Contact */

.contact {
	background: url(../images/hand.png) right top no-repeat;
	margin-top: 250px;
	
	-webkit-background-size: 45% auto !important;
		 -moz-background-size: 45% auto !important;
		 	-ms-background-size: 45% auto !important;
		 			background-size: 45% auto !important;
}

@media only screen and (max-width: 40em) {
	.contact {
		margin-top: 125px;
	}
}

	.contact h2 {
		color: #a7a9ac;
	}
	
.contact form {
	margin-top: 40px;
}
	
	.contact form input[type='text'], .contact form textarea {
		border: 2px solid #a7a9ac;
		box-shadow: none;
		color: #5d5d5e;
		font: normal 400 1.438em/1em "Gotham", sans-serif;
		height: 55px;
	}
	
	.contact form textarea {
		resize: none;
		height: 125px;
	}
	
	.contact form .button {
		margin-bottom: 40px;
	}
	
.connect h3, .connect a {
	display: inline-block;
}

.connect h3 {
	color: #5d5d5e;
	letter-spacing: .05em;
	position: relative;
		top: 0px;
}

.connect a {
	color: #d7df21 !important;
	font-size: 2em;
	margin-left: 25px;
}
	
@media only screen and (max-width: 40em) {
	.connect h3 {
		display: block;
		text-align: center;
	}
	
	.connect a {
		margin: 0px 10px;
	}
	.contact {
		background: none;
	}
}

/* Age Gate */

#age-gate {
	background: url(../images/featured.png) center top no-repeat;
}

.age {
	background: #fff;
	border: 1px solid #f2f2f2;
	padding: 40px 20px 20px 20px;
	position: absolute;
		top: 100px;
		left: 50%;
	text-align: center;
	max-width: 500px; width: 100%;
	
	-webkit-transform: translateX(-50%);
		 -moz-transform: translateX(-50%);
		 	-ms-transform: translateX(-50%);
		 			transform: translateX(-50%);
}

.no-message {
	display: none;
	padding: 20px 0px 40px 0px;
}

/* Footer */

footer {
	margin-top: 175px;
}

	footer .line {
		background: #d7df21;
		display: block;
		width: 100%; height: 10px;
	}
	
	footer .smaller {
		color: #a7a9ac;
		font: normal 500 10px/1em "Gotham", sans-serif !important;
		margin-bottom: 5px;
		text-transform: lowercase;
	}
	
	footer .logo, footer .phone, footer .city, footer .nominee {
		border-right: 1px solid #a7a9ac;
		color: #a7a9ac;
		display: inline-block;
		font: normal 1.500em/1.1em "AltGothic", sans-serif;
		padding: 20px;
		width: 16%; height: 100px;
		text-transform: uppercase;
		vertical-align: top;
	}
	
	footer .nominee a {
		color: #a7a9ac !important;
	}
	
	footer .copyright {
		border-right: 1px solid #a7a9ac;
		color: #a7a9ac;
		display: inline-block;
		font: normal 1.500em/1.1em "AltGothic", sans-serif;
		padding: 20px;
		text-transform: uppercase;
		width: 34%; height: 100px;
		vertical-align: top;
	}
	
	footer .nominee {
		border: none;
	}
	
	footer .logo .footer-logo {
		display: inline-block;
		width: 100px;
	}
	
@media only screen and (max-width: 40em) {
	footer .logo, footer .phone, footer .city, footer .copyright {
		border: none;
		border-bottom: 1px solid #a7a9ac;
		text-align: center;
		width: 100% !important;
	}
	
	footer .logo .footer-logo {
		width: 200px;
	}
	
		footer .logo {
			height: auto;
		}
	
	footer .nominee {
		border: none;
		text-align: center;
		width: 100%;
	}
}