@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,700,300);

/*

creme: #FBF8E9;
red: #CA2126;
gold: #FED130;
green: #736530;

*/

html, body {
	height: 100%;
}

p { margin-top: 0; }

body {
    font-family: 'Roboto Slab', serif;
	font-size: 16px;
	color: #000;
	margin: 0;
	padding: 0;
}


.fa.fa-bars.dl-trigger { /* mobile menu */
	display: none;
}


.maxWidthDiv {
	max-width: 1024px;
	margin: 0 auto;
}

header {
	color: #fff;
	background-color: #000;
	background-color: rgba(0, 0, 0, 1);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0;
	z-index: 1000;
}

#theHeader {
	padding: 20px 2%;
}


#logo {
	float: left;
	width: 38%;
	position: relative;
	top: 6px; /* just a visual thing */

}

#logo a {
	font-weight: bold;
	color: #fff;
	font-size: 2em;
}


/* --- WHEN THE TOP HEADER IS REDUCED ON SCROLL --- */
.reducePadding #theHeader {
	padding: 5px 2%;
	border-bottom: 3px solid #FED130;
}

.reducePadding #cssmenu > ul > li > a {
	margin-top: 6px;
}

.reducePadding #logo {
	top: -3px; }
/* --- end WHEN THE TOP HEADER IS REDUCED ON SCROLL --- */



nav {
	width: 62%;
	float: right;
	font-size: 1em;
	margin-bottom: 0px;
	
	
	
}



nav a, nav a:link, nav a:visited {
	
}




#theHeaderImage {
	position: relative;
	top: 0;
	left: 0;
	z-index: 10;
	overflow: hidden;
		}

#theHeaderImage img {
	width: 100%;
		
}


a, a:link, a:visited {
	text-decoration:none;
	color: #47629C;
	}

a:hover {
	color: #736530;
}
	
	
a img { border: none; }

p { margin-top: 0; }


h1, h2, h3 {
	font-weight: bold;
	font-weight: 700;
	margin-bottom: 10px;
}

h1 {
	
	font-size: .8em;
	margin-top: 0;
	padding: 5px 10px;
	background-color: #CA2126;
	font-weight: normal;
	color: #fff;

	cursor:default; /* I don't want the iBar to select text */
}

h1 a, h1 a:link, h1 a:visited {
		color: #fff;
}

h1 a:hover {
	
	color: #000;
}

h1 .fa-angle-right {
	color: #BDBDBD;
	padding: 0 10px;
}


h2 {
	font-size: 1.6em;
	margin-top: 20px;
	color: #CA2126;;
	}

h3 {
	font-size: 1.3em;
	margin-top: 20px;
	color: #736530;
	}



.washedBlue, .whiteBg, .cremeBg {
	background-color: #E4EBED;
	padding: 40px 0;
	min-height: 200px;
	line-height: 190%;
}

.whiteBg {
	background-color: #fff;	
}

.cremeBg, .cremeBgSmall {
	background-color: #FBF8E9;	
}




#page-wrap {
	width: 100%;
    max-width: 1024px;
	margin: 0 auto;
	
	border: 1px solid #000000;
}






/* ##################################### */


#theUpDownBox {
	width: 32px;
	height: 28px;
	overflow: hidden;
	padding: .45em 0;
}

#theUpDownBox, #theCurrentPage {
	margin: 0 5px;
	float: left;
	font-size: 1.25em;
	color: #FFC;
}

#theCurrentPage {
	padding: .45em 0;
	display: none;
	text-align: left;
 }

#theArrow {
	position: relative;
	top: 0;
	left: -32px; /*always start out showing it */
}







footer {
	/*

creme: #FBF8E9;
red: #CA2126;
gold: #FED130;
green: #736530;

*/

	background-color: #404040;
	/*background-color: rgba(0, 0, 0, 1);
	*/
	
	
	color: #fff;
	text-align: center;
	padding: 10px;
	font-size: .8em;
	position: fixed;
	bottom: 0;
	width: 100%;
}


.fixIt {
	position: fixed;
	top: 0;
	z-index: 2000;
	border-bottom: 1px solid #000;
	}

#push {
	clear:both;
   height: 42px; 
    }




.clear { display: block; clear: both; }





#addy {
	float: left;
}

#phone {
	float: right;
}





#mobileNav, #populateDynamicallyMobile {
	display: none;
}


#populateDynamicallyMobile {
	background-color: #fff;	
	margin-top: 10px;
	
}

#populateDynamicallyMobile a {
	width: 100%;
	display: block;
	float: left;
	width: 50%;
	box-sizing: border-box;
	border-top: 1px dotted #ccc;
	border-right: 1px dotted #ccc;
	border-left: 1px dotted #ccc;
	text-align: center;
	padding: 8px;
	margin: 0;
	text-transform: uppercase;
	font-size: .8em;
	background-color: #fff;
		
}



#mobileNav a {
	
}

#mobileMenuLabel {
	display: block !important;	
}


.floatRightSmall {
	width: 30%;
	float: right;
	margin-left: 20px;
	margin-bottom: 10px;
}

.floatLeftSmall {
	width: 30%;
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
}

/* Start of "Micro clearfix" */
        
        .cf { zoom: 1; }
        .cf:before,
        .cf:after { content: ""; display: table; }
        .cf:after { clear: both; }
  /* End of "Micro clearfix" */

.positionRelative {
	position: relative;
	top: 0;
	left: 0;
}

.bottomPosition {
	position: absolute; 
	left: 0; 
	bottom: -55px; 
	display: block;
}

.width20 {	width: 20%; }
.width25 {	width: 25%; }
.width30 {
	width: 30%;
}

.width50 {
	width: 30%;
}

.paddingLeft30 {
	padding-left: 30%;
}

.craftIndent {
	display: block; 
	margin-left: 30%;
}
#contactStuff {
	width: 25%; 
	float: left;
	}
#theMap {
	border:0; 
	width: 73%; 
	float: right;
	min-height: 400px;
	margin-left: 2%;
}

.coloredUl {
	margin: 20px 0;
	padding: 0;
	list-style-type: none;	
	font-size: .9em;
}

.coloredUl li:last-child {
	border: none;
}

.coloredUl li {
	padding: 5px;
	font-weight: normal;
	 font-variant: small-caps;
	 border-bottom: 1px dotted #666;
	}
	
.coloredUl li span {
	display: inline-block;
	font-weight: bold;
	width: 80px;	
	font-variant: normal;
		
}
	
.coloredUl.alignRight li {
	text-align: right;
}
	
.coloredUl.alignRight li span {
	text-align: left;
	float: left;
}
		

	
	

	
#storeHours {
	margin-right: 20px;
}



ul.threeColumnList {
	margin-bottom: 40px;
	margin-left: 0;
	
	-moz-column-count: 3;
    -moz-column-gap: 50px;
	
    -webkit-column-count: 3;
    -webkit-column-gap: 50px;
    
	column-count: 3;
    column-gap: 50px;
}


ul.threeColumnList li {
	list-style-type: square !important;
	line-height: 120%;
	margin-bottom: 4px;	
	margin-left: 20px; /* I needed to add margin to show the bullets in Chrome and Opera. There may also be info that helps here: //stackoverflow.com/questions/14989056/css-columns-make-my-li-bullets-disappear 	*/
	
	page-break-inside: avoid; /*firefox hack*/
	-webkit-column-break-inside: avoid; 
	-moz-column-break-inside:avoid; 
	-o-column-break-inside:avoid; 
	-ms-column-break-inside:avoid; 
	column-break-inside:avoid;
}

.relativePosition { position: relative; top: 0; left: 0; }

#myMagnifier {
	position: absolute;
	left: 10px;
	top: 28%;
	color: #ccc;
}

input#search {
	padding-left: 30px;
	min-width: 250px;
}

.centerIt {
	text-align: center;
	}
	
a.underline {
	text-decoration: underline;	
}


#randomBeers {
	padding: 0 10px;
	max-width: 785px;
	margin: 0 auto 20px auto;
}

#logos img {
	
	width: 14.6666666666%;
	margin: 1%; 
}



.fa-facebook{
	background: #3B5998;
	color: #FFFFFF;
  padding: 0.05em 0.3em;
  
	}
	
.circle{
	border-radius: 50%;
	font-size: 1.1em;
	}
	
	
@media all and (max-width: 820px) {

nav #homeLink {
	display: none;
}

}

.snLink i {
	cursor: pointer;
}


.snLink i:hover {
	cursor: pointer;

-webkit-animation: cssAnimation 1s 1 ease;
-moz-animation: cssAnimation 1s 1 ease;
-o-animation: cssAnimation 1s 1 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); }
}


/* newbs */

.productWraps div, .fourPhotos img {
	float: left;
	width: 23.5%;
	margin-right: 2%;
	
	min-height: 100px;
	margin-bottom: 20px;
	text-align: center;
	
}

.productWrapsHome div {
	margin-top: 40px;	
	margin-bottom: 40px;	

}


.fourPhotos {
	margin: 20px 0;
}

.fourPhotos img {
	box-sizing: border-box;
	border: 1px solid #CA2126;
}

.productWraps div img {
	width: 100%;
}

.productWrapsHome div img {
	box-sizing: border-box;
	border: 1px solid #CA2126;
	}


 .productWraps div:nth-child(4n + 1),
 .fourPhotos img:nth-child(4n + 1) {
		clear: both;	 
 }
 
  .productWraps div:nth-child(4n + 4),
  .fourPhotos img:nth-child(4n + 4) {
	margin-right: 0;
 }
 
 .productWraps div h3 {
	font-size: 1.2em;	
	margin-top: 0;
	margin-bottom: 0px; 
	color: #CA2126;
 }
 
 .productWrapsHome div h3 {
	margin-bottom: 15px; 
}

 
 .productWraps div h4 {
	font-size: 1em;	
	margin-bottom: 5px; 
	color: #3F4F5F;
	font-weight: bold;
	line-height: 1;
	
 }
 
 .productWraps div p {
	font-size: .9em;	
	line-height: 120%;
	color: #666;
 }
 
 .productWraps div ul {
	font-size: .9em;	
	line-height: 120%;
	color: #666;
	margin: 0;
	padding: 0;
	list-style-type: none;
 }
 
  .productWraps div ul li {
	margin-bottom: 10px;
	font-weight: bold;
 }
 
.productWraps div ul li span {
	font-weight: normal;
	font-style: italic;
	display: block;
	font-size: .9em;
 }
 
 
 .image100 {
	width: 100%;
 	display: block;
	margin-bottom: 30px;
 }
 
 
 #css-table {
  display: table;
  border-spacing: 20px;

}

#css-table .col {
  display: table-cell;
  width: 50%;
  padding: 10px;
  border: 4px dashed #000;
  vertical-align: middle;
  text-align: center;
  background-color: #fff;
}


/* FAQ Stuff */

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


li.button a {
	/* The section titles */
	display: block;
	padding: 10px 2%;
	text-decoration:none;
	margin-bottom: 10px;
	}



li.button:nth-child(4n+1) a { background-color: rgba(253, 207, 68, .4); color: #000; }
li.button:nth-child(4n+3) a { background-color: rgba(114, 100, 52, .4); color: #000; }


li.button:nth-child(4n+1) a:hover, li.button:nth-child(4n+1) a.uber { background-color: rgba(253, 207, 68, 1); color: #000; }
li.button:nth-child(4n+3) a:hover, li.button:nth-child(4n+3) a.uber { background-color: rgba(114, 100, 52, 1); color: #fff; }



.dropdown{
	/* The expandable lists */
	display:none;
	margin-bottom: 20px;
}


/* end FAQ Stuff */


a.cremeButton, a.cremeButton:link, a.cremeButton:visited {
	background-color: rgba(114, 100, 52, .4);	
	padding: 10px;
	display: inline-block;
	color: #fff;
	padding: 10px 20px;
	text-transform: uppercase;
	border-radius: 10px;
}


a.cremeButton:hover {
	background-color: rgba(114, 100, 52, 1);	
	color: #fff;
	}

 
 /* #### SOME MID-SIZE MENU ADJUSTMENTS #### */
 
 @media all and (min-width: 751px) and (max-width: 1100px) {
	#logo {
	float: none;
	text-align: center;
	width: 100%;
	}
	
	nav {
		width: 100%;
		}
	
	#cssmenu ul {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	
 }
 
 
 .halfScreens, .thirdScreens  { 
	margin-right: 3%; 
	float: left; 
	margin-bottom: 20px;
	}

.halfScreens {	
	width: 48.5%; 
}

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







/* Responsive iFrame */
 
.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
/* the padding bottom determines the height of the frame. */

 
.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.storeIcon {
	width: 160px;
	margin: 5px 10px;
}