/* Original beerstyles.css */

* {
	margin : 0;
	padding : 0;
}

body {
	background-color:#333333;
	color:#999999;
	font-family:"Gotham", Verdana, Helvetica, Arial, sans-serif;
	border:0;
}

p
{
    margin-top:1.5em;
    margin-bottom:1.5em;
}

h2 {
	font-weight: normal;
}

/* Links */

a {
	text-decoration: none;
	color:#cccccc;
	padding: 3px 0px 2px 0px;
}

a:hover{
	color:#eeeeee;
}

/* Header + Menu */
#BeerTitle {
	font-size: 1.9em;
	line-height: 1em;
	text-align: left;
	font-weight: normal;
	}

#BeerTagline {
	font-size: 0.8em;
	text-align: left;
	font-weight: normal;
	padding-top: 6px;
	color:#777777;
}

#Header {
	background-color:#222222;
	white-space:nowrap;
	padding-top:20px;
	padding-left:50px;
	padding-right:50px;
	padding-bottom:0px;
}

#HeaderMenu {
	margin-top: 20px;
}

#HeaderMenu ul {
	padding : 0.4em 0em;
	font-size: 0.8em;
}

#HeaderMenu li {
	display : inline;
}

#HeaderMenu li a {
	color : #ffffff;
	padding : 0.4em 20px;
	text-transform: uppercase;
	text-decoration: none;
	color:#cccccc;
}

#HeaderMenu li a:hover {
	color:#eeeeee;
	background-color:#444444;
}

#HeaderMenu li.selected a {
	background : #333333;
}

#HeaderMenu li a:active {
	color : #ffffff;
	background-color:#555555;
}

/* Main Content */

#MainContent {
	background-color:#333333;
	padding:10px;
	padding-top:40px;
	padding-left:50px;
	padding-right:50px;
	line-height:1.5em;
	float:left;
}
#MainContent a {
	color: #ff8800;
	text-decoration: none;
}

#MainContent a:hover {
	color: #e95;
	text-decoration: underline;
}

#Copyright {
	background-color:#333333;
	font-size:0.7em;
	color:#888888;
	padding:30px 0px 30px 0px;
}

/* Imaqge + Border */

.imageContainer {
	padding: 20px 0px 20px 0px;
}

img.responsive {
	max-width:100%;
	height:auto;
	display: block;
}

.imageBorder {
	border: 4px solid #222;
}

.imageCaption {
	font-size:smaller;
	background-color: #222; 
	color: #ccc; 
	padding: 10px 5px 5px 5px;
}

/* Beer Styles 2026 */

/* Menu */
.menu_container{
    display: flex;
    padding: 0 10px;
    align-items: top;
    justify-content: flex-start;
}
.menu_btn{
    display: none;
}
.menu_hamburger{
    width: 20px;
    height: 2px;
    background-color: #ff8800;
    border-radius: 5px;
    z-index: 10;
    transition: all .3s ease;
	margin-top: 15px;
}

.menu_hamburger::before,
.menu_hamburger::after{
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: #ff8800;
    border-radius: 5px;
    transition: all .3s ease;
}
.menu_hamburger::before{
    transform: translateY(-7px);
}
.menu_hamburger::after{
    transform: translateY(7px);
}
.menu_items{
    background: #333;
    color: #ff8800;
    position: absolute;
    left: -100%;
    height: 100%;
    width: 8em;
    padding-top: 70px;
    padding-left: 30px;
    top: 0;
    transition: all .3s ease-in-out;
}
.menu_items li{
    padding: 10px 0;
    /* text-align: center; */
    transition: all .2s ease; 
    list-style-type: none;
    cursor: pointer;
}
.menu_items a {
	color: #ff8800;
	text-decoration: none;
}

/* Menu Animation */
.input:checked ~.menu_hamburger{
    transform: translateX(-50px);
    background: transparent;
}
.input:checked ~.menu_hamburger::before{
    transform: rotate(45deg) translate(35px, -35px);
}
.input:checked ~.menu_hamburger::after{
    transform: rotate(-45deg) translate(35px, 35px);
}
.input:checked ~.menu_items{
    left: 0%;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5)
}
.input{
    display: none;
}

/* Gallery stuff */
#GalleryWrapper
{
	width:90%;
	/*min-width:27em;
	float:left;*/
}
div.GalleryItemWrapper
{
	clear:both;
	/*float:left;*/
	padding:0px 0px 15px 0px;
}
div.GalleryItemPicture
{
	float:left;
	width:220px;
}
div.GalleryItemText
{
	margin-left:220px;
}

.galleryHeading
{
	
}
.galleryLocation
{
	font-size:0.8em;
	line-height:1.4em;
}
.galleryDate
{
	font-size:0.7em;
	line-height:1.4em;
}

/* End of Gallery stuff*/
 
/* Home page image grid */
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 30%;
  max-width: 30%;
  padding: 0 8px;
}

.column img {
  margin-top: 16px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
/* Need another column of photos to make this work
@media screen and (max-width: 800px) {
  .column {
    flex: 46%;
    max-width: 46%;
  }
}
*/
/* END Home page image grid */

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}


/* Mobile */
@media screen and (max-width: 600px) {
	.menu_btn {
	    display: flex;
	    justify-content: center;
	    align-items: top;
	    width: 50px;
	    height: 50px;
	    transition: all .3s ease-in-out;
		padding-right: 10px;
		z-index: 10;
	}
	
	#HeaderMenu {
		display: none;
	}
	
	#Main {
		width: 100%;
	    position: relative;
	    overflow: hidden;
	}
	#MainContent {
		padding-left:20px;
		padding-right:20px;
	}
	
	#Header {
		padding-left:0px;
		padding-bottom: 20px;
		padding-right:20px;
		white-space: normal;
	}
}