html, body {margin:0; padding:0; height:100%;}
body {
font-family: arial, helvetica, sans-serif;
}
ul, li {font-size: 14px;
line-height:20px;
}
img {}
#backimage {background:#fff url(../images/belfast1.jpg); background-size:cover; background-position: center center; position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:-1;}
#header {
width: 100%; max-width:800px; min-width:320px;
display: block;
margin: 0 auto;
height: 100px;
background: url('../images/header_bg3.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
#header h1 {
font-size: 25px;
padding:15px 0 0 0; margin:0 0 0 10px;
color: #117318;
}
#header h2 {
color:#fff; font-size: 15px; font-style: italic; padding:0; margin:0 0 0 10px;
}}#header h3 {font-size: 25px;color: #117318;}

/* Main Content DIVS */
#leftcontainer {
width: 22%;
vertical-align:top;
}
#container {
width: 100%; max-width:800px; min-width:320px;
margin: 0 auto;
display: block;
position: relative;
background:#fff;
padding-top:20px;
border-radius:0 0 5px 5px;
box-shadow:0 0 10px rgba(128,128,128,0.5);
}
#content {width:98%;
margin: 0 auto;
}
#content h1 {
font-size: 22px;
color: black;
margin-top: 0px;
padding-top: 10px;
color: #117318;
}
#content h2 {
font-size: 18px;
color: #5c7794;
margin-top: 0px;
padding-top: 10px;
line-height:24px;
}
#content h3 {
font-size: 16px%;
color: black; margin-top: 0px; padding-top: 10px;}
/* Tables */
table {border-collapse:collapse;
}
tr {border-bottom:2px solid #e5e4e2;}
td {
background-color: #fff;
padding:10px;
}

#content table:nth-last-of-type(1) tr:last-child {border:0;}
/* ------ */
#content p {
font-size: 14px;
line-height:20px;
}
#content a.bold-link {font-size:15px; font-weight:bold; color:#000;}

#leftmenu {
display:inline-block;
}
#leftmenu a {color: #000; text-decoration: none;}
#leftmenu a:hover { text-decoration: underline;}
#leftmenu h2 {
font-size: 15px;
margin-left: 10px;
margin-top: 20px;
}
#leftmenu p {
font-size: 14px;
line-height:25px;
color: #000;
margin-left: 10px;
margin-top: 10px;
}
/* ---------- */
/* Navigation */
#navbar {
width: 100%; max-width:800px;
margin: 0 auto;
background-color: #3F6085;
height: 45px;
}
#navlinks ul {	margin: 0;	padding: 0 0 15px 0;
	list-style-type: none;
	font-family: Arial,Helvetica,sans-serif;
    font-size: 90%;
	color: white;
	font-weight: bold;
	margin-left: 10px;
	margin-top: 0px;
	padding-top: 5px;
	height: 20px;
}
#navlinks li  {
	width:149px;
	margin: 0 0px 0 0;
	padding: 0;
	border: 0px;
	color: white;
	text-decoration:none;
	background-color: #3F6085;
	float:left;
}

#navlinks a {
	text-decoration: none;
	display: block;
	color: #FFFFFF;
	background-color: #3F6085;
}

#navlinks a:visited {
color: #FFFFFF;
}
#navlinks a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #3F6085;
}

#navlinks li ul {
	display: none;
}

#navlinks li:hover ul, #navlinks li.iehover ul {
	visibility: visible;
	display: block;
	position:absolute;
	z-index:1;
	width:250px;
	padding: 0;
	margin: 0;
	border:0px;
}

#navlinks li li {
	border: none;	}	

#navlinks li li a {
	padding: 2px 2px 2px 10px;
}
/** ------------ **/
#form-container {
	padding-bottom: 8px;
	margin-bottom: 5px; font-size: 90%;
	border-top:1px solid #999;
}
#form-container p {margin-left:37%;}

div.formrow  {
        clear: both;
        padding-bottom: 10px;
		}
div.formrow2 {
clear: both;
padding-top: 3px;
}
div.formrow span.label {float: left;
    width: 35%;
    text-align: right;
}
div.formrow span.formw  {
    width: 60%;
	margin-left: 2%;
	text-align: left;
}
div.formrow input {width:50%; border:0; padding:8px 5px; border-radius:5px; background:#acc7e4; color:#000;}
div.formrow select {
background-color: #acc7e4;
border:0;
padding:5px;
border-radius: 5px 0 0 5px;
width:150px;
color:#000;
}
#form-container p input {padding:8px 5px; background:#117318; width:150px; color:#fff; border:0; border-radius:5px;}
#footer {clear: both;
	width: 100%; max-width:800px;
	margin: 10px auto;
	}
#footer p {
	font-size: 13px;
	margin-top: 2px;
	font-weight:bold;
	}
#footer a {
	color: #000000;
	}
#footer a.hidelnk {
	text-decoration: none;
	cursor:text;
	}
#footer a.hidelnk:hover {
	text-decoration: none;
	}

.centered {text-align:center;}

#navigation {width:100%; max-width:800px; min-width:320px; margin:0 auto;}
input.navip {position:absolute; display:none;}
#navigation #home {display:inline-block; width:calc(100% / 6); height:40px; text-align:center; font-size:15px; line-height:40px; color:#000; background:#9cb7d4; text-decoration:none;}
#navigation label.subs {display:inline-block; width:calc(100% / 6); height:40px; text-align:center; font-size:15px; line-height:40px; color:#000; background:#acc7e4;}
#navigation label.subs:nth-of-type(even) {background:#9cb7d4;}

#navigation .submenu {position:fixed; left:-100%; top:0; z-index:100; width:100%; height:100%; overflow-y:auto;
display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;
}
#navigation .submenu .sub-inner {width:100%; max-width:800px; min-width:320px; margin:auto; min-height:100%; background-color:rgba(255,255,255,0.95); background-image: url(../images/house.png); background-size:cover; background-position:center center; -webkit-overflow-scrolling: touch; display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center; text-align:center; position:relative; 
opacity:0;
transition:0.5s;
}
#navigation .submenu .sub-inner .sub-links {width:100%; margin: 0 auto; text-align:center;}
#navigation .submenu .sub-inner .sub-links a {display:inline-block; padding:0 3px; margin:1px 0 0 1px; height:35px; text-align:center; min-width:186px; font-size:14px; line-height:35px; color:#000; background:#9cb7d4; text-decoration:none; white-space:nowrap:}
#navigation .submenu .sub-inner .sub-links a:nth-of-type(even) {background:#acc7e4;}

#navigation .submenu .sub-inner h1 {color:#117318; margin:10px 0; padding:20px 0 0 0; line-height:30px;}
#navigation .submenu .sub-inner h1 span {font-size:20px; color:#000; text-transform:uppercase;}

#navigation .submenu .sub-inner label {font:22px; position:absolute; top:20px; right:20px; color:#000; font-weight:bold;}

#navigation input#about:checked ~ .about {left:0;}
#navigation input#ale:checked ~ .ale {left:0;}
#navigation input#breweries:checked ~ .breweries {left:0;}
#navigation input#info:checked ~ .info {left:0;}
#navigation input#counties:checked ~ .counties {left:0;}

#navigation input#about:checked ~ .about .sub-inner {opacity:1;}
#navigation input#ale:checked ~ .ale .sub-inner {opacity:1;}
#navigation input#breweries:checked ~ .breweries .sub-inner {opacity:1;}
#navigation input#info:checked ~ .info .sub-inner {opacity:1;}
#navigation input#counties:checked ~ .counties .sub-inner {opacity:1;}

@media only screen and (max-width: 750px) {
#navigation #home {width:33.33%;}
#navigation label.subs {width:33.33%;}
}
@media only screen and (max-width: 400px) {
#navigation .submenu .sub-inner .sub-links a {min-width:143px;}
}

@media only screen and (max-width: 620px) {
div.formrow span.label {float: none; display:block;
    width: 100%;
    text-align: left;
}
div.formrow span.formw  {
    width: 100%;
	margin-left: 0;
	text-align: left;
}
div.formrow input {width:90%; margin-left:0;}
#form-container p {margin:15px 0; text-align:center;}

}
@media only screen and (max-width: 460px) {
div.formrow span.label {width:200px;}
}

.map-links {text-align:center;}
.map-links a {color:#000; text-decoration:none; display:inline-block; width:33%; min-width:210px; margin:0 1px 1px 0; background:#fff; padding:10px 0;}
@media only screen and (max-width: 480px) {
.map-links a {width:90%;}
}

.brewery {padding:10px; background:#fff; margin-top:5px;}
.brewery .left-panel {display:inline-block; width:220px; vertical-align:top; position:relative; padding-top:15px;}
.brewery .right-panel {display:inline-block; width:calc(100% - 240px); vertical-align:top; color:#800;}
.brewery .full-width {display:block; width:100%;}
@media only screen and (max-width: 640px) {
.brewery .right-panel {width:100%;}
}