@charset "utf-8";
/* CSS Document */
/* theme.css version 1.1 */



html {
	font-size: 16px;   /* 1rem = 16px  */
}

body { 
	color:#ffffff;
	font-weight:300;
	font-family: "Intro", Helvetica, Arial;
	background-color:#292929;
	background: -webkit-linear-gradient(left, #494949, #292929); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #494949, #292929); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #494949, #292929); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #494949, #292929); /* Standard syntax (must be last) */
}

table {border:0;}
table {margin-bottom:2em; width:100%; text-align:left;}
table thead, table tbody, table tr {border-bottom:1px dotted #292929;}
table tbody, table tr:last-child {border-bottom:none;}
table th {padding:1.5em 1em 1.5em 1em; line-height:140%; }
table td {padding:0.5em 1em 0.5em 1em; line-height:140%;}
table th {vertical-align:bottom;}
table td:first-child * {font-weight:700;}

div#pixlbox a {opacity:0.4; text-decoration:none;}
div#pixlbox a.logoType {max-width:75px;width:75px; height:14px; display:block;margin:0.1em auto 0px auto; background:none; padding:0;}
div#pixlbox svg path, div#pixlbox svg polygon {fill:rgba(255,255,255,1.0);}




ul {margin:1em 0;}
ul li {list-style-type:none; font-weight:400; padding:0.7em 0%;}

.inlineDesktop ul li {padding:0.7em 0em 0.7em 0em; line-height:100%; border:none;}

hr {width:auto; clear:both; opacity:0.5;}




/********************************************************************************/
/* 2. Typography */
/********************************************************************************/

main span { color:#F00;}

p { font-size:0.98rem; line-height:1.4rem;}
p strong {font-weight:600;}
p.small, div#pixlbox {font-size:0.85em; line-height:1.6em;}


strong {font-weight:800;}
h2 strong {font-weight:600;}



h1,h2,h3,h4,h5 { margin:2px 0; text-transform:uppercase;}
h6 {margin:5px 0;text-transform:lowercase; font-style:italic; opacity:0.8;}

h1 {letter-spacing:0.05em;}
h2,h3 {letter-spacing:0.07em;}
h4,h5,h6 {letter-spacing:0.02em;}

h1 {font-weight:800;}
h2, div#feature h4, div#feature h5 {font-weight:400;}
h3, div#feature h6 {font-weight:300;}
h4 {font-weight:300;}
h5 {font-weight:300;}
h6 {font-weight:300;}

div#feature h4 {font-size:2.0rem;}
div#feature h5 {font-size:1.5rem;}
div#feature h6 {font-size:1.2rem;}


a:link, a:visited {color:#ffffff;/*opacity:0.8;*/}
a:hover, a:active {color:#ff0000; opacity:1.0;}



header nav a, header nav h4 {
background-color:#292929;
background-color:#404040\9; 
border-top:1px solid rgba(255,255,255,0.1); 
border-bottom:1px solid rgba(0,0,0,1.0); 
text-shadow:none;
line-height:1.8em;
font-size:1.1em;}
nav a:first-child, section#socialLinks a:first-child { border-top:none;}
nav a:last-child, section#socialLinks a:last-child { border-bottom:none;}



header a {display:inline-block; text-decoration:none; /* text-transform:uppercase;*/}
header nav h4 {color:#aeaeae;}
header nav a:link, header nav a:visited {color:#ffffff;}

footer a:link, footer a:visited, footer nav a, footer nav a:visited {color:#ffffff; /*text-decoration:none;*/ }
footer nav a, footer nav a:visited {border-top:1px solid rgba(255,255,255,0.1);  border-bottom:1px solid rgba(0,0,0,1.0); padding-left:0; margin-left:0;}
footer nav a:first-child {border-top:none;}
footer nav a:last-child {border-bottom:none;}

a.activeLink {text-decoration:none; opacity:1.0; font-weight:400;}
header nav a.activeLink {color:#ffa100;}
footer nav a.activeLink {color:#ffa100;}

aside { background-color:rgba(0,0,0,0.3);}
aside h3 {color:#ffffff;}

footer#contentFooter a { color:#292929;}
div.validation-summary-errors span {font-size:1.5em;}


select, input, div.ordering select, div.ordering input[type=submit], textarea {font-family:"Intro", Helvetica, Arial; font-size:1.1em;}
select option, div.ordering select option {font-family:"Intro", Helvetica, Arial; font-size:1.1em;}
select option:first-child, div.ordering select option:first-child {font-family:"Intro", Helvetica, Arial; font-size:1.1em;}

@media screen and (max-width:400px) { /* small device typography overrides */
html {font-size:15px;}
h2 {font-size:1.3rem;}
h4 {font-size:1.8rem;}
h5 {font-size:1.1rem;}
h6 {font-size:1rem;}
}


@media screen and (min-width:900px) { /* tablet */
html {font-size:16px;}
}


@media screen and (min-width:1200px) { /* desktop */
html {font-size:16px;}
h1, div#feature h4 {font-size:2.2rem;}
h2, div#feature h5 {font-size:1.4rem;}
h3 {font-size:1.2rem;}
h4 {font-size:1.2rem;}
h5 {font-size:1.1rem;}
h6 {font-size:1rem;}

}

@media screen and (min-width:1650px) { /* large desktop */
html {font-size:15px;}
}












/********************************************************************************/
/* 3. Iconography and Logos */
/********************************************************************************/
.logoType {display:block; margin:1em 1em 1em 0; text-decoration:none; width:180px; height:180px; display:none;}
.logoType.small {width:40px; height:40px;display:block; margin-top:1.2em; margin-bottom:0.8em;}
footer .logoType {width:50px; height:110px;display:block;}

header .logoType *, footer .logoType:not[#pixlbox] * {/*fill:#ffffff;*/ opacity:1.0; padding:0.2em;}

div#fallbackLogo {background-repeat:no-repeat; background-size:100% auto; background-position:50% 50%; padding:0;}
.logoType.small div#fallbackLogo {background-image:url(/_pbImages/Site/brewista/fallback-Logo-Small.png); height:40px;}
.logoType div#fallbackLogo {background-image:url(/_pbImages/Site/brewista/fallback-Logo.png); height:180px;}
footer .logoType div#fallbackLogo {background-image:url(/_pbImages/Site/brewista/svg/glass.png); height:110px;}


.logoType {}
.logoType.small { background:none;}
.logoType svg path {fill:#ffffff;}



/* fontAwesome Iconography */
/* fontAwesome Iconography */

	/* fontAwesome namespacing support for Black Tie */
		.fa-fw {
		  width: 1.28571429em;
		  text-align: center;
		} 
		
		.fa {
		  display: inline-block;
		  font: normal normal normal 14px/1 "Black Tie";
		  font-size: inherit;
		  vertical-align: -14.28571429%;
		  text-rendering: auto;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		  transform: translate(0, 0);
		}
		
		.fab {
		  font-family: "Font Awesome Brands";
		}
	/* fontAwesome namespacing support for Black Tie */

	.fontAwesome {  background-color:rgba(255,255,255,1.0); background-color:#ffffff\9; background:none; border:1px solid #ffffff; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px;  text-decoration:none;}
	span.fontAwesome {background:none; border:1px solid #e8272a; color:#bd1919;}
	/* uncomment to show just icons for mobile nav */
	.fontAwesome {padding:7px; width:auto; height:auto; text-align:center; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; border:none;}
	.fontAwesome span, #toTop span {display:none;}
	.fontAwesome i {padding-right:0px;  margin-right:0 !important; line-height:120%;} 
	
	a#toTop {bottom:0; right:0;}
	#mobileNavTrigger, #close {top:0; right:0; position:fixed; z-index:3000;}
	
	a#toTop i.fa { padding:6px 8px; margin-right:0;  font-size:1em; }
	a#close i.fa { padding:6px 8px; margin-right:0;  font-size:1em; color:#ffffff;}
	a#mobileNavTrigger i.fa { padding:6px 8px; margin-right:0;  font-size:1em;color:#ffffff; }
	
	a#promptDown {/* border:1px solid #ffffff;*/ color:#ffffff; opacity:0.6;}
	a#promptDown i.fa { padding:3px 4px; margin-right:0; font-size:1em;}
	a#promptDown:hover { opacity:1.0; background-color:rgba(255,255,255,0.6); /*border-color:rgba(255,255,255,0);*/ color:#ffffff;}
	
	
	a#close.fontAwesome {background-color:rgba(0,0,0,0.5);}	
	#mobileNavTrigger.fontAwesome {background-color:rgba(0,0,0,0.5);}
	#toTop.fontAwesome {background-color:rgba(0,0,0,0.5);}

	#socialLinks .fontAwesome {border:none;}
	#socialLinks .fontAwesome:hover {color:#bd1919;}
	
	/* remove comment below to hide icons on main nav [mobile]
	nav i.fa {display:none;} */
	
	/* remove comment below to hide social link icons [mobile]
	section#socialLinks a i.fa {display:none;} */
	
/* fontAwesome Iconography */
/* fontAwesome Iconography */











/********************************************************************************/
/* 4. Site-wide structure */
/********************************************************************************/

nav {margin-top:0em;}

div#primaryNavigationHolder {background-color:#121212; padding:1.5em 0; display:none;}
nav#primaryNavigation {background-color:#121212; opacity:0.9; }

nav#mobileNavigation {position:fixed; width:100%;z-index:2800;}
nav#primaryNavigation.fixme {position:fixed; width:100%;z-index:2800; top:0; padding:1.5em 0;}


body > footer nav {padding:0.5em 0em;}
body > footer {background-color:#111111;}







/* call to action button styling */
a.button { 
	margin:1em 0.3em 1em 0.3em; 
	display:block; 
	text-align:center;   
	padding:0.8em 2em 0.8em 2em; 
	border:1px solid #ffffff; 
	text-decoration:none; 
	text-transform:none; 
	font-weight:400; 
}
a.button:hover {border-color:#ff0000 !important;  opacity:1; color:#ff0000 !important;}
a.button img {margin-right:0.7em;}
a.button {display:inline-block;}
a.button:visited {border:1px solid #ffffff;}


a.button.panelled {display:block !important; padding:3em 3.5em; font-size:1.30em; line-height:1.2em; text-transform:uppercase; border:none;}
a.button.panelled {background-color:#404040; color:#ffffff;}
a.button.panelled.theme1 {background-color:#ffa100;}
a.button.panelled:hover {background-color:#292929;}








/* feature area and slider */
/*div#feature * { color:#ffffff;}*/
div#feature a.button {border-color:#ffffff; color:#ffffff;}
div#feature a.button:hover {border-color:#ffffff; background-color:#ffffff; color:#292929 !important;}
div#feature a.button:visited {border-color:#ffffff;}

div#feature {/*background-color:rgba(255,255,255,0.5);*/ background-color:#000000;}
div#feature {display:none;} /* turn off by default */

#containPromptDown {display:block; position:relative; text-align:center; width:100%;}
#containPromptDown a#promptDown {position: absolute; z-index:30000; left:50%; margin-left:-19px; top:-100px;}
body.shop #containPromptDown {display:none;}
div#feature div.picturefill-background {opacity:0.6;}

div#lines {display:none;}


@media screen and (max-width:400px) { /* hide arrow down for small screens */
	#containPromptDown {display:none;}
	div#feature article section {padding:0 !important;}
	div#feature article section div {width:90%; padding:1.5em 5% 2em 5%; margin:0; text-align:center;}
	
}
@media screen and (min-height: 250px) { /* carousel media queries */
	html, body {min-height:100%; height:100%;}
	div#feature {display:block;} /* show if minimum screen height of 250px is reached */
	div#feature article {padding:0;display: table; height:100%; width:100%; z-index:50; position:relative;}
	div#feature article section {/*padding:0em 5%;*/ display: table-cell; vertical-align: middle; float:none;} /* vertical center aligning - remove and replace with flexbox in 2016 */
	div#feature div.picturefill-background {height:101%; width:100%; position:absolute; background-position:100% !important 100% !important;}
	div#feature, div#feature div.owl-stage-outer, div#feature article {height:400px; position:relative; overflow:hidden;} /* default size for small screens */
	div#feature.fullscreen, div#feature.fullscreen div.owl-stage-outer, div#feature.fullscreen article {width:100%; min-height:100%; height:100vh;}	 /* fullscreen not subject to following min width test */
}
/* carousel height check */
@media screen and (min-height: 600px) and (min-width:600px) {
	div#feature.small, div#feature.small div.owl-stage-outer, div#feature.small article {height:220px; height:28vh; position:relative; overflow:hidden;}
	div#feature.default, div#feature.default div.owl-stage-outer, div#feature.default article {height:380px; height:50vh; position:relative; overflow:hidden;}
	div#feature.large, div#feature.large div.owl-stage-outer, div#feature.large article {height:700px; height:85vh; overflow:hidden;}
	
	div#lines {display:block;}
}
@media screen and (min-width:900px) {
	div#feature article  { width:80%; padding-left:10%; padding-right:10%;}
	
	div#feature div.picturefill-background {opacity:1.0;}
}
@media screen and (min-width:1000px) { /* desktop */
	div#feature article.center section div {width:40%; margin:0px auto;}
	div#feature article.left section div {margin-left:2%; width:40%;}
	div#feature article.right section div {margin-right:2%; width:40%; float:right;}
}
@media screen and (min-width:1200px) { /* desktop */
	/* div#feature article section {width:50%;} */
}







/* page specific theming */
article#mainContentHolder article picture { padding-bottom:1em; padding-top:1em;}
article#mainContentHolder article picture img {-webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius:  50%; border-radius:  50%;  }
article#mainContentHolder article picture.imageCustom {width:30%; height:auto; margin-left:1%;margin-right:1%; margin-top:1em; margin-bottom:1em; display:inline-block;}
div.imageCustomContainer {text-align:center; }
@media screen and (max-width:900px) {
	article#mainContentHolder article picture.imageCustom {display:none;}
}
article#mainContentHolder article.col-0 picture img,
article#mainContentHolder article.col-1 picture img
{-webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0; }







/* ordering and forms */
label h3 { text-align:left; width:90%; margin-left:5%;}

article.progressBar div { color:#4c360c;}
article.progressBar div.progress {background-color:#4c360c; background-color:rgba(76,54,12,1.0); color:#ffffff;}
article.progressBar div.complete { color:#4c360c;}

article.validationMessage {background:none; padding-top:6em; padding-bottom:0; min-height:20vh;}
article.validationMessage section.validationSuccess { margin:0; color:#ffffff;   padding-top:2em;padding-bottom:1.5em; width:50% ; border:1px solid #009900; margin:0px auto;}
section.validationSuccess h2, section.validationSuccess a, section.validationSuccess a:hover, section.validationSuccess a:visited { color:#ffffff;}
div.validation-summary-errors li {
	border-top-color:rgba(255,255,255,0.5); 
	border-bottom-color:rgba(0,0,0,0.1); 
}

input:focus, select:focus, textarea:focus { border:2px solid #292929; color:#292929;}
input[type=checkbox] {margin-top:1em;}
fieldset {padding:1em; clear:both;}

form input, form select, form textarea {color:#292929;}








/* begin media queries*/
@media screen and (max-width:400px) {
picture { text-align:center;}
picture img { width:80% !important;}


}





@media screen and (min-width:400px) and (max-width:600px) {
/* format tables for smaller width */
table thead {display: none;}
table tbody {padding:0;}
table tr { display: block; border-bottom: 1px dotted #000000; padding-bottom:0.1em; margin-bottom:0.2em;}
table tr:last-child { border-bottom: none;}
table td {display: block; text-align: right; border-bottom: none; line-height:140%;}
table td:first-child {border-bottom: 0; padding-top:1em; padding-bottom:0em; padding-left:0; padding-right:0; text-align: left;}
table td:last-child {border-bottom: 0; padding-top:0em; padding-bottom:1em;  padding-left:0; text-align: left; }
table td:before {content: attr(data-label); float: left; /*text-transform: uppercase;*/ font-weight: bold; margin-right:20px;}

/* format tables for smaller width */
table td:before {font-weight: bold;}
table td:before {content: attr(data-label); float: left; /*text-transform: uppercase;*/ font-weight: normal; font-size:80%;  opacity:0.8;}
}





@media screen and (max-width:900px) { /* phone adjustments */
 /* phone. left align everything?  */
header, main, aside, nav, /*footer,*/ #feature article {text-align:center;}
/*footer nav a,*/ section#socialLinks a {padding-left:0;}
header a.logoMark, header a.logoType {margin-left:5%;}

body > footer {padding-top:1em;}

}






@media screen and (min-width:900px) {
/* navigation and iconography */
a:hover, a:active {text-decoration:none;}	
header a.logoType.small {display:none;}
header a.logoType {display:block; margin:1em auto 0.5em auto;}

header nav a i.fa {display:none;}	/* remove header nav icons on desktop */
header nav a {background:none; border:none; padding:0.3em 0.2em;} /* adjust font size down, remove bg and theme link colour */
header nav a:link, header nav a:visited {color:#ffffff;}
header nav a:hover, header nav a:active {color:#cccccc;}
header nav a.activeLink {color:#292929; border-bottom:1px solid #292929;}

footer {text-align:left; }
footer nav {/*float:left; display:inline-block;*/}
footer nav a {border:none; display:block;}
footer nav a.activeLink {color:#ffa100; border-bottom:1px solid #ffa100;}

div#primaryNavigationHolder {display:block;}
nav#primaryNavigation a {text-decoration:none; text-transform:uppercase; font-size:0.8rem; letter-spacing:0.1em; margin-left:0.3em; margin-right:0.3em;}

}





@media screen and (min-width:1200px) { /* desktop*/
table td:first-child {padding-right:2em;} 

nav#primaryNavigation a { margin-left:1.5%; margin-right:1.5%;}

}




@media screen and (min-width:1650px) { /* large desktop */
}