@charset "utf-8";

* { font-family:'Raleway', Arial, Helvetica, sans-serif; }

@media all and (max-width: 1023px) {

body { background-color:#fff; padding:0; margin:0; }

main#panel { background-color:#fff; width:100%; overflow:hidden; }

#header { box-sizing:border-box; width:100%; height:5em; padding:1em; border-bottom:1px solid #eee; }

#header #header-inside {}

#header #header-inside #logo { height:3em; float:right; overflow:hidden; }

#header #header-inside #logo a img { display:block; height:3em; width:auto;}

#main-menu { display:none; }

#header #header-inside #social { display:none; }

#header #header-inside #mobile-menu { height:3em; width:3em; background-color:#eee; float:left; margin:0; padding:0; background-image:url(images/mobile-menu.svg); background-size:2em 2em; background-position:center center; background-repeat:no-repeat; overflow:hidden; }

#header #header-inside #mobile-menu .toggle-button { height:3em; width:3em; background-color:transparent; border:0; }
#header #header-inside #mobile-menu .toggle-button:focus { outline:0; }

#welcome-home { width:100%; height:50vh; overflow:hidden; position:relative; background-color:#ddd; background-image:url(images/nags-head-reading-painting.jpg); background-position:center center; background-size:cover; }
#welcome-ale { width:100%; height:50vh; overflow:hidden; position:relative; background-color:#ddd; background-image:url(images/nags-head-reading-painting.jpg); background-position:center center; background-size:cover; }
#welcome-craft { width:100%; height:50vh; overflow:hidden; position:relative; background-color:#ddd; background-image:url(images/nags-head-reading-painting.jpg); background-position:center center; background-size:cover; }
#welcome-cider { width:100%; height:50vh; overflow:hidden; position:relative; background-color:#ddd; background-image:url(images/nags-head-reading-painting.jpg); background-position:center center; background-size:cover; }
#welcome-lager { width:100%; height:50vh; overflow:hidden; position:relative; background-color:#ddd; background-image:url(images/nags-head-reading-painting.jpg); background-position:center center; background-size:cover; }

#content-container { box-sizing:border-box; width:100%; padding:3%; background-color:#fff; overflow:hidden; }

#content-container #content { width:100%; overflow:hidden;}

#content-container #content .pumps { width:100%; margin:0; padding:0; overflow:hidden; }
#content-container #content .pumps .pump { box-sizing:border-box; float:left; width:33%; margin:0; background-color:#fff; position:relative;}
#content-container #content .pumps .pump p { position:absolute; top:0.5em; left:0.5em; font-size:0.8em; line-height:1em; margin:0; font-weight:700;}
#content-container #content .pumps .pump img { display:block; width:100px; height:100px; margin:10%;}

#content-container #content .pumps-full { width:100%; margin:0; padding:0; overflow:hidden; }
#content-container #content .pumps-full .pump { display:block; float:left; width:100%; margin:0 0 2em 0; background-color:#fefefe; position:relative;}
#content-container #content .pumps-full .pump p.clipnumber { position:absolute; top:0.5em; left:0; font-size:1em; line-height:1em; margin:0; font-weight:700;}
#content-container #content .pumps-full .pump .clip-image { position:absolute; top:0; left:0; width:100px; }
#content-container #content .pumps-full .pump .clip-image img { display:block; width:100px; height:100px; }
#content-container #content .pumps-full .pump .beer-info { float:left; width:auto; margin:0 0 0 120px;}
#content-container #content .pumps-full .pump .beer-info h3 { margin:0;}

#content-container #content .gallerybox { width:48%; float:left; margin:0 2% 1em 0; max-height:14em; overflow:hidden;}

#content-container #content .gallerybox img { display:block; width:auto; min-height:14em; min-width:100%; }

#content-container #sidebar { width:100%; overflow:hidden;}

#content-container #sidebar ul { margin:0 0 1em 0; padding:0;}

#content-container #sidebar ul li { list-style:none; line-height:3em; height:3em; padding:0 0 0 4em; margin:0 0 1em 0; background-position:center left; background-repeat:no-repeat; background-size:3em 3em; }

#content-container #sidebar ul li.ale { background-image:url(images/ale.png); }
#content-container #sidebar ul li.craft { background-image:url(images/craft.png); }
#content-container #sidebar ul li.cider { background-image:url(images/cider.png); }
#content-container #sidebar ul li.lager { background-image:url(images/lager.png); }

#content-container #sidebar ul li a { color:#222; font-size:1.3em; font-weight:300; border:0; text-decoration:none; }

#content-container #sidebar iframe { display:block; width:100%; height:200px; margin-bottom:1em;}

#message { display:none; }

#message #message-inside { }

#footer { box-sizing:border-box; width:100%; padding:3%; background-color:#fff; overflow:hidden;}

#footer .box {text-align:center;}
#footer .box h4 {}
#footer .box h4 a {}

#footer #footer-inside {}

#footer a { color:#999; text-decoration:none;}

.slideout-menu {
position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 0; background-color:#fff; width: 260px; padding:20px; border-right:2px solid #ccc; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none;
}

.slideout-panel {
position:relative;
z-index: 1;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}

.slideout-open .slideout-menu {
display: block;
}

.slideout-menu a img { display:block; width:50%; height:auto; margin:0 0 2em 0;}

.slideout-menu ul {padding:0; margin:0;}

.slideout-menu ul li { list-style:none; padding:0; width:100%; margin:0; border-top:1px solid #f5f5f5;}

.slideout-menu ul li a { display:block; color:#222; font-size:1em; line-height:1.2em; text-decoration:none; text-transform:capitalize;font-weight:700; text-align:left; padding:3% 0;}

.slideout-menu ul li ul {padding:0; margin:0;}

.slideout-menu ul li ul li { list-style:none; padding:0; width:100%; margin:0; border-top:1px solid #f5f5f5;}

.slideout-menu ul li ul li a { display:block; color:#444; font-size:1em; line-height:1.2em; text-decoration:none; text-transform:capitalize; font-weight:400; text-align:left; padding:3% 0 3% 5%;}

#content-container h1 { font-size:2em; line-height:1.2em; letter-spacing:-1px; font-weight:700; margin:0 0 1em 0;}

#content-container h2 { font-size:2em; line-height:1.2em; letter-spacing:-1px; font-weight:700; margin:0 0 1em 0;}

#content-container h3 { font-size:1.4em; line-height:1.2em; letter-spacing:-1px; font-weight:700; margin:0 0 1em 0;}

#content-container p { font-size:1em; line-height:1.2em; font-weight:400; margin:0 0 1em 0;}

#content-container p a { font-weight:700; border-bottom:2px solid #ccc; text-decoration:none;}

}

@media all and (min-width: 1024px) {
	
body { background-color:#fff; padding:0; margin:0; }

main#panel { box-sizing:border-box; background-color:#fff; width:100%; padding:0 2em; overflow:hidden; }

#header { box-sizing:border-box; width:100%; height:7em; padding:1em; position:relative; }

#header #header-inside {}

#header #header-inside #logo { height:5em; float:left; overflow:hidden; }

#header #header-inside #logo a img { display:block; height:5em; width:auto; }

#main-menu { box-sizing:border-box; width:100%; height:3em; padding:0; text-align:center; }

#main-menu ul { padding:0; margin:0 auto; display:inline-block; }

#main-menu ul li { list-style:none; height:3em; float:left; margin:0 0.5em;  position:relative; }

#main-menu ul li a { line-height:3.3em; font-size:0.9em; color:#222; text-decoration:none; font-weight:700; }

#main-menu ul li a:hover {}



#main-menu ul li ul {display:none;position:absolute;top:3em;width:10em;left:0;z-index:999!important;background-color:#eee;padding:1em;margin:0;list-style:none;overflow:hidden;}
#main-menu ul li ul li {overflow:hidden;display:block;box-sizing:border-box;margin:0 0 0.5em 0;width:100%;height:auto;}
#main-menu ul li ul li:last-of-type {margin:0;}
#main-menu ul li ul li a {line-height:1em;padding:0;}
#main-menu ul li ul li a:hover {}
#main-menu ul li:hover > ul {display:block;}





#header #header-inside #social { position:absolute; top:1em; right:1em; height:32px; overflow:hidden; }

#header #header-inside #social a img { display:block; height:32px; width:auto; float:left; margin:0 0 0 1em; }

#header #header-inside #mobile-menu { display:none; }

#welcome-home { width:100%; height:50vh; overflow:hidden; position:relative; background-color:#ddd; background-image:url(images/nags-head-reading-painting.jpg); background-position:center center; background-size:cover; }
#welcome-ale { width:100%; height:50vh; overflow:hidden; position:relative; background-color:#ddd; background-image:url(images/nags-head-reading-painting.jpg); background-position:center center; background-size:cover; }
#welcome-craft { width:100%; height:50vh; overflow:hidden; position:relative; background-color:#ddd; background-image:url(images/nags-head-reading-painting.jpg); background-position:center center; background-size:cover; }
#welcome-cider { width:100%; height:50vh; overflow:hidden; position:relative; background-color:#ddd; background-image:url(images/nags-head-reading-painting.jpg); background-position:center center; background-size:cover; }
#welcome-lager { width:100%; height:50vh; overflow:hidden; position:relative; background-color:#ddd; background-image:url(images/nags-head-reading-painting.jpg); background-position:center center; background-size:cover; }

#content-container { width:100%; padding:0; background-color:#fff; overflow:hidden; }

#content-container #content { box-sizing:border-box; width:70%; float:left; padding:1em; overflow:hidden;}

#content-container #content .pumps { width:100%; margin:0; padding:0; overflow:hidden; }
#content-container #content .pumps .pump { box-sizing:border-box; float:left; width:23%; height:7em; margin:0 2% 1em 0; background-color:#fefefe; position:relative;}
#content-container #content .pumps .pump p { position:absolute; top:0.5em; left:0.5em; font-size:0.8em; line-height:1em; margin:0; font-weight:700;}
#content-container #content .pumps .pump img { display:block; width:100px; height:100px; margin:10%;}

#content-container #content .pumps-full { width:100%; margin:0; padding:0; overflow:hidden; }
#content-container #content .pumps-full .pump { display:block; float:left; width:100%; margin:0 0 1em 0; overflow:hidden;  background-color:#fefefe; position:relative; min-height:100px;}
#content-container #content .pumps-full .pump p.clipnumber { position:absolute; top:0.5em; left:0; font-size:1em; line-height:1em; margin:0; font-weight:700; z-index:99;}
#content-container #content .pumps-full .pump .clip-image { position:absolute; top:0; left:0; width:100px; }
#content-container #content .pumps-full .pump .clip-image img { display:block; width:100px; height:100px; z-index:50; }
#content-container #content .pumps-full .pump .beer-info { float:left; width:auto; margin:0 0 0 120px;}
#content-container #content .pumps-full .pump .beer-info h3 { margin:0;}

#content-container #content .gallerybox { width:23%; float:left; margin:0 2% 1em 0; max-height:12em; overflow:hidden;}

#content-container #content .gallerybox img { display:block; width:auto; min-height:12em; }

#content-container #sidebar { box-sizing:border-box; width:30%; float:right; padding:1em; overflow:hidden;}

#content-container #sidebar ul { margin:0 0 1em 0; padding:0;}

#content-container #sidebar ul li { list-style:none; line-height:3em; height:3em; padding:0 0 0 4em; margin:0 0 1em 0; background-position:center left; background-repeat:no-repeat; background-size:3em 3em; }

#content-container #sidebar ul li.ale { background-image:url(images/ale.png); }
#content-container #sidebar ul li.craft { background-image:url(images/craft.png); }
#content-container #sidebar ul li.cider { background-image:url(images/cider.png); }
#content-container #sidebar ul li.lager { background-image:url(images/lager.png); }

#content-container #sidebar ul li a { color:#222; font-size:1.3em; font-weight:300; border:0; text-decoration:none; }

#content-container #sidebar iframe { display:block; width:100%; height:auto; max-height:200px; margin-bottom:1em;}

#message { box-sizing:border-box; width:100%; padding:1em; background-color:#ccc; overflow:hidden; }

#message #message-inside { }

#footer { box-sizing:border-box; width:100%; padding:1em; background-color:#f3f3f3; overflow:hidden;}

#footer .box {text-align:center;}
#footer .box h4 {}
#footer .box h4 a {}

#footer #footer-inside {}

#footer p { text-align:center;}

#footer p a { text-decoration:none; color:#777;}

nav#menu { display:none; }

#content-container h1 { font-size:2em; line-height:1em; letter-spacing:-1px; font-weight:700; margin:0 0 0.7em 0;}

#content-container h2 { font-size:2em; line-height:1.2em; letter-spacing:-1px; font-weight:700; margin:0 0 0.7em 0;}

#content-container h3 { font-size:1.4em; line-height:1.2em; letter-spacing:-1px; font-weight:400; margin:0 0 0.7em 0;}

#content-container p { font-size:1em; line-height:1.2em; font-weight:400; margin:0 0 0.7em 0;}

#content-container p a { font-weight:700; border-bottom:2px solid #ccc; text-decoration:none;}



input.textfield { box-sizing:border-box; width:100%; padding:0.7em 1em; background-color:#fff; border:1px solid #ccc; margin:0 0 1em 0; color:#666; font-size:1em; font-weight:400; line-height:1.5em}

select.select { box-sizing:border-box; width:100%; padding:0.7em 1em; background-color:#fff; border:1px solid #ccc; margin:0 0 1em 0; color:#666; font-size:1em; font-weight:400; line-height:1.5em}

.textarea { box-sizing:border-box; width:100%; min-height:5em; padding:0.7em 1em; background-color:#fff; border:1px solid #ccc; margin:0 0 1em 0; font-family: 'Raleway', sans-serif; color:#666; font-size:1em; font-weight:400; line-height:1.5em}

input.button { padding:0.7em 2em; background-color:#333!important; color:#fff; border:0; margin:0 0 10px 0; font-family:"Raleway", Arial, Helvetica, sans-serif; font-size:1.2em; font-weight:400; line-height:1.1em;}

input.button:hover { background-color:#222!important; cursor:pointer;}
	
}

@media all and (min-width: 1280px) {
	
main#panel { padding:0 3em; }
#main-menu ul li a { line-height:3em; font-size:1em; }

}

@media all and (min-width: 1920px) {
	
main#panel { padding:0 10%; }
#main-menu { height:4em; padding:0.5em 0; }
#main-menu ul li a { line-height:2.5em; font-size:1.2em; }

}

img.event { display:block; width:50%; height:auto; clear:both; float:none; }

/*** ADMIN STYLES ***/

body.admin { background-color:#ddd; padding:5%; width:90%; }
body.admin #container { overflow:hidden;  background-image:url(images/admin.png); background-position:top right; background-repeat:no-repeat;}
body.admin .alert { background-color:#F90; padding:0.5em 1em; width:60%; margin:0 0 1em 0;}
body.admin .alert p { color:#fff; font-weight:bold; margin:0; line-height:1.5em;}
.adminbox { width:60%; float:left; padding:1em; margin:0 1em 1em 0; background-color:#fff; }
.adminbox ul { padding:0 0 0 1em; margin:0; }
.adminbox ul li { padding:0; margin:0; line-height:2em; }
.adminbox ul li a { color:#333;}
.adminbox .tint { padding:1em; background-color:#ccc; overflow:hidden; }
.adminbox .row { width:70vw; height:2em; padding:10px 0; overflow:hidden; border-bottom:2px solid #ddd; }
.adminbox .row.pink {background: rgb(255,242,255);
background: linear-gradient(90deg, rgba(255,242,255,1) 0%, rgba(255,255,255,0.09) 50%);}
.adminbox .row .rowtext { width:60%; height:2em; float:left;}
.adminbox .row .rowtext p { line-height:1em;}
.adminbox .row .rowbuttons { width:35%; height:2em; float:right; }
.adminbox .row .rowbuttons input { float:left; height:2em; padding:0;}
.adminbox .box { width:200px; overflow:hidden; float:left; padding:1em; background-color:#fff; margin:0 1em 1em 0;}
.adminbox .box img { display:block; width:200px; height:auto; margin:0 0 1em 0;}
.adminimages { width:30%; float:right; padding:1em; margin:0 0 1em 0; background-color:#fff; }
.adminimages input { max-width:100%; width:auto; box-sizing:border-box;}
form { min-width:30vw; }
body.admin a { color:#666!important; font-weight:bold; text-decoration:none; border-bottom:2px solid #ccc; }
body.admin hr { height:1px; background-color:transparent; border:none; color:#eee; margin:0 0 2em 0; display:block; }
body.admin .visitsite a { position:absolute; top:0; right:0; padding:1em; background-color:#222; color:#fff!important; text-decoration:none; font-size:1.2em;}