/*
Theme Name: Brewio
Theme URI: http://www.easybeerlister.com/wordpress-themes/brewio
Author: Alex Standiford
Version: 0.1
Author URI: http://www.alexstandiford.com
Description: Theme designed specifically to work with Easy Beer Lister for breweries, bars, and taprooms.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, green, light, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-menu, featured-image-header, featured-images, full-width-template, threaded-comments, translation-ready, photoblogging
Text Domain: brewio

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*--- DEFAULTS ---*/

$admin-bar-height:32px;

/*--- BEGIN RESET ---*/

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; 
  text-decoration:none;
}

/* 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, &:after {
    content: '';
    content: none; } }

q {
  &:before, &:after {
    content: '';
    content: none; } }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img{
  max-width:100%;
  height:auto;
}

.text-center{
  text-align:center;
}

strong{
  font-weight:bold;
}

emphasis{
  font-style:italic;
}

/*---GLOBAL---*/

*{
	transition: all .125s ease-in-out;
}

body{
  background:#eae9e9;
}

/*---TYPOGRAPHICAL ELEMENTS---*/

@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=BenchNine);

$p:16px;
$h1:40px;
$h2:30px;
$h3:25px;
$h4:23px;
$h5:22px;
$h6:21px;

$heading-ff:'BenchNine',sans-serif;
$paragraph-ff:'raleway',serif;

body{
  font-size:$p;
  font-family:$paragraph-ff;
}

p{
  margin-bottom:20px;
  line-height:25px;
}

em,
var{
  font-style:italic;
}

strong{
  font-weight:bold;
}

abbr,
acronym {
  border-bottom: 1px dotted #c42c2c;
}

big {
  font-size: 125%;
}

strike,
del{
  text-decoration:line-through;
}

ins{
  text-decoration:underline;
}

//Headings
h1,
h2,
h3,
h4,
h5,
h6{
  font-family:$heading-ff;
  text-transform:uppercase;
  color:#2C2222;
}

h1{
  font-size:$h1;
  line-height:$h1;
  margin-bottom:$h1 * .5;
  margin-top:$h1 * .5;
}

h2{
  font-size:$h2;
  line-height:$h2 + 10px;
  margin-bottom:$h2 * .5;
  margin-top:$h2 * .5;
}

h3{
  font-size:$h3;
  line-height:$h3;
  margin-bottom:$h3 * .5;
  margin-top:$h3 * .5;
}

h4{
  font-size:$h4;
  line-height:$h4;
  margin-bottom:$h4 * .5;
  margin-top:$h4 * .5;
}

h5{
  font-size:$h5;
  line-height:$h5;
  margin-bottom:$h5 * .5;
  margin-top:$h5 * .5;
}

h6{
  font-size:$h6;
  line-height:$h6;
  margin-bottom:$h6 * .5;
  margin-top:$h6 * .5;
}

//Anchor Tags
a{
  color:#c42c2c;
}

a:hover,
header.header-sticky a:hover{
  color:#A73535;
}

//Quotes
blockquote {
  text-align: center;
  padding: 20px 0;
  margin: 20px 0;
  border-color: #333;
  border-width: 1px 0px 1px 0px;
  border-style: solid;
}

blockquote>*:last-of-type{
  margin-bottom:0;
  padding-bottom:0;
}

blockquote{
  font-style:italic;
}

cite{
  font-style:italic;
}

q{
  font-style:italic;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

q:before{
    content: open-quote;
}

q:after{
    content: close-quote;
}

//Subscript
//Superscript

sub,
sup{
  font-size: 80%;
}

sub{
  vertical-align: sub;
}

sup{
  vertical-align:super;
}

//Tables
th,td{
  border:1px solid #eee;
  padding:5px;
}

table{
  margin-bottom:20px;
}

tbody tr:nth-of-type(odd) {
  background: #EAE9E9;
}

tbody tr:hover{
  background: #D2CBC5;
}

thead{
  background:#2C2222;
  font-family: "BenchNine", sans-serif;
  font-size:130%;
  color:white;
}

thead th,
thead td{
  padding-top:10px;
  padding-bottom:10px;
}

//Definition Lists
dd {
    padding-left: 10px;
    margin-bottom:10px;
    font-style:italic;
}

dt{
    font-weight:bold;
    margin-bottom:3px;
}

//Unordered Lists
//Ordered Lists
.single-post .primary-content ul,
.page .primary-content ul,
.comment-content ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
.single-post .primary-content ol,
.page .primary-content ol,
.comment-content ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
.single-post .primary-content ul ul, ol ul,
.page .primary-content ul ul, ol ul,
.comment-content ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
.single-post .primary-content ol ol, ul ol,
.page .primary-content ol ol, ul ol,
.comment-content ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

//Code
//Pre

code,
kbd,
tt,
pre{
  background:#EAE9E9;
  padding:2px 6px;
  border-radius:3px;
  color:#c42c2c;
  font-family:monospace;
}

pre{
  white-space:pre-wrap;
}

//Buttons
input[type="submit"],
.btn,
#tribe-events .tribe-events-button,
.pagination a{
  border:none;
  background:#c10000;
  display:inline-block;
  padding:5px 10px;
  color:white;
}

input[type="submit"]:hover,
.btn:hover,
#tribe-events .tribe-events-button:hover,
.pagination a:hover{
  background:#e54d4d;
  color:white;
  cursor:pointer;
}

#tribe-events .tribe-events-button{
  padding:10px 20px;
}

.btn.large{
  padding:10px 20px;
}

.btn.selected{
  background:#e54d4d;
}

/*---VIDEO---*/
.video-container,
.wp-video{
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-container iframe,
.wp-video .mejs-container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*---HEADER---*/

$header-height:100px;
$header-sticky-height:50px;
$header-font-size:16px;
$site-name-font-size:25px;

header{
  position:fixed;
  width:100%;
  top:0;
  left:0;
  height:$header-height;
  background:#2C2222;
  z-index:100;
}

.home header,
.single-post header,
.single-tribe_events header,
.page:not(.page-template-template-minimal) header{ 
  background:transparent;
}

header.header-sticky,
.error404 header.header-sticky,
.page header.header-sticky{
  height:$header-sticky-height;
  background:#2C2222;
}

.logged-in header,
.logged-in header .logo{
  top:$admin-bar-height;
}

header nav{
  width:80%;
  top:($header-height - $header-font-size) / 2;
  right:10%;
  position:fixed;
  z-index:1000;
}

header .logo{
  top:0;
  left:20%;
  position:fixed;
  height:$header-height;
}

header.header-sticky .logo{
  height:$header-sticky-height;
}

header .logo h1{
  height: 100%;
  z-index: 1001;
  left:0;
  color: white;
  margin: 0;
  margin-top:$header-height / 4;
  font-size:$site-name-font-size * 1.5;
  margin-top:25px;
  line-height:100%;
}

header.header-sticky .logo h1{
  font-size:$site-name-font-size;
  margin-top:10px;
}

header .logo img {
  position: absolute;
  top: 5px;
  left:0;
  transform: translate(calc(-100% - 20px));
  height: calc(100% - 10px);
  width: auto;
}

header.header-sticky nav{
  top:($header-sticky-height - $header-font-size) / 2;
}

.logged-in header nav{
  top:(($header-height - $header-font-size) / 2) + $admin-bar-height;
}

.logged-in header.header-sticky nav{
  top:(($header-sticky-height - $header-font-size) / 2) + $admin-bar-height;
}

header nav>ul{
  display:flex;
  width:100%;
  margin:0;
  padding:0;
  flex-direction:row-reverse;
}

header nav>ul li{
  margin-right:20px;
}

header a{
  color:white;
  text-decoration:none;
  font-family:$heading-ff;
  text-transform:uppercase;
  font-size:$h5;
}

header a:hover{
  color:#f2cdcd;
}

/*--sub menus---*/
.sub-menu>.menu-item:not(:first-of-type):not(:last-of-type){
  margin-top: 6px;
  margin-bottom: 6px;
}

header nav>ul .sub-menu{
  padding:10px;
  position:absolute;
  opacity:0;
  z-index:1000;
  top:-500px;
}

header nav>ul .sub-menu>li>.sub-menu{
  left:100%;
  white-space:nowrap;
}

header nav>ul .sub-menu.open{
  opacity:1;
  top:initial;
}

.single header .sub-menu>li>.sub-menu,
.page header .sub-menu>li>.sub-menu{
  top:-3px;
}

header .sub-menu,
header.header-sticky .sub-menu{
  background:#4d4343;
  border:3px solid #2c2222;
  border-top-width:10px;
}

.single-tribe_events .sub-menu,
.single-post .sub-menu,
.page .sub-menu{
  background:#e54d4d;
  border:3px solid #A73535;
}

.home .sub-menu{
  background:rgba(255,255,255,0.125);
  border:2px solid white;
}

.home header nav>ul .sub-menu>li>.sub-menu{
  top:-2px;
}

header nav>ul .sub-menu>li>.sub-menu,
header.header-sticky nav>ul .sub-menu>li>.sub-menu{
  top:-10px;
}

header>nav>ul>li>.sub-menu:before {
  content:" ";
  width: 0px;
  height:0px;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #4D4343;
  display: block;
  position:relative;
  top:-17px;
  left:0%;
  background:transparent;
}

.single-tribe_events header>nav>ul>li>.sub-menu:before,
.single-post header>nav>ul>li>.sub-menu:before,
.page header>nav>ul>li>.sub-menu:before{
  border-bottom-color:#e54d4d;
}

.single-tribe_events header.header-sticky>nav>ul>li>.sub-menu:before,
.single header.header-sticky>nav>ul>li>.sub-menu:before,
.page header.header-sticky>nav>ul>li>.sub-menu:before{
  border-bottom-color:#4D4343;
}

.home header:not(.header-sticky)>nav>ul>li>.sub-menu:before{
  display:none;
}

/*---Body Wrapper---*/
.body-wrapper{
  display:flex;
  margin:auto;
  max-width:1200px;
  width:100%;
  margin-top:$header-height + 20px;
}

.logged-in .body-wrapper{
  margin-top:$header-height + $admin-bar-height + 20px;
}

/*---Primary Content---*/

.bypostauthor{
  font-style:italic;
}

$primary-content-width:60%;

.primary-content{
  width:$primary-content-width;
}

//Image Handling
.primary-content [class*="wp-caption"],
.primary-content .wp-caption-text,
.gallery-caption,
.primary-content>img{
    padding: 20px;
    max-width: calc(100% - 40px);
}

.alignleft {
    padding: 0 20px 20px 0;
    float:left;
}

.alignright{
    padding:0 0 20px 20px;
    float:right;
}

.aligncenter{
    text-align:center;
    margin:auto;
}

/*---Screen Reader---*/
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/*---Sidebar---*/

#sidebar{
    width: 30%;
    margin-left: 5%;
    padding: 30px;
    background: white;
}

#sidebar .sidebar-title {
  text-align: center;
  border-bottom: 1px solid black;
  margin-bottom: 25px;
  margin-top:20px;
}

#sidebar .ebl-random-beer img{
  max-height:200px;
  width:auto;
  margin: auto;
}

#sidebar .ebl-random-beer,
#sidebar .ninja-forms-cont{
  display: flex;
  flex-wrap: wrap;
  text-align:center;
  background:#B9B2B2;
  border: 2px solid #524B4B;
  padding:10px;
  border-radius:5px;
  color:white;
}

#sidebar .ninja-forms-form-wrap {
  margin: auto;
}

#sidebar .ebl-random-beer h3 {
  line-height:100%;
  font-size:150%;
  margin:auto;
  margin-bottom:0;
}

#sidebar .ebl-on-tap-widget li {
    margin-bottom: 8px;
    margin-top: 8px;
}

/*---Loop Content---*/

.loop-post {
  display: flex;
  margin-bottom: 50px;
  background:white;
  padding:50px;
}

.loop-post h2 a{
  color:#190f0f;
  border-bottom:3px solid #580d0d;
}

.loop-post h2 a:hover{
  color:#c10000;
  border-bottom:3px solid #e54d4d;
}

.loop-content-image{
  max-width:40%;
  width:800px;
  min-height:200px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-right:30px;
}

.loop-content-wrapper{
  min-width:60%;
  margin:auto;
}

.sticky {
  background: #b9b2b2;
  width: calc(100% - 4px);
  margin-left: -50px;
  margin-top: -50px;
  border: 2px solid #524B4B;
}

/*---Post Pagination---*/
.post-pagination{
    width: $primary-content-width;
    padding-bottom: 50px;
    margin:auto;
    display:flex;
    justify-content:space-around;
}

/*---Single Post---*/
.post-title{
  margin-top:0;
  width:100%;
  padding:$header-height 0px 20px 0px;
  background:#A73535;

}

.post-title h1,
.post-title h2{
  color:white;
  text-align:center;
}

.post-title h1 {
  line-height: 50px;
  margin-bottom: 0;
  word-break: break-word;
  width: 90%;
  margin: auto;
}

.attachment-post-thumbnail {
    margin: auto;
    display: block;
}

.primary-content{
  background:white;
  padding:50px;
}

.single .body-wrapper {
    margin-top: 50px;
}

.wp-post-image {
    max-height: 600px;
    width: auto;
}

//Pagination

.pagination{
  display:flex;
}

.pagination a{
  color:white;
}

.pagination a{
  flex-basis:0;
  flex-grow:1;
  text-align:center;
  margin:0px 20px;
}

//Twitter Widget
twitterwidget {
    margin: auto;
}

/*---404 Page---*/

.error404 .body-wrapper{
  padding-top:300px;
  padding-bottom:300px;
}

/*---No Sidebar Template---*/

.page-template-template-no-sidebar .body-wrapper,
.error404 .body-wrapper{
  margin-top:80px;
}

.page-template-template-no-sidebar .primary-content,
.error404 .primary-content{
  width:100%;
}

/*---Minimal Layout Template---*/

.page-template-template-minimal .primary-content{
  width:100%;
  background:transparent;
}

/*---Home Page Template---*/
$heading-text-offset-top:200px;
$home-event-height:400px;
$shadowbox-height:300px;
.page-template-template-home .primary-content{
  width:100%;
  background:transparent;
  padding-right:0;
  padding-left:0;
}
#tribe-events-content-wrapper{
  padding-bottom:50px;
}

.heading-wrapper{
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  height:500px;
  margin-top:($header-height + 102px) * -1;
  width:100%;
}

.page-template-template-home .body-wrapper{
  max-width:none;
}

.heading-wrapper .heading,
.element-wrapper .shadowbox{
  width: 100%;
  background:rgba(0,0,0,0.7);
}

.heading-wrapper .heading{
  padding-left: 10%;
  padding-top: $heading-text-offset-top;
  height:500px - $heading-text-offset-top;
  width:90%;
}

.element-wrapper .shadowbox{
  padding-top: $shadowbox-height / 2;
  height:$shadowbox-height;
}

.element-wrapper .shadowbox .element{
  transform:translateY(-20%);
}

.heading-wrapper .heading h1,
.heading-wrapper .heading p{
  color:white;
  width:50%;
}

.page-template-template-home .element{
  padding-top:50px;
  padding-bottom:50px;
  width:100%;
  max-width:800px;
  margin:auto;
}

.page-template-template-home .element.sans-pb{
  padding-bottom:0px;
}

.page-template-template-home .element.sans-pt{
  padding-top:0px;
}

.page-template-template-home .element.extra-wide{
  max-width:1300px; 
}

.page-template-template-home .element .beers,
.page-template-template-home .element .events{
  display:flex;
  flex-wrap:wrap;
}

.page-template-template-home .element .beer,
.page-template-template-home .element .event{
  text-align:center;
  margin-bottom:200px;
  min-width:100px;
  background-repeat:no-repeat;
}
.page-template-template-home .element .event h3{
  padding-top:50px;  
}

.page-template-template-home .element .event h3,
.page-template-template-home .element .event a,
.page-template-template-home .element .event p{
  color:white;
  width:90%;
  margin:auto;
}

.page-template-template-home .element .event:not(:first-of-type){
  border-left:3px solid white;
}

.page-template-template-home .element .beer{
  background-size:contain;
  background-position:bottom center;
  height:200px;
  width:10%;
  margin-left:1.25%;
  margin-right:1.25%;
}

.page-template-template-home .element .event{
  background-size:cover;
  background-position:center;
  height:$home-event-height;
  flex-grow:1;
  margin-bottom:50px;
  flex-basis:0;
}

.page-template-template-home .element .event:hover{
  flex-grow:2;
}

.page-template-template-home .element .beer:hover{
  padding-bottom:10px;
  margin-bottom:-10px;
}

.page-template-template-home .element .beer p{
  bottom:5px;
  padding-top:230px;
}

.element h2{
  text-align:center;
  border-bottom:1px solid #333;
  width:50%;
  margin:auto;
  margin-bottom:50px;
  font-size:$h1;
}

.element .btn {
  text-align: center;
  display: block;
  margin: auto;
  width: 200px;
}

.element-wrapper{
  background-position:center;
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

.element-wrapper .shadowbox .element h2,
.element-wrapper .shadowbox .element p{
  color:white;
  width:90%;
  margin-left:5%;
}

.element-wrapper .shadowbox .element h2{
  border-bottom:1px solid white;
}

/*---SINGLE EVENT---*/

.events .shadowbox{
  height:$home-event-height;
  padding-top:0;
  background:rgba(0,0,0,0.5);
}

.events .shadowbox:hover{
  background:rgba(0,0,0,0.3);
}

.tribe-events-divider{
  display:inline;
}

.tribe-events-event-image img {
  margin: auto;
  max-width: 800px;
  width: 100%;
  margin-left: 0!important;
  transform: translateX(0%)!important;
}

/*---EVENT CALENDAR---*/
.post-type-archive-tribe_events .body-wrapper{
  margin-top:$header-height;
}

.datepicker-dropdown{
  top:$header-height + 90px!important;
}

#tribe-events-content .tribe-events-tooltip h4,
#tribe_events_filters_wrapper .tribe_events_slider_val,
.single-tribe_events a.tribe-events-gcal,
.single-tribe_events a.tribe-events-ical
{
  color:#c42c2c;
}

#tribe-events .tribe-events-button, #tribe-events .tribe-events-button:hover, #tribe_events_filters_wrapper input[type=submit], .tribe-events-button, .tribe-events-button.tribe-active:hover, .tribe-events-button.tribe-inactive, .tribe-events-button:hover, .tribe-events-calendar td.tribe-events-present div[id*=tribe-events-daynum-], .tribe-events-calendar td.tribe-events-present div[id*=tribe-events-daynum-]>a{
  background:#c42c2c;
}

.tribe-events-calendar td.tribe-events-past div[id*=tribe-events-daynum-], .tribe-events-calendar td.tribe-events-past div[id*=tribe-events-daynum-]>a,
.tribe-events-day .tribe-events-day-time-slot h5,
.tribe-events-notices,
#tribe-events-content .tribe-events-calendar td.tribe-events-present.mobile-active:hover, .tribe-events-calendar td.tribe-events-present.mobile-active, .tribe-events-calendar td.tribe-events-present.mobile-active div[id*=tribe-events-daynum-], .tribe-events-calendar td.tribe-events-present.mobile-active div[id*=tribe-events-daynum-] a,
#tribe-events-content .tribe-events-calendar .mobile-active:hover, #tribe-events-content .tribe-events-calendar td.tribe-events-othermonth.mobile-active, #tribe-events-content .tribe-events-calendar td.tribe-events-othermonth.mobile-active div[id*=tribe-events-daynum-], #tribe-events-content .tribe-events-calendar td.tribe-events-othermonth.mobile-active div[id*=tribe-events-daynum-] a, .tribe-events-calendar .mobile-active div[id*=tribe-events-daynum-], .tribe-events-calendar .mobile-active div[id*=tribe-events-daynum-] a, .tribe-events-calendar td.mobile-active{
  background-color:#4D4343;
  color:white;
  border:none;
}

/*---Comments---Pagination---*/

.comments-wrapper{
  width:100%;
  padding:50px 0;
  margin:0;
  background:#D2CBC5;
}

textarea#comment {
    height: 200px;
    width: 100%;
}

.comments-wrapper h3{
  border-bottom:1px solid white;
  width:80%;
  font-size:$h2;
}

.comments-inner-wrapper,
.comments-title{
  width:$primary-content-width * .75;
  margin:auto;
}

.comments-title{
  border-bottom:1px solid #392c1b;
  margin-bottom:50px;
  padding-bottom:25px;
  line-height:0;
  text-align:center;
  margin-top:100px;
}

.comment,
.pingback{
  padding:50px;
  background:white;
  margin-bottom:50px;
}

.child-comment .comment{
  padding-left:10px;
  padding-bottom:0;
  padding-right:0;
  border-left:1px solid #ddd5cf;
  border-top:1px solid #ddd5cf;
}

.comments-closed{
  text-align:center;
}

.comment-respond h3 {
  width: 25%;
  margin: auto;
  text-align: center;
}

.comment-form {
  width: 50%;
  margin: auto;
}

.comment-form p {
  text-align: center;
}

.footer-widget .ninja-forms-field {
  color: #666;
  padding: 5px 10px;
  border-radius: 2px;
  border: none;
}

.ninja-forms-field[type="submit"]{
  color:white
}

/*---Footer---*/

footer{
  background:#2C2222;
}

footer .footer-widgets{
  display:flex;
  flex-wrap:wrap;
}

.footer-widget-wrapper{
  text-align:center;
  flex-basis:0;
  flex-grow:1;
  padding:20px 30px;
}

.widgettitle{
  margin-bottom:0;
  margin-top:50px;
}

.footer-widget-wrapper .footer-widget-item:first-of-type .widgettitle {
  margin-top:0px;
}

.footer-widget *{
  color:white;
}

.footer-widget .ebl-random-beer img{
  display:none;
}

footer .menu{
  display:flex;
  justify-content:space-between;
  margin:auto;
  width:80%;
  padding-top:30px;
  padding-bottom:30px;
}

/*---Beer Archive---*/

.beer-filter-page .body-wrapper {
  margin-top: 175px;
}

.beer-filter-page.body-wrapper {
  margin-top: 275px;
  max-width:1500px;
}

.beer-filter-page .primary-content {
  width:100%;
  margin:auto;
  background:transparent;
  display:flex;
  flex-wrap:wrap;
}

.beer-filter-items .title {
  width: 100px;
  font-family: "BenchNine", sans-serif;
  font-size: 175%;
  margin-top: 5px;
  color: white;
}

.beer-filter-wrapper{
  position:fixed;
  top:$header-height;
  background:#2C2222;
  width:100%;
  padding-top:10px;
  padding-bottom:10px;
}

.logged-in .beer-filter-wrapper{
  top:$header-height + $admin-bar-height;
}

.beer-filter{
  width:90%;
  max-width:700px;
  margin:auto;
}

.header-sticky .beer-filter-wrapper{
  top:$header-sticky-height;
}

.logged-in .header-sticky .beer-filter-wrapper{
  top:$header-sticky-height + $admin-bar-height;
}

.beer-filter-items {
  display: flex;
  justify-content: space-between;
  max-width:800px;
  width:100%;
  margin:auto;
  flex-wrap:wrap;
}

.beer-filter-page #beer{
  flex-basis: 0;
  flex-grow: 1;
  min-width: 21%;
  height:400px;
  margin-bottom:50px;
}

.beer-filter-page #beer img{
  width:auto;
  height:60%;
}

.beer-filter-page #beer h2{
  text-align:center;
  margin-bottom:0;
  line-height:30px;
  margin-top:10px;
}

.beer-filter-page .beer-image{
  height:300px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

.on-tap-badge{
  position:relative;
  top:0;
  left:100%;
  width:90px;
  height:90px;
  border-radius:100%;
  background:#c42c2c;
  color:white;
  transform:translateX(-100%) rotate(20deg);
  //box-shadow:-1px 2px 5px #222;
  border:3px solid #912929;
}

.on-tap-badge span{
  position:relative;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:block;
  text-align:center;
  font-size:110%;
}

.on-tap-badge:hover{
  transform:translateX(-100%) rotate(20deg) scale(1.12);
  background:#e86060;
  
}

/*---BEER SHORTCODE---*/
.beer-popup{
  transform:translate(200px,320px)!important;
}

/*---SINGLE BEER---*/

.beer-stats{
  display:flex;
  width: 50%;
  margin: auto;
  justify-content: space-around;
}

.single-beers .body-wrapper{
  max-width:none;
}

.single-beers .primary-content{
  background:transparent;
  padding:0;
}

.beer-section:nth-of-type(odd){
  background:white;
}

.beer-section{
  padding-bottom:100px;
  padding-top:100px;
}

.beer-section .beer-inner{
  width:90%;
  max-width:1000px;
  margin:auto;
}

.single-beers .on-tap-badge{
  width:120px;
  height:120px;
}

.single-beers .on-tap-badge span{
  font-size:150%;
}

.single-beers .body-wrapper{
  margin-top:$header-height;
}

.single-beers .primary-content{
  width:100%;
}

.single-beers .beer-info h1 {
  margin-bottom: 10px;
}

.single-beers .brewer-info{
  margin-top:0;
  font-size:$h3;
}

.beer-heading .beer-inner,
.single-beers .similar-beers{
  display:flex;
  flex-basis:0;
}

.single-beers .beer-info{
  flex-grow:3;
  flex-basis:0;
}

.single-beers .beer-image{
  background-size:contain;
  background-repeat:no-repeat;
  flex-grow:1;
  flex-basis:0;
  background-position:center;
}

.single-beers .similar-beers{
  flex-wrap:wrap;
  flex-grow:1;
  justify-content:space-around;
}

.single-beers .similar-beers .beers{
  min-width:180px;
  flex-basis:0;
  text-align:center;
  margin-bottom:50px;
  padding:10px;
}
.single-beers .similar-beers .beers .beer-image{
  height:300px;
}

.similar-beers .on-tap-badge{
  width:75px;
  height:75px;
}

.similar-beers .on-tap-badge span{
  font-size:100%;
}

.single-beers .pairings {
  display: flex;
  flex-wrap:wrap;
  width:40%;
  margin:auto;
}

.single-beers .pairing{
  width:50%;
  margin-bottom:10px;
  text-align:center;
}

.pairing-wrapper h2{
  margin-top:50px;
  text-align:center;
  width:100%;
}

.availability-wrapper,
.tag-wrapper{
  width:70%;
  margin:auto;
  margin-top:30px;
}

.availability-wrapper strong,
.tag-wrapper strong{
    float:left;
    margin-right:5px;
}

.availability,
.tags{
    display:inline;
}

.availability:not(:last-child):after,
.tags:not(:last-child):after{
    content:", "
}

.single-beers .wp-video{
  margin:auto;
}

.single-beers .video-container{
  padding-bottom: calc(26% + 100px);
}

/*--- SINGLE EVENT ---*/

#tribe-events-content{
  margin-bottom:0;
}

.tribe-events-event-image img{
  margin-left: 50%;
  transform: translateX(-50%);
}

#tribe-events-pg-template{
  width:100%;
  max-width:none;
}

.single-tribe_events .body-wrapper{
  max-width:none;
}

.event-section{
  max-width:900px;
  width:90%;
  margin:auto;
}

.event-section-wrapper.event-meta .event-section{
  max-width:1200px;
}

.event-section-wrapper.event-meta{
  background:white;
}

.event-section-wrapper{
  padding:50px 0;
}

.single-tribe_events .tribe-events-event-meta{
  background:transparent;
  border:none;
}

.tribe-events-event-meta .tribe-events-meta-group{
  width:25%;
}

.tribe-events-event-meta .tribe-events-meta-group-gmap{
  width:50%;
}

/*---MEDIA QUERIES---*/

@media only screen and (max-width: 1450px){
  header nav{
    width:90%;
    right:5%;
  }
  
  header .logo{
    left:15%;
  }
}

@media only screen and (max-width: 1300px){
  
}

@media only screen and (max-width: 1100px){
  //Header
  
  header{
    height:130px;
  }

  header.header-sticky,
  .error404 header.header-sticky,
  .page header.header-sticky{
    height:75px;
  }
  
  header nav{
    width:90%;
    right:5%;
    top:100px;
  }
  
  header .logo{
    left:50%;
    transform:translate(-50%);
  }
  
  header.header-sticky nav{
    top:50px;
  }
  
  header nav > ul{
    flex-direction:row;
    justify-content:space-around;
  }
  
  header nav > ul li{
    margin-right:0;
  }
  
  .sub-menu.open>.menu-item-has-children>.sub-menu.open {
    position:static;
  }

  header nav>ul>li>.sub-menu.open{
    transform:translate(-50%);
  }
  
  header .sub-menu .sub-menu, header.header-sticky .sub-menu .sub-menu{
    border:none;
    background:rgba(255,255,255,0.25);
  }

  header>nav>ul>li>.sub-menu:before {
    left:50%;
  }
  
  //Home Page
  .page-template-template-home .element .event{
    min-width:200px;
  }

  .page-template-template-home .element .event:hover{
    flex-grow:1;
  }
  
  .page-template-template-home .element .event:nth-of-type(2),
  .page-template-template-home .element .event:nth-of-type(1){
    min-width:calc(50% - 3px);
    margin-bottom:3px;
  }

  //---BEER ARCHIVE---//
  .beer-filter-page #beer{
    min-width:33%; 
  }
  
  .beer-filter-page .beer-image{
    height:250px;
  }
  
  .on-tap-badge{
    left:90%;
  }
  
  //---SINGLE BEER PAGE---//
  .single-beers .on-tap-badge {
    width: 75px;
    height: 75px;
    transform: translateX(-75%) rotate(20deg);
  }
  
  .single-beers .on-tap-badge{
    left:100%;
  }
  
  .single-beers .on-tap-badge span {
    font-size: 100%;
  }
  
  .single-beers .similar-beers .beers{
    min-width:200px;
  }
 
  .single-beers .similar-beers .beers:nth-of-type(2),
  .single-beers .similar-beers .beers:nth-of-type(1){
    min-width:calc(50% - 3px);
    margin-bottom:3px;
  }
  
  .ebl-page-wrapper{
    width:100%;
  }
  
  .ebl-page-wrapper .content-heading-wrapper{
    text-align:center;
  }
  
  //Blog
  .loop-content-wrapper .btn {
    width: calc(100% - 50px);
    margin-bottom: 20px;
  }
}

/*---BEGIN Tablet---*/
@media (orientation: portrait) and (max-device-width: 775px){
  
  .heading-wrapper .heading{
    padding-left:5%;
    width:95%;
  }
  
  .heading-wrapper .heading h1{
    text-align:center;
  }
  
  .heading-wrapper .heading h1,
  .heading-wrapper .heading p{
    width:90%;    
  }
  
  .page-template-template-home .element .event:last-of-type{
    margin-bottom:30px;
  }

  .page-template-template-home .element .event:nth-of-type(1){
    min-width:100%;
  }

  .page-template-template-home .element .event{
    min-width:300px;
    margin-bottom:3px;
  }

  .page-template-template-home .element .beer{
    min-width:calc(25% - 10px);
    margin-left:5px;
    margin-right:5px;
  }
  
  //Footer
  .footer-center {
      order: 3;
      min-width: 90%;
      padding-left: 5%;
  }
  
  //---BEER PAGE---//
  .beer-filter-page #beer{
    min-width:50%; 
  }
}

/*---BEGIN MOBILE DEVICE---*/
@media only screen and (max-device-width: 750px){
  //Header
  
  header,
  header .logo{
    height:100px;
  }
  
  header.header-sticky,
  header.header-sticky .logo{
    height:75px;
  }
  
  header .logo h1,
  header.header-sticky .logo h1{
    font-size:25px;
    text-align:center;
    margin-top:10px;
  }
  
  header nav > ul .sub-menu,
  .sub-menu.open > .menu-item-has-children > .sub-menu,
  header nav > ul {
    display:flex;
    flex-direction: column;
    justify-content:space-around;
    text-align: center;
    right:-500px;
    top:0;
    position:fixed;
    white-space:normal;
    height:0;
    width:0;
  }
  
  header nav > ul .sub-menu > li,
  .sub-menu.open > .menu-item-has-children > .sub-menu > li,
  header nav > ul > li{
    width:90%;
    margin:auto;
  }
  
  header.header-sticky aside{
    height:0;
    opacity:0;
  }
  
  header nav.open:before{
    display:none;
  }
  header nav:before{
    display:block;
    content: "≡";
    font-size:45px;
    position:fixed;
    top:20px;
    right:20px;
    padding:0px 10px;
    background:#fff;
    border-radius:5px;
    font-weight:bold;
    border:1px solid #aaa;
    border-bottom-width:2px;
  }
  
  .logged-in header:not(.header-sticky) nav:before {
    top: 50px;
  }
  
  header nav.open > ul .sub-menu.open,
  .sub-menu.open > .menu-item-has-children > .sub-menu.open,
  header nav.open > ul{
    border:none;
    right: 8px;
    width: 50%;
    height: 100%;
    transform:none;
    position: fixed;
    background: #4d4343;
    top: 0;
    left:initial;
    padding:0;
  }
    
  .logged-in header nav.open > ul .sub-menu.open,
  .logged-in header .sub-menu.open > .menu-item-has-children > .sub-menu.open,
  .logged-in header nav.open > ul{
    height:calc(100% - 45px);
    top:45px;
  }
  
  //Body Wrapper
  .body-wrapper,
  .logged-in .body-wrapper{
    flex-wrap:wrap;
    margin:auto;
    margin-top:60px;
  }
  
  .home.logged-in .body-wrapper {
    margin-top: 152px;
  }
  
  .post-title{
    padding-top:100px;
  }
  
  .primary-content,
  #sidebar{
    width:100%;
    margin-left:0;
    margin-bottom:20px;
  }
  
  .blog .primary-content{
    padding-left:0px;
    padding-right:0px;
    width:100%;
  }
  
  #sidebar{
    text-align:center;
  }
  
  .comment-form{
    width:90%;
  }
  
  //Blog Page

  .sticky{
    padding-left:0;
    padding-right:0;
    margin-left:0;
    margin-right:0;
  }
  
  .loop-post{
    flex-wrap:wrap;
    text-align:center;
  }
  
  .loop-content-image {
    max-width: none;
    min-width: 100%;
    margin-bottom:30px;
  }
  
  //Beer Archive
  
  .beer-filter-items>li {
    width: 100%;
    text-align:center;
  }

  .beer-filter-items>.beerjax-filter {
    width: calc(50% - 50px);
    margin:auto;
    margin-bottom:10px;
    margin-top:10px;
  }

  .logged-in .header-sticky .beer-filter-wrapper{
    top:-200px;
  }

  .logged-in .beer-filter-wrapper{
    top:46px;
  }

  .beer-filter-page .body-wrapper, .beer-filter-page.logged-in .body-wrapper{
    margin-top:260px;
  }
  
  .ebl-beer-info {
    text-align: center;
  }

  .single-beers .pairing {
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding:0;
  }

  .ebl-beer-info>div {
    margin-bottom: 50px;
  }
  .on-tap-badge{
    width:75px;
    height:75px;
    font-size:75%;
    left:100%;
  }
  
  //Event Page
  
  .event-section-wrapper {
    padding:0;
    padding-bottom:20px;
  }
  
  .single-tribe_events .tribe-events-cal-links{
    text-align:center;
  }
  
  .tribe-events-event-meta .tribe-events-meta-group-gmap {
    width: 100%;
  }
  
  .tribe-events-event-meta .tribe-events-meta-group {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
    border-bottom: 1px solid #333;
    padding-bottom: 25px;
  }
  
  //Comments
  .comments-inner-wrapper, .comments-title{
    width:90%;
  }
  
  .comment{
    padding:20px;
  }
  
  //Beer Page
  .single-beers .pairings {
    flex-direction: column;
  }

  .single-beers .pairing {
    width:100%;
  }
  
  .beer-heading .beer-inner, .single-beers .similar-beers {
    flex-wrap: wrap;
  }

  .single-beers .beer-image,
  .single-beers .beer-info {
    min-width: 100%;
    flex-grow: 0;
  }

  .single-beers .beer-info{
    order:1;
  }

  .single-beers .beer-image{
    height:300px;
  }

  .availability-wrapper strong, .tag-wrapper strong {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
  }
  
  .availability, .tags {
    display: block;
    clear: both;
    text-align: center;
  }
  
  .single-beers .on-tap-badge {
    left: 95%;
  }
  
  //Home Page
  $mobile-heading-text-offset-top:175px;
  .heading-wrapper .heading {
    padding-top: $mobile-heading-text-offset-top;
    height:500px - $mobile-heading-text-offset-top;
  }
  
  .element-wrapper .shadowbox {
    padding-top: 50px;
    height: 400px;
    text-align:center;
  }
  
  .page-template-template-home .element .event {
    height: 250px;
  }

  .element-wrapper a .shadowbox {
    padding-top: 20px;
    height: 230px;
  }
  
  //Footer
  footer .menu{
      flex-wrap:wrap;
      width:100%;  
  }

  footer .menu .menu-item {
      min-width: 50%;
      flex-basis: 0;
      flex-grow: 1;
      padding-top:20px;
      padding-bottom:20px;
      text-align:center;
  }
  
}

@media (orientation: landscape) and (max-device-width: 750px){
  //Header
  header nav.open > ul .sub-menu.open,
  .sub-menu.open > .menu-item-has-children > .sub-menu.open,
  header nav.open > ul{
    right: 0px;
    flex-wrap:wrap;
    flex-direction:row;
  }
  
  .logged-in header.header-sticky nav:before {
    top: 50px;
  }
  
  .logged-in header.header-sticky nav.open > ul .sub-menu.open,
  .logged-in header.header-sticky .sub-menu.open > .menu-item-has-children > .sub-menu.open,
  .logged-in header.header-sticky nav.open > ul{
    height:calc(100% - 45px);
    top:45px;
  }
  
  header nav.open > ul .sub-menu.open > li,
  .sub-menu.open > .menu-item-has-children > .sub-menu.open > li,
  header nav.open > ul > li,
  .sub-menu > .menu-item:not(:first-of-type):not(:last-of-type){
    width:50%;
    margin-top:20px;
    margin-bottom:20px;
  }
  
  //Home Page
  .heading-wrapper .heading h1, .heading-wrapper .heading p{
    width:75%;
  }
  
  .heading-wrapper{
    height:300px;
  }
  
  .heading-wrapper .heading{
    height:250px;
  }
  .page-template-template-home .element .beer {
    width: 20%;
    margin-right: 2.5%;
    margin-left: 2.5%;
  }
  
  //Blog
  .primary-content{
    padding-left:10px;
    padding-right:10px;
    width:calc(100% - 20px);
  }
  
  //Event Page
  
  .tribe-events-event-meta .tribe-events-meta-group {
    width: calc(50% - 25px);
  }
  
  .tribe-events-event-meta .tribe-events-meta-group-gmap {
    width: 100%;
  }
  
  //Footer
  .footer-widget-wrapper {
    min-width: calc(50% - 100px);
  }
}

@media (orientation: landscape) and (max-device-width: 600px){

  //Header
  
  .logged-in header.header-sticky nav:before {
    top: 10px;
  }
  
  .logged-in header.header-sticky nav.open > ul .sub-menu.open,
  .logged-in header.header-sticky .sub-menu.open > .menu-item-has-children > .sub-menu.open,
  .logged-in header.header-sticky nav.open > ul{
    height:100%;
    top:0px;
  }
  
  header nav.open > ul .sub-menu.open > li,
  .sub-menu.open > .menu-item-has-children > .sub-menu.open > li,
  header nav.open > ul > li,
  .sub-menu > .menu-item:not(:first-of-type):not(:last-of-type){
    margin-top:10px;
    margin-bottom:10px;
  }
  
  //Event Page
  
  .tribe-events-event-meta .tribe-events-meta-group {
    width: calc(100% - 25px);
  }
  
  //Home
  .heading-wrapper .heading h1,
  .heading-wrapper .heading p{
    width:90%;
  }
  
}

@media (orientation: portrait) and (max-device-width: 600px){
  
  //Header
  header nav.open > ul .sub-menu.open, .sub-menu.open > .menu-item-has-children > .sub-menu.open, header nav.open > ul{
    right:0;
  }

  .logged-in header.header-sticky nav:before {
    top: 10px;
  }
  
  .logged-in header.header-sticky nav.open > ul .sub-menu.open,
  .logged-in header.header-sticky .sub-menu.open > .menu-item-has-children > .sub-menu.open,
  .logged-in header.header-sticky nav.open > ul{
    height:100%;
    top:0px;
  }

  //Home
  .page-template-template-home .element .beer{
    min-width:calc(50% - 10px);
    margin-left:5px;
    margin-right:5px;
  }
  
  //Blog
  .loop-post:not(.sticky){
    padding:25px;
  }
  
  .primary-content{
    padding-left:15px;
    padding-right:15px;
    width:calc(100% - 30px);
  }
  
  .blog .primary-content{
    width:100%;
  }
  
  .alignright,
  .alignleft,
  .primary-content .wp-caption.alignright,
  .primary-content .wp-caption.alignleft{
    max-width:50%;
  }
  
  //Beer Page
  
  .single-beers .similar-beers .beers:nth-of-type(2),
  .single-beers .similar-beers .beers:nth-of-type(1){
    min-width:calc(100% - 3px);
  }

  //Footer
  .footer-widget-wrapper {
    min-width: calc(100% - 100px);
  }
}

@media (orientation: portrait) and (max-device-width: 400px){
  
  //Even Page
  .tribe-events-divider {
      display: none;
  }

  span.tribe-events-cost {
      display: block;
  }
  
}