@import url(icons.css);
/**********************************/
/*
	Colors
*/
/*  
    #ffffff - white
	#fff5e9 - lighest creme
	#ffefd9 - light creme
	#f9e9d2 - content bkg
	#f4e1c3 - creme
	#e0c7a4 - sand
	#d3ab84 - cappuccino
	#b99075 - apps bkg
	
	#f89a42 - butter yellow
	#bc6320 - burnt orange
	#8d4423 - star logo
	
	#699074 - mid bluegreen
	#426653 - mid to dark bluegreen
	#2a4338 - dark bluegreen
		
	#3e5468 - dark grey blue
	#331f0d - darkest brown
*/

/*
	Type
	
	espiritu 300
	espiritu-script 300
	aktiv-grotesk 400, 700
*/

/**********************************/
/*
	HTML/Body
*/

html {
	margin: 0;
	height: 100%;
}

body {
	position: relative; /*Overlay*/
	height: 100%;
	margin: 0;
	padding: 0;
    font-size: 100%;
    font-style: normal;
    font-family: "aktiv-grotesk", helvetica, sans-serif;
    font-weight: 400;
    color: #331f0d;
    background-color: #361e12;
}

/**********************************/
/*
	BGA home
*/
.bga { 
	color: #f89a42;
}

.beer-guide {
	padding: 4%;
	text-align: center;
	background-color: #8d4423;
}

.festival {
	padding: 4%;
	text-align: center;
	background-color: #2a4338;
}

.bga .grid-2col {
	grid-column-gap: 0;
	grid-row-gap: 0;
}

.bga h2 {
	margin: 1em 0 .5em 0;
	font-family: "espiritu-expanded", sans-serif;
	font-size: 150%;
	color: #f89a42;
}
.bga h2 span {
	display: block;
	font-family: "espiritu-script", sans-serif;
	font-size: 100%;
}

.bga .small { margin: 1em 0 1em 0; font-size: 68%; }

.bga [class^="icon-"] { font-size: 20px; }

.bga a.outline {
	border: 1px solid #f89a42;
}

.bga a.outline:link, .bga a.outline:visited {
	color: #f89a42;
	border: 1px solid #f89a42;
	background-color: transparent;
}

.bga a.outline:hover { 
	color: #fff;
	border: 1px solid #bc6320;
	background-color: #bc6320;
}

.bga a.outline:active { 
	color: #fff;
	border: 1px solid #8d4423;
	background-color: #8d4423;
}

/*
	Festival app page
*/
.hero-festival {
	background: linear-gradient(0deg, #2a4338, 50%, #426653);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #2a4338;
    text-shadow: 0 0 2px rgba(0,0,0,.3);
    color: #f89a42;
    text-align: center;
}



/**********************************/
/*
	Alerts
*/
.listing-alert { 
	margin: 0 0 .5em 0;
	padding: 0 0;
	font-size: 0.8750em; /*14*/
	font-weight: 700;
	color: red;
}

.alert {
	margin: 1em 0;
	padding: 1em;
	color: #c00;
	background-color: #f0d5ca;
	border-radius: 5px;
}

/**********************************/
/*
	Buttons
*/

.button-container {
	margin: .5em 0;
	clear: both;
	
}
	.button-container a.button,
	.button-container a.outline { margin: 0 0 .5em 0; }

.button-container > a.button:only-child,
.button-container > a.outline:only-child { margin: 0; }

a.button, a.outline {
	margin: 0 0 .5em 0;
	padding: 8px 16px;
	display: block;
	font-family: "espiritu", georgia, serif;
	text-align: center;
	text-decoration: none;
	border-radius: 50px;
}
	a.inline { margin: 5px 10px 5px 0; width: auto; display: inline-block; }

.button [class^="icon-"],
.outline [class^="icon-"] { 
	padding: 3px 3px 3px 0;
	font-size: 15px;
	vertical-align: middle;
}

a.button:link, a.button:visited {
	color: #fff; 
	background-color: #699074;
	border: 1px solid #699074;
}
a.button:hover {
	color: #fff;
	background-color: #2a4338; 
	border: 1px solid #2a4338;
}
a.button:active {
	color: #fff;
	background-color: #426653;
	border: 1px solid #426653;
}

a.outline:link, a.outline:visited {
	color: #699074;
	border: 1px solid #699074;
	background-color: transparent;
}

a.outline:hover { 
	color: #fff;
	border: 1px solid #2a4338;
	background-color: #2a4338;
}

a.outline:active { 
	color: #fff;
	border: 1px solid #426653;
	background-color: #426653;
}

/**********************************/
/*
	Cards, Flags & Listings
*/

.card {
	position: relative;
	margin: 0 0 1em 0;
	padding: 0;
	text-align: left;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 2px rgba(0,0,0,.2);
}
	.item { padding: .5em 1em; }
	
	a.item-anchor { display: block; border-radius: 5px 5px 0 0; }
	
	a.item-anchor:only-child { border-radius: 5px; }
	
	a.item-anchor:only-child:hover { border-radius: 5px; }
	
	a.item-anchor:link { color: #699074; background-color: transparent; }
	a.item-anchor:visited { color: #699074; background-color: transparent; }
	a.item-anchor:hover { color: #fff; background-color: #699074; }
	a.item-anchor:active { color: #fff; background-color: #426653; }
	
	.item-divider a:link { color: #699074; }
	.item-divider a:visited { color: #699074; }
	.item-divider a:hover { color: #f89a42; }
	.item-divider a:active { color: #426653; }

	.item-divider {
		padding: .5em 1em;
		text-align: right;
	}
		.item-divider [class^="icon-"] {
			font-size: 26px;
			margin: 0 0 1em 1px;
			padding: 0;
			color: #b99075;
			vertical-align: top;
		}
		
	.item-image {
		position: relative;
		text-align: center;
	}
		.item-image img { border-radius: 4px 4px 0 0; }
			
	.listing-heading { 
		margin: 0 0 0 0;
		padding: .3em 0 .3em 0; 
		font-family: "espiritu", georgia, serif;
		font-size: 1.125em; /*18*/
		line-height: 1.2;
	}
	.listing-destination { 
		margin: 0 0 0 0;
		padding: 0 0 .3em 0;
		font-size: 0.7500em;
		color: #b99075;
	}
	.listing-rating { 
		padding: 0 0 .3em 0; 
		font-size: 0.7500em;
		text-transform: uppercase;
	}
	.listing-description { 
		padding: .2em 0 0 0;
		font-size: 0.8125em;
	}

/*
	List view
*/
.list-view .card {
	display: grid;
	grid-template-columns: 180px auto;
	grid-template-rows: repeat(1, 1fr);
}

.list-view .card .item-image {
	grid-row: 1 / 3;
	border-top: 5px solid #fff;
	border-left: 5px solid #fff;
	border-bottom: 5px solid #fff;
	border-radius: 4px 0 0 4px;
}
	.list-view .card .item-image img { 
		margin: 0;
		padding: 0;
		border-radius: 4px 0 0 4px;
	}

.list-view .card .item-divider { 
	border: none;
}
	.list-view .card .item-divider:last-child {
		
	}

/*
	Flags
*/
.flag {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 6px 10px 5px 10px;
	font-size: 0.7500em; /*12*/
	color: #f4e1c3;
	border-radius: 4px 0 4px 0;
	border-right: 1px solid #f9e9d2;
	border-bottom: 1px solid #f9e9d2;
}
	.list-view .flag { border-radius: 4px 0 5px 0; }
	
	.flag [class^="icon-"] {
		font-size: 10px;
		padding: 0 3px 0 0;
	}
	
	.flag a { text-decoration: none; }
	
.flag-pub {      background-color: #3e5468; }
.flag-brewery {  background-color: #426653; }
.flag-warning {  background-color: #f89a42; }
.flag-alert {    background-color: #dd0000; }

/*
	Country Flags
*/
.country-flag {
	display: inline-block;
	margin: 0 4px 0 0;
	padding: 0 0;
	width: 26px;
	height: 26px;
	border-radius: 50px;
	box-shadow: 0 0 1px rgba(0,0,0,.6);
}

.filter-list .country-flag {
	width: 11px;
	height: 11px;
	margin: 0 6px 0 1px;
}

.bavaria { background: url('../graphics/flag-bavaria.png') 0 0 / 100% no-repeat; }
.belgium { background: url('../graphics/flag-belgium.png') 0 0 / 100% no-repeat; }
.czech { background: url('../graphics/flag-czech.png') 0 0 / 100% no-repeat; }
.finland { background: url('../graphics/flag-finland.png') 0 0 / 100% no-repeat; }
.franconia { background: url('../graphics/flag-franconia.png') 0 0 / 100% no-repeat; }
.italy { background: url('../graphics/flag-italy.png') 0 0 / 100% no-repeat; }
.sweden { background: url('../graphics/flag-sweden.png') 0 0 / 100% no-repeat; }
.uk { background: url('../graphics/flag-uk.png') 0 0 / 100% no-repeat; }
.usa { background: url('../graphics/flag-usa.png') 0 0 / 100% no-repeat; }

/**********************************/
/*
	Detail Pages
*/

dl.quote {
	margin: 1em 0;
	padding: 1em;
	border: 5px solid #f4e1c3;
	background-color: #fff5e9;
	border-radius: 5px;
}

.quote dt {
	margin: 0 0 .3em 0;
	padding: 0 0 0 0;
	font-family: "espiritu-script", georgia, serif;
	font-size: 1.6em;
}

.quote dd {
	margin: 0 0 0 0;
	padding: 0 0 0 1em;
}

/**********************************/
/*
	Filters
*/
/*
	destination-list selected
	filter-list selected
	h-filter-list selected
	outline button selected
	
	#699074 - mid bluegreen
	#426653 - mid to dark bluegreen
	#2a4338 - dark bluegreen
*/

.filter {
	position: relative;
}

.filters h2 {
	border-bottom: 1px solid #e0c7a4;
}

.filter .grid-2col { margin: 0 0 0 0; }

p.eyebrow { color: #b99075; }
p.eyebrow span.icon-syphon { font-size: 12px; }

.results {
	margin: 0 0;
	font-size: 90%;
	color: #b99075;
}

a.filter-toggler {
	display: block;
	margin: .2em 0;
	padding: .3em 0 .3em 0;
	text-align: center;
	border-radius: 50px;
}

a.filter-toggler:link {
	color: #699074;
	background-color: transparent;
	border: 1px solid #699074;
}

a.filter-toggler:visited {
	color: #699074;
	background-color: transparent;
	border: 1px solid #699074;
}

a.filter-toggler:hover {
	color: #fff;
	background-color: #2a4338;
	border: 1px solid #2a4338;
}

a.filter-toggler:active {
	color: #fff;
	background-color: #426653;
	border: 1px solid #426653;
}

.filter a.on:link,
.filter a.on:visited,
.filter a.on:hover,
.filter a.on:active {
	color: #fff;
	background-color: #2a4338;
	border: 1px solid #2a4338;
}

/*
	Filter dropdowns
*/
.filter .dropdown {
	/*position: absolute;
	top: 36px;
	left: 0;
	width: 212px;
	z-index: 100;*/
	margin: 0 0 1em 0;
	padding: 1em;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 0 3px rgba(0,0,0,.3);
}

.dropdown .filter-list,
.dropdown .h-filter-list {
	height: 8em;
	overflow: auto;
}

.filter .icon-notch-up,
.filter .icon-notch-down,
.filter .icon-syphon { font-size: 10px; }

.filter-header {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
	.filter-title {
		grid-column: 1 / 4;
		font-size: 95%;
	}
	
	.close-filter { 
		text-align: right;
	}
	
	.filter-reset-button {
		margin: 0 0 1em 0;
		padding: .5em 0 0 0;
		font-size: 80%;
	}
		.filter-reset-button a {
			display: inline-block;
			text-transform: uppercase;
		}
	

/* 
	Lists in Filters
*/
.destination-list,
.filter-list,
.h-filter-list,
.filter-buttons {
	list-style: none;
}
	.destination-list li,
	.filter-list li,
	.h-filter-list li,
	.filter-buttons li {
		list-style-type: none;
	}

.destination-list {
	margin: 0 0 .5em 0;
	padding: 0 0 .4em 0;
	
}
	.destination-list li {
		padding: 0 0 .2em 0;
		font-size: 0.9375em; /*15*/
	}
	
.filter-list {
	margin: 0 0 .5em 0;
	padding: 0 0 .5em 0;
}
	.filter-list li {
		margin: 0 0 0 0;
		padding: 0 0 .2em 0;
		font-size: 0.8125em; /*13*/
	}
	
	.filter-list li [class^="icon-"] {
		margin: 0 5px 0 0;
		font-size: 13px;
	}

.h-filter-list {
	margin: 0 0 .5em 0;
	padding: 0 0 .5em 0;
}
	.h-filter-list li {
		display: inline-block;
		margin: 0 0 0 0;
		padding: 0 0 .2em 0;
		font-size: 0.8125em; /*13*/
	}
		.h-filter-list a {
			display: block;
			margin: 0 5px 5px 0;
			padding: 3px 5px;
			border-radius: 3px;
		}
		.h-filter-list a:link { border: 1px solid #699074; }
		.h-filter-list a:visited { border: 1px solid #699074; }
		.h-filter-list a:hover { border: 1px solid #f89a42; }
		.h-filter-list a:active { border: 1px solid #426653; }


.filter-buttons {
	margin: 0 0 1em 0;
	padding: 0 0 0 0;
	font-size: 80%;
}
	.filter-buttons li {
		display: inline;
	}
	
	.filter-buttons a {
		margin: 2px 0;
		padding: 2px 7px;
		display: inline-block;
		border-radius: 10px;
	}
	
	.filter-buttons a:link {    color: #699074; border: 1px solid #699074; }
	.filter-buttons a:visited { color: #699074; border: 1px solid #699074; }
	.filter-buttons a:hover {   color: #f89a42; border: 1px solid #f89a42; }
	.filter-buttons a:active {  color: #426653; border: 1px solid #426653; }

a.disabled:link,
a.disabled:visited,
a.disabled:hover,
a.disabled:active {
	color: #ccc;
	pointer-events: none;
}

a.selected { font-weight: 700; }

a.selected:link,
a.selected:visited,
a.selected:hover,
a.selected:active { color: #2a4338; }

.h-filter-list a.selected {
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 3px 5px;
	background-color: #2a4338;
	border: 1px solid #2a4338;
	border-radius: 2px;
}	
	.h-filter-list a.selected:link { color: #fff; }
	.h-filter-list a.selected:visited { color: #fff; }
	.h-filter-list a.selected:hover { color: #fff; background-color: #f89a42; border: 1px solid #f89a42; }
	.h-filter-list a.selected:active { color: #fff; }


a.outline.selected:link,
a.outline.selected:visited {
	color: #fff; 
	background-color: #699074; 
	border: 1px solid #699074;
}

a.outline.selected:hover {
	color: #fff; 
	background-color: #2a4338; 
	border: 1px solid #2a4338;
}
a.outline.selected:active {
	color: #fff; 
	background-color: #426653; 
	border: 1px solid #426653;
}

/**********************************/
/*
	Forms
*/

form p.error, form div.error {
	margin: 0 0 1.5em 0;
}
form div.error {
	padding: .5em;
}
form .hint {
	margin: 0 0 .5em 0;
	padding: 0;
}

label {
	margin: .8em 0 0 0;
	display: block;
	font-size: 90%;
	line-height: 1;
}

.standard p { font-size: 1em; }
label + p { margin-top: 1em; }

input, 
select {
	width: 98%;
}

textarea {
	width: 100%;
}

input, 
select, 
textarea {
	margin: .2em 0 .8em 0;
	padding: .5em;
	border-radius: 4px;
}

input.radio, 
input.checkbox,
label.radio, 
label.checkbox {
	width: auto;	
}

table input.radio, 
table label.radio {
	margin: 0 3px;
	padding: 0;
	display: inline-block;
	vertical-align: middle;	
}

.checkbox-container { margin: 1em 0 1em 0; }
.checkbox-container label { font-size: 90%; margin: 0 0 0 0; padding: 0; }

label.checkbox {
    padding-left: 15px;
    text-indent: -15px;
	display: block;
	line-height: 1.6em;
	
}
input.checkbox {
	margin: 0;
	padding: 0;
	width: 13px;
    height: 13px;
    vertical-align: bottom;
    position: relative;
    top: -5px;
    *overflow: hidden;
}

table label.checkbox {
	margin-top: -5px;
	display: inline-block;
}


input[type="text"], 
input[type="password"],
input[type="search"], 
textarea, 
select {
	border: 1px solid #c1c1b2; /*30% of 330*/
	background-color: #fff;
	vertical-align: top;
	outline: none;
}

input:focus, select:focus, textarea:focus, input.amount-input:focus {
	border: 1px solid #7f99b2; /*50% 069 Blue*/
	background-color: #fdfdfc;	/*1% 069 333300*/
	box-shadow: 0 0 5px #ddd;
}

input:-webkit-autofill { /*Chrome autofill yellow color correction*/
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}


.simple-form {
	padding: .5em 0 1em 0;
	text-align: center;
}
	.simple-form ul, .simple-form li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.simple-form li {
		display: inline-block;
	}
	.simple-form li.simple-form-label {
		display: block;
		margin: 0 0 .5em 0;
		color: #777;
		font-size: .9375em;
	}
	.simple-form input[type="text"], 
	.simple-form input[type="search"], 
	.simple-form input[type="submit"] {
		margin: 0;
		vertical-align: middle;
		border: none;
		outline: none;
		background-color: #fff;
	}
	.simple-form input[type="text"], 
	.simple-form input[type="search"] {
		padding: 6px;
		width: 180px;
		border-radius: 5px 0 0 5px;
		color: #3c574a;
	}
	.simple-form input[type="submit"] {
		padding: 6px 10px;
		font-family: "espiritu", georgia, serif;
		color: #fff;
		background-color: #3c574a;
		border-radius: 0 5px 5px 0;
	}
	.simple-form input[type="submit"]:hover { color: #fff; background-color: #5a7260; }


/**********************************/
/*
	Grids & Flexbox
*/

.m-flex-grid > *,
.flex-grid > * {
    box-sizing: border-box;
}

/* Simple Flex Grid, Display on mobile */
.m-flex-grid {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 0 -1em;
}
.m-col-3 { flex: 3;}
.m-col-2 { flex: 2;}
.m-col   { flex: 1;}

.m-col-3,
.m-col-2,
.m-col {
	margin: 0 1em;
}

/* Simple Flex Grid, Display on Larger Screens */
@media screen and (min-width: 58em) {
	.content-container,
	.flex-grid {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		margin: 0 -1em;
	}
	
	.header-container { margin: 0; }
	
	.flex-grid-center {
		align-items: center;
	}
	
	.col-3, .col-2, .col,
	.content-main, .content-side { padding: 0 1em; }
	
	.col-3 { flex: 3; }
	.col-2 { flex: 2; }
	.col { flex: 1; }
	
	.content-main { flex: 3; }
	.content-side { flex: 1; }
}


/* Grids to remain on mobile */
.grid-2col-m,
.grid-3col-m,
.grid-4col-m {
	display: grid;
	grid-column-gap: 1em;
	grid-row-gap: 1em;
	margin: 0 0 0 0;
}
.grid-2col-m { grid-template-columns: repeat(2, 1fr); }
.grid-3col-m { grid-template-columns: repeat(3, 1fr); }
.grid-4col-m { grid-template-columns: repeat(4, 1fr); }

.c-span-1-3-m { grid-column: 1 / 3; }
.c-span-1-4-m { grid-column: 1 / 4; }
.c-span-2-4-m { grid-column: 2 / 4; }

/* Grid Columns and Rows, Display only on Larger Screens 800 px */
@media screen and (min-width: 50em) {
	.grid-2col,
	.grid-3col,
	.grid-4col,
	.grid-5col,
	.grid-6col,
	.grid-7col {
		display: grid;
		grid-column-gap: 1em;
		grid-row-gap: 1em;
		margin: 0 0 0 0;
		/*grid-auto-rows: minmax(100px, auto);*/ /*Placeholders*/
	}
	
	.grid-6col .grid-2col { margin-bottom: 0; }
	
	.grid-2col { grid-template-columns: repeat(2, 1fr); }
	.grid-3col { grid-template-columns: repeat(3, 1fr); }
	.grid-4col { grid-template-columns: repeat(4, 1fr); }
	.grid-5col { grid-template-columns: repeat(5, 1fr); }
	.grid-6col { grid-template-columns: repeat(6, 1fr); }
	.grid-7col { grid-template-columns: repeat(7, 1fr); }
	
	.c-span-1-3 { grid-column: 1 / 3; }
	.c-span-1-4 { grid-column: 1 / 4; }
	.c-span-1-5 { grid-column: 1 / 5; }
	.c-span-2-4 { grid-column: 2 / 4; }
	.c-span-2-5 { grid-column: 2 / 5; }
	.c-span-3-4 { grid-column: 3 / 4; }
	.c-span-3-5 { grid-column: 3 / 5; }
	.c-span-3-6 { grid-column: 3 / 6; }
	.c-span-4-6 { grid-column: 4 / 6; }
	.c-span-5-7 { grid-column: 5 / 7; }
	
	.r-span-1-3 { grid-row: 1 / 3; } /*Vertically*/
	.r-span-1-4 { grid-row: 1 / 4; } /*Vertically*/
	.r-span-1-5 { grid-row: 1 / 5; } /*Vertically*/
	.r-span-2-4 { grid-row: 2 / 4; } /*Vertically*/
	.r-span-2-5 { grid-row: 2 / 5; } /*Vertically*/
	
	.grid-end { align-self: flex-end;}
	
	div.spacer { margin-bottom: 1em; }
	
	/* Placeholders for testing */
	/*
	.grid-2col > * { 
		background-color: #eee;
	}
	.grid-3col > * { 
		background-color: #eee;
	}
	.grid-4col > * { 
		background-color: #eee;
	}
	.grid-6col > * { 
		background-color: #eee;
	}
	.grid-7col > * { 
		background-color: #eee;
	}
	*/
}


/**********************************/
/*
	Layout
*/
	
.header-container,
.container {
    margin: 0 auto; /* Centers */
	max-width: 70em; /* 1120px */
}

.container {
	padding: 1em;
}

section {
	margin: 0 0;
	padding: 2% 1em;
}

div.content,
.footer-container { /* For one column content, centered */
    margin: 0 auto;
    padding: 1em;
    max-width: 50em; /* 800px */
}

.content-detail {
	margin: 0 auto;
	padding: 1em;
	max-width: 42em;
}

.search-form .search-input {
	width: 240px;
	background-color: #fff;
	box-shadow: none;
	-webkit-appearance: none;
}


/**********************************/
/*
	Header
*/
header {	
	padding: 1em;
	color: #fff;
	background-color: #361e12;
}

	header a:link { color: #fff; }
	header a:visited { color: #fff; }
	header a:hover { color: #82973f; }
	header a:active { color: #4f7842; }
	
	header a:link.logo-location { color: #f89a42; }
	header a:visited.logo-location { color: #f89a42; }
	header a:hover.logo-location { color: #82973f; }
	header a:active.logo-location { color: #4f7842; }

	.header-container {
		text-align: center;
	}
	
		.logo {
			padding: .1em 0 .1em 0;
			font-family: "espiritu", georgia, serif;
			font-size: 2.5000em; /*40*/
			line-height: 1em;
			font-weight: 300;
			text-transform: uppercase;
			text-align: center;
		}
			.logo .icon-star-logo { 
				font-size: 40px; 
				color: #8d4423;
			}
		
		.logo span.tagline {
			font-family: "espiritu-script", georgia, serif;
			font-weight: 300;
			font-size: 1em;
			color: #f89a42;
			text-transform: none;
			vertical-align: middle;
		}


/**********************************/
/*
	Footer 
*/

footer {
	text-align: center;
	background-color: transparent;
}

footer h3 {
	margin: 1em 0 0 0;
	padding: 0 0 0 0;
	font-family: "espiritu-script", georgia, serif;
	font-size: 1.500em; /*24*/
	color: #f4e1c3;
}

footer li {
	margin: 1em 0 .5em 0;
	padding: 0 0 0 0;
	font-size: .8750em; /*15*/
}

footer p {
	margin-top: 1em;
	font-size: 90%;
	color: #e0c7a4;
}

footer .copyright {
    margin: 1em 0;
    color: #e0c7a4;
}

footer a:link { color: #f89a42; }
footer a:visited { color: #f89a42; }
footer a:hover { color: #bc6320; }
footer a:active { color: #683b1b; }

/**********************************/
/*
	Images
*/

img { border: 0; max-width: 100%; }

.img-app {
	width: 120px;
	border-radius: 10px;
}

.img-thumbnail {
	margin: 0 0 1em 0;
	width: 90px;
	border-radius: 5px;
	border: 2px solid #fff;
}
	.img-thumbnail:hover {
		border: 2px solid #ffefd9;
		box-shadow: 0 0 3px rgba(0,0,0,.3);
	}

.img-separator {
	margin: 1% 0 1% 0;
}

.img-app-screengrab {
	width: 150px;
	margin: 0 0 1em 0;
}

.img-beer {
	width: 300px;
	border-radius: 2px;
	border: 10px solid #fff;
	box-shadow: 0 0 5px rgba(0,0,0,.3);
}

.img-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50px;
	box-shadow: 0 0 5px rgba(0,0,0,.3);
}

/**********************************/
/*
	Links
*/
a { 
	text-decoration: none;
	-webkit-transition: all 0.5s;
	   -moz-transition: all 0.5s;
			transition: all 0.5s;
}

a:link { color: #699074; }
a:visited { color: #699074; }
a:hover { color: #f89a42; }
a:active { color: #426653; }

/**********************************/
/*
	Lists
*/

dl, menu, ol, ul { margin: 0 0 1em 0; }

dt { margin: 1em 0 0 0; font-weight: 700; }

dd { margin: .3em 0 .3em 0; }

menu, ol, ul { padding: 0 0 0 1.5em; }

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
}

ol li { font-size: 1rem; }

ul { list-style-type: circle; }

li { line-height: 1.3; padding-bottom: 5px; }

li li { font-size: 1rem; }

h3 + ul { margin-top: 1em; }

ul.v-list, ul.v-list li,
ul.h-list, ul.h-list li,
ul.icons, ul.icons li { 
	margin: 0;
	padding: 0;
	list-style: none;
}
	ul.h-list li {
		display: inline-block;
		padding: 0 0 3px 3px;
	}
		ul.h-list li a,
		ul.v-list li a,
		ul.icons li a {
			display: block;
			margin: 0;
			padding: 0;
		}
	ul.icons li { 
		display: inline-block;
		margin: 0 1em 1em 0;
		padding: .5em;
		font-size: 1em;
		line-height: 1;
	}
	ul.icons li span {
		padding: 0 0 0 0;
		vertical-align: middle;
		display: inline-block;
	}
	
footer ul.h-list li a {
	padding: 0 3px;
}

.b-list {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
}

.b-list li {
	padding: .4em 0;
	font-family: "espiritu", sans-serif;
	font-size: 115%;
	text-align: left;
	border-bottom: 1px solid #f89a42;
}

.b-list li:first-child {
	border-top: 1px solid #f89a42;
}


/*
	List of breadcrumbs on detail page
*/
ul.breadcrumb {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
}
	ul.breadcrumb li {
		display: inline;
		font-size: .7500em;
		color: #d3ab84;
	}
	ul.breadcrumb li:after {
		content: " /";
	}

/*
	Detail Links
*/

ul.detail-links {
	margin: .8em 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
}
	ul.detail-links li {
		display: inline;
		margin: 0;
		padding: 0 8px 0 5px;
		font-size: .8750em;
		border-right: 1px solid #d3ab84;
	}
	ul.detail-links li:first-child {
		padding: 0 8px 0 0;
	}
	ul.detail-links li:last-child {
		border-right: none;
	}
	ul.detail-links [class^="icon-"] {
		padding: 0 3px 0 0;
		font-size: 14px;
	}

/*
	List of attributes on detail page
*/
dl.detail-list dt:before {
	content: "";
	display: block;
	padding: 0 0 .5em 0;
}

dl.detail-list dt,
dl.detail-list dd {
	display: inline;
	font-size: 90%;
}

dl.detail-list dt {
	margin: 0 0 0 0;
}

/*
	List of Icons on detail page
*/
ul.list-icons {
	margin: 0 0 0 0;
	padding: .6em 0 .6em 0;
}

ul.list-icons, ul.list-icons li {
	list-style: none;
	list-style-type: none;
}
	ul.list-icons li {
		display: inline;
		margin: 0 7px 0 0;
		padding: 0 0 0 0;
		line-height: 1.2;
		color: #b99075;
	}
	
	.list-icons [class^="icon-"] {
		padding: 0 0 0 0;
		font-size: 20px;
		vertical-align: middle;
	}

/*
	Labels for lists
*/

li.label {
	display: inline-block;
	margin: 0 8px 0 0;
	padding: 2px 0;
	text-transform: uppercase;
	font-size: 80%;
	letter-spacing: 1px;
	border: none;
}

/*
	Pagination
*/
ul.pagination {
	margin: 1em 0 0 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
	text-align: center;
}
	
	.pagination li {
		display: inline;
		list-style-type: none;
	}
		
	.pagination li.on {
		color: #fff;
		background-color: #699074;
	}
	.pagination li.on, .pagination a {
		margin: 0 1px 0 1px;
		padding: .3em .6em;
		border-radius: 4px;
	}	
	.pagination a:link {    color: #333; background-color: #e0c7a4; }
	.pagination a:visited { color: #333; background-color: #e0c7a4; }
	.pagination a:hover {   color: #036; background-color: #699074; }
	.pagination a:active {  color: #036; background-color: #426653; }
	
/*
	Sort
*/
ul.sort {
	display: flex;
	flex-flow: row wrap;
	margin: 1em 0;
	padding: 0;
	list-style-type: none;
	list-style: none;
	
}
	ul.sort li {
		margin: 0;
		padding: 0;
		list-style: none;
		list-style-type: none;
		border-right: 1px solid #e0c7a4;
	}
	ul.sort li.on { 
		font-weight: 700;
	}
	
	ul.sort li.on a:link {    color: #b99075; }
	ul.sort li.on a:visited { color: #b99075; }
	ul.sort li.on a:hover {   color: #b99075; }
	ul.sort li.on a:active {  color: #b99075; }
	
	ul.sort [class^="icon-"] { font-size: 11px; }
	
	ul.sort a { 
		display: block;
		font-size: 80%; 
		padding: 0 .6em 0 .6em;
	}
	
	ul.sort a:link {    color: #d3ab84; }
	ul.sort a:visited { color: #d3ab84; }
	ul.sort a:hover {   color: #699074; }
	ul.sort a:active {  color: #426653; }

ul.sort li:first-child a { padding-left: 0; }
ul.sort li:last-child { border: none; }


/**********************************/
/*
	Navigation 
*/

.nav-container {
	margin: -1em 0 0 0;
	text-align: center;
	background-color: #361e12;
}
	.nav, .nav li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.nav li { display: inline-block; position: relative; }
	
	.nav li li { padding: 0; line-height: 1; }
	
	.nav [class^="icon-"] {
		padding: 0 4px 0 0;
		font-size: 15px;
		display: none;
	}
	
	.nav .icon-search,
	.nav .icon-notch-down,
	.nav .icon-notch-up { display: inline; }
	
	.nav .icon-notch-down, .nav .icon-notch-up,
	.nav .icon-plus, .nav .icon-minus { font-size: 10px; }
	.nav .icon-search { font-size: 14px; }
	
	.search-text { display: none; }
	
	/* Dropdown */
	.nav .dropdown {
		display: none;
		position: absolute;
		top: 35px; 
		left: 0;
		margin: 0; 
		padding: 0;
		width: auto;
		text-align: left;
		z-index: 1000;
		box-shadow: 2px 4px 4px rgba(0,0,0,.3);
	}
	
	/* Using JS instead of CSS */
	/*.nav li:hover > .dropdown { display: block; }*/
	
	.nav a.on:link,
	.nav a.on:visited,
	.nav a.on:hover,
	.nav a.on:active {
		color: #fff;
		background-color: #8d4423;
	}
	
	.nav a, .nav .dropdown a {
		display: block;
		padding: 7px 10px 10px 10px;
		font-family: "espiritu", georgia, serif;
		font-size: 0.8750em; /*14*/
		text-decoration: none;
	}
	
	.nav .dropdown a {
		width: 10em;
		padding: 6px 10px;	
	}
	
	.nav .dropdown { background-color: #8d4423; }
	
	.nav a:link { color: #ffffff; border: none; }
	.nav a:visited { color: #ffffff; }
	.nav a:hover { color: #8d4423; background-color: #f89a42; }
	.nav a:active { background-color: #683b1b; }
	
	.nav .dropdown a:link { color: #e0c7a4; background-color: #8d4423; }
	.nav .dropdown a:visited { color: #e0c7a4; background-color: #8d4423; }
	.nav .dropdown a:hover { color: #8d4423; background-color: #f89a42; }
	.nav .dropdown a:active { background-color: #683b1b; }
	
	.nav .dropdown a.on { 
		background: url('../graphics/check.png') no-repeat;
		background-position: right center;
		background-size: 20px 10px;
	}
	.nav .dropdown a.on:link { color: #e0c7a4; background-color: #50301c; }
	.nav .dropdown a.on:visited { color: #e0c7a4; background-color: #50301c; }
	.nav .dropdown a.on:hover { color: #e0c7a4; background-color: #50301c; }
	.nav .dropdown a.on:active { color: #e0c7a4; background-color: #50301c; }
		

.nav li.label {
	display: block;
	padding: 5px 10px;
	font-size: 0.8750em; /*14*/
	font-weight: 700;
	background-color: #fff;
}
	.nav li.label ul {
		margin: 0;
		padding: 0 0;
	}
	.nav li.label li {
		margin: 0 0 0 0;
		padding: 0 0;
		text-transform: capitalize;
		font-size: 100%;
		letter-spacing: normal;
		border: none;
	}
	

.close-menu .icon-close { font-size: 20px; vertical-align: middle; }

.slide-menu-left { left: -200px }

body.sml-open .slide-menu-left { left: 0 }

/**********************************/
/*
	Posts
*/

.post {
	margin: 0 0 1em 0;
	padding: 1em 0 1em 0;
	border-bottom: 1px solid #e0c7a4;
}
	.post:last-child { border: none; }
	
.post-heading {
	margin: 0 0 .2em 0;
	font-family: "espiritu", georgia, serif;
	font-size: 120%;
	font-weight: 600;
}
.post-date {
	margin: 0 0 .5em 0;
	font-size: 80%;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #d3ab84;
}
.post-author {
	margin: 0 0 .9em 0;
	font-size: 80%;
	color: #b99075;
}
.post-description {
	font-size: 110%;
}

.post-image {
	text-align: right;
}

/**********************************/
/*
	Tabs
*/

ul.tabs {
	margin: 1em 0;
	padding: 0 0;
	list-style: none;
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: right;
}
	ul.tabs li {
		display: inline;
		text-align: right;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		list-style-type: none;
		font-size: 1em; /*16*/
		align-items: right;
	}
		ul.tabs a {
			padding: 0 0 0 1.3em;
		}
		
		ul.tabs [class^="icon-"] {
			font-size: 18px;
		}
				
		ul.tabs a:link { color: #e0c7a4; }
		ul.tabs a:visited { color: #e0c7a4; }
		ul.tabs a:hover { color: #699074; }
		ul.tabs a:active { color: #426653; }
		
		ul.tabs a.on:link { color: #b99075; }
		ul.tabs a.on:visited { color: #b99075; }
		ul.tabs a.on:hover { color: #b99075; }
		ul.tabs a.on:active { color: #b99075; }

.tabs-content {
	margin: 0 0 0 0;
}

/**********************************/
/*
	Typography
*/

/*
    font-family: "espiritu", georgia, serif;
    font-style: normal;
    font-weight: 300;
	
	If 16px is the base:
	
	font-size: 3.0000em; 48
	font-size: 2.5000em; 40
	font-size: 2.2500em; 36
	font-size: 1.8750em; 30
	font-size: 1.7500em; 28
	font-size: 1.6250em; 26
	font-size: 1.5000em; 24
	font-size: 1.3125em; 21
	font-size: 1.1250em; 18
	font-size: 1.0000em; 16
	font-size: 0.9375em; 15
	font-size: 0.8750em; 14
	font-size: 0.8125em; 13
	font-size: 0.7500em; 12
	font-size: 0.6875em; 11
	font-size: 0.6250em; 10
	font-size: 0.5625em; 9
	font-size: 0.5000em; 8
*/

h1, h2, h3, h4, h5, h6 {
    font-family: "espiritu", georgia, serif;
    font-weight: 300;
    line-height: 1.2em;
}

h1, h2, h3, h4, h5, h6 { color: #331f0d; }

h1 {
	margin: .1875em 0;
    padding: 0 0 0 0;
    font-size: 1.7500em; /*28*/
}

h2 { 
    margin: .15em 0;
    padding: 0 0 0 0;
    font-size: 1.500em; /*24*/
}

h3, h4, h5, h6 { 
    margin: .13em 0;
    padding: 0 0 0 0;
    font-size: 1.3125em; /*21*/
}

.eyebrow {
	text-transform: uppercase;
	font-size: 1em; /*16*/
}

p.eyebrow {
	text-transform: uppercase;
	font-size: 0.8750em; /*14*/
}

.lede {
	font-size: 140%;
	line-height: 1.3em;
}

p {
    margin: .5em 0 1em 0;
    padding: 0 0 0 0;
    font-size: 1.0625em; /*17*/
    line-height: 1.3750em; /*22*/
}

.hero .subheading,
.subheading {
    margin: .2em 0 .3em 0;
    padding: 0 0 0 0;
    font-family: "espiritu-script", georgia, serif;
    font-weight: 300;
    font-size: 3em; /*32*/
    line-height: 1em;
}

.disclaimer {
	margin: .5em 0;
    padding: 0 0 0 0;
	font-size: 0.8125em; /*13*/
	color: #d3ab84;
}

.copyright, .caption {
    margin: .5em 0;
    font-size: 0.8125em; /*13*/
}



/**********************************/
/*
	Section Classes
*/

section.hero {
	/*background: #945a42 url('../graphics/bkg-hero.png') repeat;*/
	/*background-size: 57px 66px;*/
	color: #fff;
	background-color: #b99075;
	background: linear-gradient(0deg, #b99075, 50%, #8d4423);
    background-repeat: no-repeat;
    text-shadow: 0 0 3px rgba(0,0,0,.3);
}
	section.hero h1, section.hero h2 { color: #f89a42; }
	
	.hero h1,
	.hero h2 {
		font-family: "espiritu", georgia, serif;
		font-weight: 300;
		font-size: 2.250em; /*36*/
	}
	
	.hero > h1 { margin: 0; padding: 0; }
	
	.hero a:link { color: #f9e9d2; }
	.hero a:visited { color: #f9e9d2; }
	.hero a:hover { color: #f89a42; }
	.hero a:active { color: #331f0d; }

section.content {
	background: linear-gradient(0deg, #f9e9d2, 50%, #fff5e9);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #f9e9d2;
}

section.locations {
	background-color: #edc4a2;
}
	section.locations h2 { color: #945a42; }
	section.locations p { color: #361e12; }

.apps {	background-color: #b99075; }
section.apps p.disclaimer { color: #ffefd9; }


/**********************************/
/*
	Utility Classes
*/

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

.small { font-size: 90%; }

strong { font-weight: 700; }

.separator { margin: 10% 0; }
.icons-separator { margin: 6% 0 5% 0; font-size: 80%; color: #c69b6d; }

video { display: block; }

.hide { display: none; }
.show { display: initial; }

.back {
	display: block;
	margin: 1em 0 1em 0;
	padding: 0 0 0 0;
	font-size: .8350em;
}
	.back [class^="icon-"] { font-size: 9px; }
	.back:first-child { margin-top: 0; }

a.info { margin: 0 0 0 5px; }
a.info:link { color: #69a2cc; }
a.info:visited { color: #69a2cc; }
a.info:hover { color: #1c75b7; }
a.info:active { color: #15598c; }

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #e0c7a4;
    margin: 3% 0;
    padding: 0;
}

.map {
	border: 1px solid #ffefd9;
	background-color: #fff;
	border-radius: 10px;
	padding: 5% 0;
	width: 100%;
	height: 100%;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #e0c7a4;
	box-shadow: 0 0 2px rgba(0,0,0,.2);
}

/**********************************/
/*
	Hidden by default
*/

.search-container {
   display: none;
}


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

/******************************************
	Starting at 50em (800px)
*/
@media only screen and (min-width: 50em) {
    	
	button.nav-toggler,
	.dropdown,
	li.nav-close {
		display: none; /* Hide on wide screens */
	}
	
	.card .item-image { width: auto; height: auto; max-height: 120px; overflow: hidden;  }
	
	.content-detail .card .item-image { max-height: none; overflow: visible; }
	.content-detail .card .item-image img { border-top: 16px solid #fff; }
	
}


/******************************************
	Up to 50em (800px)
*/
@media only screen and (max-width: 50em) {
     
    .logo {
		margin-left: 40px; /* Accommodate menu icon */
		font-size: 1.1250em; /*18*/
	}
	
	.logo .icon-star-logo { 
		font-size: 18px; 
	}
	
	.simple-form {
		padding: .5em 0 0 20px;
		text-align: left;
	}
	
	.simple-form input[type="search"] {
		width: 135px;
	}
	
	.search-text { display: inline; }
	
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 15;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6); /*black*/
	}
	
	.slide-menu-left {
		top: 0;
		left: -100%;
		width: 100%;
	}
	
	body.sml-open .slide-menu-left { 
		left: 0;
	}
	
	.nav-container {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 240px;
		
		height: 100%;
		overflow: auto;
		
		z-index: 9000;
		
		margin: 0;
		padding: 0;
		
		box-shadow: 0 0 5px rgba(0,0,0,.5);
		
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}
	
	.nav-scroller {
		position: absolute;
		overflow-y: auto;
		width: 220px;
		height: 100%;
	}
	
		.nav [class^="icon-"] {
			display: inline; /* Show icons on small screen menu */
		}
		
		.nav li, .nav .dropdown li { display: block; }
		.nav a, .nav .dropdown a { width: auto; padding: 5px 0 5px 20px; text-align: left; }
		.nav .dropdown a { padding: 5px 0 5px 43px; }
		.nav li.label { color: #fff; }
		
		.nav a:link,
		.nav a:visited, 
		.nav a:hover,
		.nav a:active,
		.nav .dropdown,
		.nav .dropdown a:link,
		.nav .dropdown a:visited, 
		.nav .dropdown a:hover,
		.nav .dropdown a:active { background-color: #361e12; }
		
		.nav .dropdown {
			position: static;
			top: auto;
			left: auto;
			margin: 0; 
			padding: 0;
			width: auto;
			z-index: auto;
		}
			
		.nav li.nav-close a {
			margin: 0;
			padding: 1em 0 1em 0;
			text-align: right;
		}
		
		li.nav-close a.close-menu span.icon-close {
			display: inline;
			font-size: 20px;
		}
		
	button.nav-toggler {
		position: absolute;
		top: 15px;
		left: 15px;
		display: block;
		margin: 0 0 0 0;
		padding: 0;
		color: #fff;
		background-color: transparent;
		border: none;
		-webkit-appearance: none;
	}
		button.nav-toggler:hover { color: #fff; background: none; }
		button.nav-toggler:active { color: #f89a42; background: none; }
		button.nav-toggler:focus { outline: none; }
		
		.icon-menu { font-size: 25px; }
    
    .hero h1 { font-size: 120%; }
    
    .hero p, .hero li { font-size: 90%; }
    
    .bga .b-list li { font-size: 100%; }
    .bga .b-list .icon-beer-glass { font-size: 15px; }
        
    .filter .dropdown {
		position: static;
		top: auto;
		left: auto;
		width: auto;
		z-index: auto;
	}
    
    .dropdown .filter-list,
	.dropdown .h-filter-list {
		height: auto;
		max-height: 10em;
		overflow: auto;
	}
	
	ul.detail-links li {
		display: block;
		border: none;
		padding: 0;
		line-height: 1.8;
	}
    
}