/*
Theme Name: Beer World II
Author: Larry Force, Niki Jones Agency
Author URI: https://nikijones.com
Description: A Niki Jones Agency custom Wordpress theme for Beer World, designed by Eric Nelson, developed by Larry Force
Version: 2.0
Text Domain: beerworld
Tags: bootstrap, bootstrap 4, beerworld, beer, Niki Jones, Larry Force, beerworld.com
*/

/* * CSS Index * * * * * * * /

   I. Fonts
	- I.I. Google Fonts
	- I.II. Local Fonts
  II. Reset.css
 III. Site-wide
    - III.I. Header
    - III.II. Footer
    - III.III. ADA Compliance
  IV. Front Page
   V. Beer Galleries
  VI. Categories of Posts
 VII. Contact Page
VIII. What's on Tap Page
  IX. Testimonials Page
   X. Promotions
  XI. Gallery
 XII. CSS for Responsive Elements
XIII. Browser Compatibility

* * End of Index * * * * * */


/********************************/
/******* BEGINNING OF CSS *******/
/********************************/

/* * *  I. Fonts * * */

/* * I.I Google Fonts * */

/** Coda **/
/* Font Family 'Coda' */
@import url('https://fonts.googleapis.com/css?family=Coda');

/** Anton **/
@import url('https://fonts.googleapis.com/css?family=Anton');

/* * I.II Local Fonts * */

/** Berthold Akzidenz Grotesk **/

/* Berthold Akzidenz Grotesk */
@font-face {
  font-family: 'Berthold Akzidenz Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url(webfonts/BertholdAkzidenzGrotesk/AkzidenzGrotesk.ttf);
}

/* Berthold Akzidenz Grotesk Italic */
@font-face {
  font-family: 'Berthold Akzidenz Grotesk';
  font-style: italic;
  font-weight: 400;
  src: url(webfonts/BertholdAkzidenzGrotesk/AkzidenzGroteskItalic.ttf);
}

/* Berthold Akzidenz Grotesk Bold */
@font-face {
  font-family: 'Berthold Akzidenz Grotesk';
  font-style: normal;
  font-weight: 600;
  src: url(webfonts/BertholdAkzidenzGrotesk/AkzidenzGroteskBold.ttf);
}

/* Berthold Akzidenz Grotesk Bold Italic */
@font-face {
  font-family: 'Berthold Akzidenz Grotesk';
  font-style: italic;
  font-weight: 600;
  src: url(webfonts/BertholdAkzidenzGrotesk/AkzidenzGroteskBoldItalic.ttf);
}

/* Berthold Akzidenz Grotesk Light */
@font-face {
  font-family: 'Berthold Akzidenz Grotesk';
  font-style: normal;
  font-weight: 300;
  src: url(webfonts/BertholdAkzidenzGrotesk/AkzidenzGroteskLight.ttf);
}

/* Chalkduster */

@font-face {
  font-family: 'Chalkduster';
    src:  url('webfonts/chalk/Chalkduster.ttf.woff') format('woff'),
    url('webfonts/chalk/Chalkduster.ttf.svg#Chalkduster') format('svg'),
    url('webfonts/chalk/Chalkduster.ttf.eot'),
    url('webfonts/chalk/Chalkduster.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

/* Coda Heavy */

@font-face {
  font-family: 'Coda Heavy';
  font-style: normal;
  font-weight: 400;
  src: url('webfonts/Coda-Heavy.ttf');
}

/* II. Reset.CSS */

/**********************************
 *  START OF CSS RESET *************
 ***********************************/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/***********************************
 *  END OF CSS RESET ***************
 ************************************/


/* * * III. Site-wide * * */

/* Preventing "overscrolling" */
html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    color: white;
}

/* End of "overscroll" code */

.mobile-only{
	display: none;
}

article, aside, details, figcaption, figure, main,
footer, header, hgroup, menu, nav, section {
    display: block;
}

blockquote {
    background-color: #813c06; /* For older browsers */
	background-color: #813c0675;
    padding: 5px 20px;
}

p {
	letter-spacing: 0.5px;
    line-height: 1.4;
    margin: 20px 0;
}

p img {
    margin-right: 15px;
}

.wp-google-name{
	filter: invert(100%);
}

#content-area p a,a,p a{
	color: #ffc107;
}

#content-area .wp-gr.wpac a.wp-google-name, a:hover, .wpcf7-submit:hover {
    color: unset;
    text-decoration: none;
    filter: invert(80%) !important;
	transition: filter .75s;
	cursor: pointer;
}

a img:hover {
    filter: invert(100%);
}

.lighter{
	font-weight: lighter;
}

.bolder{
	font-weight: bolder;
}

.glow-white{
	text-shadow: 0 0 3px #FFFFFF;
}

.glow-black{
	text-shadow: 0 0 3px #000000;
}

#site-wrap {
    position: relative;
	width: 100vw;
}

#bgVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
	z-index: -2;
}

#bg-gradient {
    background: -moz-linear-gradient(top, rgba(224,126,20,0) 10%, rgba(224,126,20,1) 75%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(224,126,20,10) 0%,rgba(224,126,20,1) 75%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(224,126,20,0) 10%,rgba(224,126,20,1) 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e07e14', endColorstr='#e07e14',GradientType=0 ); /* IE6-9 */
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

#content-area img{
	max-width: 100%;
}

/* Default Pages */

.page-template-default.page #content-area, .post-template-default.single-post #content-area {
    padding: 9%;
}

#content-area.archive, #content-area.page-template-whatsontap-page, #content-area.page-template-default, main {
    border-bottom: 4px solid #ef5923;
}

/* * * III.I Header * * */

#social {
    position: fixed;
    top: 1%;
    right: 5%;
    z-index: 100;
	transition: all 1.5s;
}

#social a, #social img{
	transition: all 2.5s;
}

span.note {
    text-transform: uppercase;
    font-size: 30pt;
    text-align: center;
    display: block;
    margin: auto;
    font-family: coda;
}



/* Nivo Slider (REPLACED BY NIVO SLIDER ON JUNE 6, 2018) */

/***************************************
 * START NIVO SLIDER CODE BY DEV7studios 
 ***************************************/

/*
 * jQuery Nivo Slider v3.2
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/* The Nivo Slider styles */
/*
.nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	max-width: none;
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}

/* If an image is wrapped in a link */
/*
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
	background:white; 
	filter:alpha(opacity=0); 
	opacity:0;
}
/* The slices and boxes in the Slider */
/*
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
/*
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
/*	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
/*	box-sizing: border-box;         /* Opera/IE 8+ */
/*
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
/*
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
/*
.nivo-controlNav {
	text-align:center;
	padding: 15px 0;
}
.nivo-controlNav a {
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

/*
Skin Name: Nivo Slider Default Theme (modified)
Skin URI: http://nivo.dev7studios.com
Description: The default skin for the Nivo Slider. (modified)
Version: 1.3
Author: Gilbert Pellegrom (modified by Larry Force)
Author URI: http://dev7studios.com
Supports Thumbs: true
*/
/*
.theme-default .nivoSlider {
	position:relative;
	background:#fff url(nivo/loading.gif) no-repeat 50% 50%;
    margin-bottom:10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.theme-default .nivoSlider a {
	border:0;
	display:block;
}

.theme-default .nivo-controlNav {
	text-align: center;
	padding: 20px 0;
}
.theme-default .nivo-controlNav a {
	display:inline-block;
	width:22px;
	height:22px;
	background:url(nivo/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin: 0 2px;
}
.theme-default .nivo-controlNav a.active {
	background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(nivo/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
	opacity: 0;
	-webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
.theme-default a.nivo-prevNav {
	left:15px;
}

.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}

.theme-default .nivo-controlNav.nivo-thumbs-enabled {
	width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
	width: auto;
	height: auto;
	background: none;
	margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
	display: block;
	width: 120px;
	height: auto;
}

/***************************************
 * END OF NIVO SLIDER CODE BY DEV7studios 
 ***************************************/
/*
#header .nivoSlider img {
    min-height: 220px;
    min-width: 100%;
    width: auto;
    height: auto;
    max-width: none;
}

.slider-wrapper {
    position: relative;
    margin-bottom: -10px;
}

header .slider-wrapper .nivo-controlNav {
    text-align: center;
    padding: 0;
    z-index: 5;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

a.nivo-control:only-child {
    display: none;
}


/* Revolution Slider CSS
 * NOTE: This is a replacement for Nivo slider. Nivo slider does not support videos within the slider.
 * Nivo slider code will be retained in comments for potential use later in website's lifetime.
 * */

.fp-link .rev_slider_wrapper, .fp-link .rev_slider_wrapper .slotholder, .fp-link .rev_slider_wrapper .slotholder div, .fp-link .revslider-initialised, .fp-link .active-revslide, .fp-link .rev_slider, .fp-link .rev_slider ul, .fp-link .rev_slider li{
	min-height: 100px;
}

.rev_slider_wrapper, .rev_slider_wrapper .slotholder, .rev_slider_wrapper .slotholder div, .revslider-initialised, .active-revslide, .rev_slider, .rev_slider ul, .rev_slider li{
	min-height: 400px;
}

div.rev_slider_wrapper {
    margin-top: 55px !important;
}

.tp-bullets .tp-bullet{
	background:url(img/bullet.png) no-repeat;
	background-position: center center;
	width: 15px;
    height: 15px;
	background-size: cover !important;
}

.tp-bullets .tp-bullet.selected, .tp-bullets .tp-bullet:hover{
	background:url(img/bullet-active.png) no-repeat;
    background-position: center center;
}

.tp-bullet:only-child {
    display: none;
}

.tp-leftarrow{
	background:url(img/arrow-l.png) no-repeat;
	background-position: center center;
}

.tp-rightarrow{
	background:url(img/arrow-r.png) no-repeat;
	background-position: center center;
}

.tparrows.tp-leftarrow:before{
	content:"";
}

.tparrows.tp-rightarrow:before{
	content:"";
}

/* Disabling Arrows Unless Otherwise Requested */
.bw-arrows.tparrows {
    display: none;
}

/* Disabling clicking videos */
.tp-videolayer .html5vid video{ pointer-events: none }

/* Disabling play/pause button */
.tp-video-play-button { display: none !important; }

/* In Case No Slider Exists */

#spacer + #content-area {
    padding-top: 225px !important;
}




/* Navigation */

#HeaderMenu {
    width: 100%;
    margin: auto;
}

/* nav.navbar {
    position: absolute;
    top: 140px;
    left: 0;
    right: 0;
    z-index: 10;
    max-width: 1400px;
    margin: auto;
    transition: all 0.175s;
	background-position: 0 -400px;
    background-position-y: -400px;
}*/

nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 80px;
    z-index: 10;
    width: 100%;
    max-width: 1370px;
    border: 0;
    box-shadow: 0 6px 6px -6px #000000, 0 9px 9px -9px #000000;
    background: url(img/Header.jpg) no-repeat;
    background-size: cover;
	padding: 0 1.5%;
}

nav ul{
	width:100%;
}

nav ul li{
	position: relative;
}

#header nav ul li a.nav-link {
	height: 40px;
}
	
nav ul li a.nav-link {
    font-size: 12pt;
    font-family: 'Coda Heavy';
    color: white;
    text-transform: uppercase;
    font-weight: normal;
	text-shadow: 0 0 3px #000000;
}

ul.sub-menu.dropdown-menu {
    background-color: #2c1a10;
}

/*make the menu sub-menu items drop down on mouse hover */
li.menu-item a:hover + ul.sub-menu, ul.sub-menu:hover {
    display: block;
    position: absolute;
    top: 95%;
}

/* Logo */

.hasScrolled .logo-spacer:after {
	display: block;
	position: relative;
    width: 10vw;
    display: block;
}

.logo-spacer {
    width: 70px;
}

.logo-spacer a.nav-link {
    display: none;
}

body.home #navLogo {
    position: fixed;
    left: 0;
    right: 0;
    top: 45px;
    margin: auto;
    width: 180px;
	max-width: 180px;
}

body.home .hasScrolled #navLogo, #navLogo {
    position: fixed;
    width: 100%;
    top: 0px;
    right: 0;
    left: 0;
    margin: auto;
    max-width: 120px;
    margin-top: 0;
	z-index: 15;
	transition: all 1s;
}

/* Nav Button */
button.navbar-toggler {
    outline: none !important;
	transition: all 1s;
}

.btn {
  height: 45px;
  width: 45px;
  background-color: transparent;
  border-radius: 100%;
  /* box-shadow: 2px 2px 4px rgba(0,0,0,0.1); */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn .bar {
  height: 4px;
  width: 30px;
  margin-bottom: 6px;
  background-color: white;
  border-radius: 5px;
}
.btn .bar:last-child {
  margin-bottom: 0;
}
.active .btn1 .bar1 {
  animation: bar1-1 0.25s forwards;
}
.back .btn1 .bar1 {
  animation: bar1back-1 0.25s forwards;
}
.btn1 .bar2 {
  transition: 0.25s;
}
.active .btn1 .bar2 {
  opacity: 0;
}
.active .btn1 .bar3 {
  animation: bar3-1 0.25s forwards;
}
.back .btn1 .bar3 {
  animation: bar3back-1 0.25s forwards;
}

/* Animations */

@keyframes bar1-1 {
  0% { 
    transform: none;
  } 50% { 
    transform: translateY(10px);
  } 100% { 
    transform: translateY(10px) rotate(-45deg);
  }
}

@keyframes bar1back-1 {
  0% {
    transform: translateY(10px) rotate(-45deg);
  } 50% {
    transform: translateY(10px) rotate(0);
  } 100% {
    transform: translateY(0);
  }
}

@keyframes bar3-1 {
  0% {
    transform: none;
  } 50% {
    transform: translateY(-10px);
  } 100% {
    transform: translateY(-10px) rotate(45deg);
  }
}

@keyframes bar3back-1 {
  0% {
    transform: translateY(-10px) rotate(45deg);
  } 50% {
    transform: translateY(-10px) rotate(0);
  } 100% {
    transform: translateY(0);
  }
}

/* * * III.II Footer * * */

#site-wrap #foot-info, #site-wrap footer.container, #site-wrap #foot-info p {
    font-family: 'Berthold Akzidenz Grotesk';
    font-weight: lighter;
    font-size: 12pt;
}

#foot{
	background-color:rgb(224,126,0);
	position: relative;
}

footer.container {
    background-clip: content-box;
    background: url(img/Foot.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    max-width: 1370px;
	z-index: 2;
	position: relative;
}

footer.container, #foot-info p {
    line-height: 1.75;
	font-family: Anton;
	font-size: 13px;
	letter-spacing: 1.5px;
}

#foot-info p{
	text-shadow: 1px -1px 4px #000;
}

#footerMenu {
    padding-top: 85px;
    padding-bottom: 15px;
}


#foot-menu {
    display: block;
    width: 100%;
}

#foot-menu li {
    display: inline-block;
}

#foot-menu li a {
    font-size: 12pt;
	letter-spacing: .5px;
    font-weight: normal;
    font-family: Anton;
    color: white;
    padding: 7px;
}

#foot-menu li:after {
    content: '|';
    position: absolute;
    right: -4px;
	bottom: 6px;
    display: block;
	font-size: 12pt;
}

#foot-menu li:last-child:after {
    content: '';
}

#foot-info{
	color: white;
	padding-bottom: 25px;
	letter-spacing: 1.5px;
}

#foot-logo {
    float: left;
    margin: 15px;
    margin-top: -20px;
}

/* Wheat decorations */

.wheat {
    bottom: 0;
    z-index: 0;
    position: absolute;
}

.left.wheat{
	left: 0;
}

.right.wheat{
	right: 0;
}

/* III.III ADA Compliance */

.ada-label {
    position: fixed;
    left: -1000vw;
    max-width: 100vw;
}

/* IV. Home Page */

body.home .navbar.navbar-expand-lg{
	border-bottom: 4px solid #ef5923;
}

body.home div#rev_slider_1_1_wrapper {
    margin-top: 79px !important;
}

body.home main{
	background-color: white;
	padding-top: 5px;
}

body.home main .row{
	margin-left: -17px;
	margin-right: -17px;
	margin-bottom: -2px;
}

.fp-link {
    position: relative;
    height: 375px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    border: solid transparent;
    border-width: 2px;
    background-clip: padding-box;
}

.tint-layer{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 2;
}

.link-text, .link-image {
    position: relative;
    display: table;
	max-width: 100%;
}

.link-text{
	z-index: 4;
} 

.link-image {
	z-index: 3;
}

/* V. Beers Pages */


.tax-beercategory div.rev_slider_wrapper {
    min-height: 485px;
}

body.archive #content-area, body.page-template-default #content-area{
	background: url(img/te-woodgrain.jpg) no-repeat;
	background-size: cover;
}

/* REMEMBER TO FIX THIS GLITCH WITH ALTERNATIVE MEANS AT SOME POINT */
.page-id-20  h1, .tax-beercategory h1 {
    text-align: center !important;
    width: 445px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 100vw !important;
}

#content-area{
	background: url(img/wood.jpg) no-repeat;
	background-size: cover;
	min-height: 80vh;
	padding-bottom: 50px;
	position: relative;
	background-size: cover;
}

#beers .row {
    padding-bottom: 95px;
}

#content-area .beer-logo {
	border: 1px solid white;
    background-color: white;
	width: 140px;
	height: 110px;
}

/* SRM Values of Beer Classes  */
.srm-1{color: #F3F993;}
.srm-2{color: #F5F75C;}
.srm-3{color: #F6F513;}
.srm-4{color: #EAE615;}
.srm-5{color: #E0D01B;}
.srm-6{color: #D5BC26;}
.srm-7{color: #CDAA37;}
.srm-8{color: #C1963C;}
.srm-9{color: #BE8C3A;}
.srm-10{color: #BE823A;}
.srm-11{color: #C17A37;}
.srm-12{color: #BF7138;}
.srm-13{color: #BC6733;}
.srm-14{color: #B26033;}
.srm-15{color: #A85839;}
.srm-16{color: #985336;}
.srm-17{color: #8D4C32;}
.srm-18{color: #7C452D;}
.srm-19{color: #6B3A1E;}
.srm-20{color: #5D341A;}
.srm-21{color: #4E2A0C;}
.srm-22{color: #4A2727;}
.srm-23{color: #361F1B;}
.srm-24{color: #261716;}
.srm-25{color: #231716;}
.srm-26{color: #19100F;}
.srm-27{color: #16100F;}
.srm-28{color: #120D0C;}
.srm-29{color: #100B0A;}
.srm-30{color: #050B0A;}

.beer-glass {
    position: relative;
    float: right;
    max-width: 40%;
    max-height: 250px;
    margin: 2% 3%;
}

table.beer-table {
    color: rgb(216,201,177);
	font-family: 'Berthold Akzidenz Grotesk';
    width: 40%;
    text-align: center;
    border: solid rgb(216,201,177) 1px;
    position: absolute;
    bottom: 3%;
    left: 3%;
}

table.beer-table td, table.beer-table th {
	font-size: 15pt;
    border: solid rgb(216,201,177) 1px;
    padding: 2px 0;
}

table.beer-table td{
	font-size: 20pt;
	font-weight: lighter;
	color: white;
	padding: 5px;
}

article.beer-stats {
    padding: 1%;
    height: 600px;
	position: relative;
}

h2.beer-title {
    color: white;
    font-family: Anton;
    font-size: 20pt;
    max-width: 50%;
    line-height: 1.25;
    margin-bottom: 10px;
	text-transform: uppercase;
    position: absolute;
    bottom: 290px;
	letter-spacing: 1.5px;
}

.beer-blurb {
    color: #d8c9b1;
    width: 100%;
    clear: both;
    font-size: 18pt;
    font-family: 'Berthold Akzidenz Grotesk';
    font-weight: lighter;
    position: absolute;
    top: 52%;
    max-width: 80%;
}

.availability-icons {
    position: absolute;
    right: 20%;
    bottom: 3%;
    width: 35%;
    text-align: right;
	height: 50px;
}

img.availability-icon{
	margin: 0 2px;
}

.availability-icons h3 {
    color: #d8c9b1;
    float: left;
	font-family: 'Berthold Akzidenz Grotesk';
	font-size: 15pt;
    left: 0;
    top: 0;
    position: absolute;
}

.arrow-text {
    float: right;
	margin: 20px;
}

.arrow-text a, .arrow-text a:active, .arrow-text a:visited {
    color: white;
}

.archive.tax-beercategory #content-area, .page-id-20 #content-area{
    border-top: 3px solid white;
}

/* VI. Categories of Posts */

div.thumb img {
    width: 300px;
    height: auto;
    max-width: 100%;
}

body.category.archive .slider-wrapper {
    margin-bottom: -55px;
}

body.category.archive .slider-wrapper + #content-area {
    padding-top: 75px;
}

/*
body.archive .rev_slider_wrapper li {
    border-bottom: 3px solid white;
}
*/

.post-title {
    font-size: 32pt;
	letter-spacing: 2px;
    font-family: 'Berthold Akzidenz Grotesk';
	text-transform: uppercase;
}

body.category div.thumb img {
    border: 1px solid white;
    background-color: black;
}

.event-details {
    font-family: 'Berthold Akzidenz Grotesk';
    font-size: 23pt;
    font-weight: lighter;
    display: inline-block;
	letter-spacing: 1.5px;
    margin-top: -6px;
	margin-bottom: 20px;
}

.post-content {
    margin-top: 20px;
	margin-bottom: 35px;
    font-size: 22pt;
    font-family: 'Berthold Akzidenz Grotesk';
    font-weight: lighter;
}

a.learn-more img {
    margin-bottom: 20px;
	width: 115px;
}

/* VII. Contact Page */

#contact-head {
    position: absolute;
    bottom: 100%;
    padding-bottom: 20px;
    z-index: 5;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    font-size: 34pt;
    font-family: coda heavy;
    font-weight: bolder;
    text-transform: uppercase;
	box-shadow: 0 25px 15px #f3af3270;
}

div.wpcf7{
	margin-top: 20px;
}

.wpcf7 p {
    margin: 0;
}

body.page-template-contact-page main#content-area {
    min-height: 5px;
    padding: 0;
    border-bottom: 8px solid #e54016;
}

body.page-template-contact-page textarea.wpcf7-form-control.wpcf7-textarea {
    height: 140px;
    max-height: 140px;
    min-height: 140px;
}

body.page-template-contact-page form.wpcf7-form p {
    margin-bottom: 0;
}

body.page-template-contact-page textarea.wpcf7-form-control, input.wpcf7-form-control {
    position: relative !important;
    float: right;
    display: inline-block;
    width: 65%;
    right: 0;
    margin-top: -40px;
	box-shadow: 0 0 2px #000000bd;
}

body.page-template-contact-page form.wpcf7-form p, form.wpcf7-form, form.wpcf7-form label, form.wpcf7-form span {
    position: relative;
    width: 100%;
    display: block;
}

input.wpcf7-form-control.wpcf7-submit {
    width: 100px;
    height: 35px;
    clear: both;
    margin-top: 15px;
}

input.wpcf7-form-control.wpcf7-submit {
    width: 90px;
    height: 30px;
    clear: both;
    margin-top: 15px;
    color: white;
    background-color: #e54116;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-family: Anton;
    font-size: 12pt;
    letter-spacing: 1px;
    line-height: 30px;
}

body.page-template-contact-page #content-area .row, body.page-template-location-directions #content-area .row {
	padding: 55px 5%;
    max-width: 100%;
    margin: auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fac237+0,f7c13a+100 */
	background: rgb(250,194,55); /* Old browsers */
	background: -moz-linear-gradient(45deg, rgba(250,194,55,1) 0%, rgba(247,193,58,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(250,194,55,1) 0%,rgba(247,193,58,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(250,194,55,1) 0%,rgba(247,193,58,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac237', endColorstr='#f7c13a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

body.page.page-template.page-template-location-directions #content-area{
	padding-bottom: 0;
	min-height: 0;
}

body.page.page-template.page-template-location-directions #content-area .row {
    padding-top: 0;
    padding-bottom: 0;
}

form.wpcf7-form label {
    width: 34%;
    font-size: 16pt;
    font-weight: lighter;
    text-align: right;
    color: black;
    font-family: "Berthold Akzidenz Grotesk";
	margin-bottom: -17px;
}


/* VIII. What's on Tap Page */

#tap-beer-display h2 {
    text-align: center;
    margin: auto;
    font-family: coda heavy;
	font-weight: bolder;
    letter-spacing: -5px;
    font-size: 34pt;
    line-height: 1.5;
    border-bottom: 2px solid white;
    margin-bottom: 20px;
    margin-top: 32px;
}

#tap-click h2 {
    text-align: center;
    font-family: coda heavy;
    font-size: 34pt;
    font-weight: bolder;
	letter-spacing: -5px;
    margin-bottom: 30px;
    margin-top: 20px;
}

#tap-beer-display .tap-board-head {
    font-size: 24pt;
    margin: 0% 0% 0% 45%;
    padding-left: 150px;
    max-width: 600px;
    width: 100%;
    display: block;
    text-align: left;
    white-space: nowrap;
}

#tap-beer-display .tap-board-head h1 {
    display: inline-block;
    text-align: left;
    max-width: 50%;
    white-space: pre-wrap;
    margin: 5%;
    vertical-align: middle;
    line-height: 1.5;
	text-transform: uppercase;
}

#tap-beer-display h3{
	display: inline-block;
	font-family: Berthold Akzidenz Grotesk;
	font-size: 18pt;
}

#tap-beer-display {
    background-image: url(img/chalkboard.jpg);
    font-family: chalkduster;
    background-size: 100% 1000px;
    font-size: 16pt;
    transition: all 1s;
	height: 150px;
}

.board-logo {
    width: 150px;
    max-height: 150px;
    vertical-align: middle;
    margin-left: -150px;
}

.stat {
    line-height: 2;
}

#tap-beer-display article {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 1s;
}

.tap-board .row {
    margin: 35px 10px;
}

.tap-board .row.stats {
    border-bottom: 2px solid white;
    padding: 25px 0;
}

#tap-click {
    background-color: #f7c23f;
    border: 7px solid #ef7f09;
    padding: 15px 0;
}

#tap-click .row {
    margin: auto;
}

.tap {
    background-image: url(img/tap.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 130px;
    width: 4.167%;
    background-size: contain;
	position: relative;
	cursor: pointer;
}

.tap:before, .tap:after {
    content: "";
    display: block;
    height: 15px;
    position: absolute;
    width: 19%;
    bottom: 16px;
    border: solid black;
    border-width: 3px 0px;
}

.tap:before {
    left: 0;
}

.tap:after {
    right: 0;
}

.tap img.tap-logo {
    max-width: 100%;
    border-radius: 200px;
    width: 50px;
    height: 50px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
	top: 15px;
    background-color: white;
    border: 2px solid black;
	max-height: 4vw;
}

#tap-blurb {
    padding: 65px 5%;
}

#tap-click h2 {
    color: #363637;
    font-family: coda heavy;
    margin-bottom: 40px;
}

/* IX. Testimonials Page */

.review {
    margin: 35px auto;
    position: relative;
	border: 1px solid transparent;
}

h2.widget-title, h2.review-title{
    font-family: coda;
    font-size: 30pt;
    text-align: left;
    position: absolute;
    left: 5px;
	top: 10px;
}

#content-area a.wp-google-url {
    text-align: left !important;
    padding-top: 33px !important;
    color: #FF9800 !important;
    cursor: pointer;
}

#content-area .wp-google-left {
    display: none !important;
    position: absolute !important;
}

#content-area .wp-google-place .wp-google-name a span {
    /* color: #FFC107 !important;
    filter: invert(1);
	font-size: 30pt; */
	display: none;
}

#content-area .wp-gr.wpac a.wp-google-name {
    color: #FFC107 !important;
    filter: invert(0) !important;
}

#content-area .wp-google-place {
    margin-top: 55px !important;
    display: block;
    padding: 14px 10px !important;
	border: 1px solid transparent !important;
}

.review .wp-gr .wp-google-review {
    padding: 1% !important;
}

#content-area .review .wp-google-name, #content-area .review .wp-google-url {
    font-family: coda !important;
    font-size: 16pt !important;
}

#content-area .review .wp-google-text {
    font-family: Berthold Akzidenz Grotesk !important;
    font-size: 18pt !important;
    font-weight: lighter !important;
}

#content-area .review .wp-google-review .wp-google-left{
	display: none !important;
}

#content-area .wp-google-stars {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    margin-top: 6px !important;
}


/* X. Promotions */

img.coupon {
    max-width: 100%;
	padding-bottom: 20px;
}

.page-template-archive-promo h1 {
    margin: auto;
    text-align: center;
    padding: 2.5% 0px;
}

.page-template-archive-promo h1, .page-template-archive-promo h2 {
	text-transform: uppercase;
	font-size: 25pt;
    font-family: Anton;
}

.promotion.row {
    padding: 0 9%;
	margin-bottom: 20px;
}

/* XI. Gallery Page */

#gallery {
    padding: 35px 10%;
    max-width: 100%;
    margin: auto;
    border-top: 3px solid white;
}

#gallery .gallery-img{
	position: relative;
	height: 260px;
	overflow: hidden;
	border: transparent solid 4px;
}

#gallery .gallery-img img {
    position: absolute;
	top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
	min-width: 100%;
	max-width: unset;
	min-height: 100%;
	max-height: unset;
	width: auto;
	height: auto;
	margin: auto;
}

#gallery .gallery-img:hover, #gallery .gallery-img a:hover, #gallery .gallery-img a img:hover {
    display: block;
    border: solid #ffffffff 1px;
}

#gallery .gallery-img a:hover, #gallery .gallery-img a img:hover {
	min-width: 100%;
	min-height: 100%;
}

body.page-template-image-gallery #contact-head {
    box-shadow: none;
}

/*** XII. CSS for Responsive Elements **************************/

.navbar .dropdown-menu li {
  width: 100%;
  margin-left: 0 !important;
}

/* Custom Break Point For Mobile */
@media (max-width: 500px) {
	.fp-link {
    	font-size: 60%;
    	height: 100vw;
    	padding-bottom: 5%;
    	padding-right: 0;
    	padding-left: 0;
	}
	
	.beer-glass {
    	margin: -10% 5% 30% 0;
	}
}

/*** Bootstrap 4 Breakpoints ********************************/

/* VERY small devices, custom query */
@media (max-width: 465px) {
	
	.beer-glass {
    	margin-top: -35% !important;
	}
	
	body#body.tax-beercategory div.rev_slider_wrapper {
    	min-height: 0 !important;
	}
	
}


/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
	article.beer-stats {
    	padding: 10%;
	}
	.container {
    	width: 100%;
    	max-width: 100%;
	}
	.beer-glass {
    	margin: -5% 10%;
	}
	#body #social {
    	bottom: unset;
    	top: 40vh;
    	right: 2%;
    	text-align: center;
	}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {}
@media (min-width: 768px) and (max-width: 991px) {
	article.beer-stats {
    	padding: 4%;
	}
}
@media (max-width: 991px) {
	#navLogo {
   		right: 0;
	}
	
	.mobile-only{
		display: block;
		display: unset;
	}
	
	.tax-beercategory div.rev_slider_wrapper {
    	min-height: 17.5vh;
	}
	
	.micro-text {
    	font-size: 25px !important;
    	line-height: 25px !important;
	}
	
	.link-text {
    	position: relative;
    	bottom: 40px;
	}
	
	.link-text span {
    	font-size: 30pt;
	}
	
	#content-area img{
		max-height: unset;
	}
	
	header nav.navbar {
	    height: auto;
	    background-repeat: repeat;
	    background-size: 3000px auto;
	    background-position: 99% 10%;
		top: 0;
		width: 100%;
		left: 0;
		right: unset;
	}
	
	.navbar-toggler{
		z-index:12;
	}
	
	#HeaderMenu {
    	width: 100%;
    	position: fixed;
    	left: 0;
    	right: 0;
    	top: 0;
    	bottom: 0;
    	padding: 5%;
	}
	
	#menu-header-menu {
    	width: 100%;
    	height: 600px;
    	padding-top: 30px;
	}
	
	#HeaderMenu li.menu-item {
    	width: 85%;
    	text-align: left;
    	background-color: #2c1a0f47;
    	padding: 0 1%;
	}
	
	li#menu-item-176 {
    	display: none;
	}
	
	#HeaderMenu ul.sub-menu {
	    display: block;
	    position: relative;
	    width: 100%;
	    padding: 0;
	    top: 0;
	}
	
	ul.sub-menu .nav-link{
		white-space: nowrap;
	}
	
	button.navbar-toggler.back + #HeaderMenu {
    	max-height: 0;
    	height: 0;
    	overflow: hidden;
		z-index: 0;
	}
	
	button.navbar-toggler.active {
    	position: fixed;
    	left: 0;
    	top: 0;
	}
	
	button.navbar-toggler.back + #HeaderMenu ul, button.navbar-toggler.back + #HeaderMenu li{
		display: none;
	}
	
	button.navbar-toggler.active + #HeaderMenu {
    	max-height: 100vh;
    	height: 100vh;
		background-color: #763704;
    	overflow: auto;
		z-index: 11;
	}
	
	nav.navbar{
		z-index: 11;
	}
	
	#navLogo, body.home .hasScrolled #navLogo {
	    position: fixed;
	    width: 25%;
	    top: 15px;
	    right: 5%;
	    left: unset;
	    margin: unset;
	    max-width: 90px;
	    margin-top: -10px;
	}
	
	.tap {
	    height: 130px;
	    width: 33.33%;
	    margin-bottom: 20px;
	}
	
	.tap:before, .tap:after{
		display: none;
	}
	
	#tap-beer-display {
    	height: auto !important;
		background-size: cover;
	}
	
	#tap-beer-display .tap-board-head h1 {
    	max-width: 100%;
    	width: 100%;
    	display: block;
    	font-size: 20pt;
	}
	
	.availability-icons, table.beer-table{
		bottom: 0;
	}
	
	#content-area .beer-logo {
    	max-width: 45%;
    	max-height: 150px;
	}
	
	h2.beer-title {
    	max-width: 100%;
	}
	
	form.wpcf7-form label, body.page-template-contact-page textarea.wpcf7-form-control, input.wpcf7-form-control {
    	float: unset;
    	width: 100%;
    	display: block;
    	margin-bottom: 20px;
    	position: relative;
	}
	
	.page-template-archive-promo h1 {
    	margin-bottom: 60px;
	}
	
	.post-title {
    	margin-top: 10px;
	}
	
	.fp-link {
    	font-size: 60%;
	}
	#foot-logo {
    	margin-left: 5%;
    	margin-right: 100%;
	}
	
	#tap-beer-display .tap-board-head {
    	margin: auto;
    	padding: 0;
    	text-align: center;
	}
	
	.board-logo{
		margin-left: unset;
	}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	li.menu-item:first-child {
    	margin-left: -20px;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.fp-link {
    	padding-bottom: 10%;
	}
}

@media (max-width: 1199px) {
	.page-id-20 h1, .tax-beercategory h1 {
		width: 35vw !important;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.container {
		/* I know the number is higher than 1200, but no worries, it stays in bounds. */
    	max-width: 1400px;
	}
	
	ul.sub-menu.dropdown-menu {
	    left: -100%;
	    right: -125%;
	    margin: auto;
	}
	
	.left.wheat {
		margin: auto;
		right: 0;
    	left: 0;
		padding-right: 1600px;
	}
	
	.right.wheat {
		margin: auto;
    	right: 0;
		left: 0;
		padding-left: 1600px;
	}
	
	table.beer-table{
		bottom: 12%;
	}
	
	.availability-icons {
    	bottom: 14%;
	}
	
	/* I know the following line looks bad, but it's used to center the header logo in respect to the navigation items. */
	a.nav-link {
    	width: 120%;
	}
	
	.sub-menu.dropdown-menu a.nav-link{
		width: auto;
		max-width: 100%;
	}
}

@media (max-width: 1825px) {

	#social {
	    top: 95px;
	    right: 1.5%;
		text-align: center
	}
	
	#social a {
    	display: block;
    	width: 100%;
		text-align: center;
	}
}

@media (min-width: 1826px) {
	#social {
    	position: fixed;
    	right: 0;
    	left: 0;
    	margin: auto;
    	padding-left: 1600px;
    	text-align: left;
    	z-index: 0;
    	max-width: 1800px;
	}
	
	.beer-glass {
    	position: relative;
    	float: right;
    	max-width: 40%;
    	max-height: 250px;
    	margin: 2% 13%;
	}
}

/* * * * XIII. Browser Compatibility * * * * * */

/* Internet Explorer Edits */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ styles */
    .beer-glass{
	  display: none !important;
    }
}