/*!
Theme Name: Kane Brewing
Description: Kane Brewing Company website
Author: 1 Trick Pony
Author URI: https://1trickpony.com
Version: 1.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
*/
/*------------------------------------*\
00-Core
\*------------------------------------*/
/* ------------------------------------------
Return EM value from context pixel value
https://css-tricks.com/snippets/sass/px-to-em-functions/
------------------------------------------*/
/* ------------------------------------------
Return REM value from base pixel value
------------------------------------------*/
/* ------------------------------------------
https://trulycode.com/bytes/sass-function-loop-headings-h1h2h3h4h5h6/
Setup the function in your functions or helpers files, wherever you keep these bits.
Then call it with the rules/styles you want wherever you want (As long as the file/include has access to the above function of course).
headings(1, 6) {
  color: white;
}
------------------------------------------*/
/* ------------------------------------------
Media Query based on device range
https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862#.4tufucigb

------------------------------------------*/
/* ------------------------------------------
Setup default values
------------------------------------------*/
/* ------------------------------------------
Setup default color values.
------------------------------------------*/
/* ------------------------------------------
Setup your primary, secondary & tertiary
font families.
------------------------------------------*/
/*------------------------------------*\
01-Base
\*------------------------------------*/
/* 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; }

* {
  box-sizing: border-box;
  outline: 0; }

html {
  font-size: 1em;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }

body {
  background-color: #fff;
  color: #000;
  font-family: "mr-eaves-modern", "Helvetica", san-serif;
  font-weight: 300;
  font-size: 1em;
  width: 100vw;
  overflow-x: hidden;
  padding-top: 4rem; }
  @media (min-width: 600px) {
    body {
      padding-top: 6.25rem; } }

hr {
  border: 0;
  height: 0.0625rem;
  width: 90%;
  margin: 2.5rem auto;
  background-color: #000; }

code {
  font-family: monospace; }

.hide-on-mobile {
  display: none !important; }
  @media (min-width: 600px) {
    .hide-on-mobile {
      display: block !important; } }

.show-on-mobile {
  display: block !important; }
  @media (min-width: 600px) {
    .show-on-mobile {
      display: none !important; } }

.hide-on-tablet {
  display: none !important; }
  @media (min-width: 900px) {
    .hide-on-tablet {
      display: block !important; } }

.show-on-tablet {
  display: block !important; }
  @media (min-width: 900px) {
    .show-on-tablet {
      display: none !important; } }

.pad-10 {
  padding: 0.625rem; }

.pad-20 {
  padding: 1.25rem; }

.pad-30 {
  padding: 1.875rem; }

.pad-40 {
  padding: 2.5rem; }

.pad-10-tb {
  padding: 0.625rem 0; }

.pad-20-tb {
  padding: 1.25rem 0; }

.pad-30-tb {
  padding: 1.875rem 0; }

.pad-40-tb {
  padding: 2.5rem 0; }

.pad-10-t {
  padding: 0.625rem 0 0 0; }

.pad-20-t {
  padding: 1.25rem 0 0 0; }

.pad-30-t {
  padding: 1.875rem 0 0 0; }

.pad-40-t {
  padding: 2.5rem 0 0 0; }

.pad-10-lr {
  padding: 0 0.625rem; }

.pad-20-lr {
  padding: 0 1.25rem; }

.pad-30-lr {
  padding: 0 1.875rem; }

.pad-40-lr {
  padding: 0 2.5rem; }

.margin-10 {
  margin: 0.625rem; }

.margin-20 {
  margin: 1.25rem; }

.margin-30 {
  margin: 1.875rem; }

.margin-40 {
  margin: 2.5rem; }

.margin-10-tb {
  margin: 0.625rem 0; }

.margin-20-tb {
  margin: 1.25rem 0; }

.margin-30-tb {
  margin: 1.875rem 0; }

.margin-40-tb {
  margin: 2.5rem 0; }

.margin-10-lr {
  margin: 0 0.625rem; }

.margin-20-lr {
  margin: 0 1.25rem; }

.margin-30-lr {
  margin: 0 1.875rem; }

.margin-40-lr {
  margin: 0 2.5rem; }

.margin-10-t {
  margin: 0.625rem 0 0 0; }

.margin-20-t {
  margin: 1.25rem 0 0 0; }

.margin-30-t {
  margin: 1.875rem 0 0 0; }

.margin-40-t {
  margin: 2.5rem 0 0 0; }

.margin-10-b {
  margin: 0 0 0.625rem 0; }

.margin-20-b {
  margin: 0 0 1.25rem 0; }

.margin-30-b {
  margin: 0 0 1.875rem 0; }

.margin-40-b {
  margin: 0 0 2.5rem 0; }

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

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

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

/*
 * Links
 ========================================================================== */
a {
  color: #000; }
  a:hover {
    color: #575757; }

/*
 * Text
 ========================================================================== */
p {
  margin-bottom: 0.9375rem;
  line-height: 1.3; }

p, li {
  font-family: "mr-eaves-modern", "Helvetica", san-serif;
  font-weight: 500;
  font-size: 1.125rem; }
  @media (min-width: 600px) {
    p, li {
      font-size: 1rem; } }

/*
 * Lists
 ========================================================================== */
ul, ol {
  margin: 0 0 1.25rem 0;
  padding: 0; }
  ul li, ol li {
    margin-left: 1.875rem;
    line-height: 1.3; }

ul {
  list-style-type: disc; }

ol {
  list-style-type: decimal; }

.clean-list {
  list-style-type: none; }

/*
 * Headers
 ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  margin: 0;
  padding: 0;
  font-weight: normal; }

h1, .header-style-primary, .header-style-primary-small {
  font-family: "komu-a", "Helvetica", san-serif;
  font-size: 2rem; }
  @media (min-width: 600px) {
    h1, .header-style-primary, .header-style-primary-small {
      font-size: 2.5rem; } }
  @media (min-width: 900px) {
    h1, .header-style-primary, .header-style-primary-small {
      font-size: 3.125rem; } }

.header-style-primary-small {
  font-size: 1.375rem; }

h2, .header-style-secondary {
  font-family: "komu-a", "Helvetica", san-serif;
  font-size: 2.375rem;
  text-transform: uppercase; }
  @media (min-width: 600px) {
    h2, .header-style-secondary {
      font-size: 2.4375rem; } }
  @media (min-width: 900px) {
    h2, .header-style-secondary {
      font-size: 2.5rem; } }

h3, .header-style-tertiary {
  font-family: "komu-a", "Helvetica", san-serif;
  font-size: 1.625rem;
  text-transform: uppercase; }
  @media (min-width: 600px) {
    h3, .header-style-tertiary {
      font-size: 1.5rem; } }
  @media (min-width: 900px) {
    h3, .header-style-tertiary {
      font-size: 1.625rem; } }

h4, .header-style-quaternary, .layout-three-column .panel p {
  font-family: "mr-eaves-modern", "Helvetica", san-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2; }
  @media (min-width: 600px) {
    h4, .header-style-quaternary, .layout-three-column .panel p {
      font-size: 1rem; } }
  @media (min-width: 900px) {
    h4, .header-style-quaternary, .layout-three-column .panel p {
      font-size: 1rem; } }

/*
 * Text Styles
 ========================================================================== */
.style-body, .btn, input[type="submit"] {
  font-family: "mr-eaves-modern", "Helvetica", san-serif;
  font-size: 1rem;
  font-weight: 700; }
  @media (min-width: 600px) {
    .style-body, .btn, input[type="submit"] {
      font-size: 1rem; } }
  @media (min-width: 900px) {
    .style-body, .btn, input[type="submit"] {
      font-size: 1rem; } }

.style-nav, .nav {
  font-family: "mr-eaves-modern", "Helvetica", san-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase; }
  @media (min-width: 600px) {
    .style-nav, .nav {
      font-size: 0.9375rem; } }
  @media (min-width: 900px) {
    .style-nav, .nav {
      font-size: 0.9375rem; } }

.style-small {
  font-size: 0.85em;
  font-weight: 400; }

.style-italic {
  font-style: italic; }

.text-titlecase {
  text-transform: capitalize; }

/* all */
::-webkit-input-placeholder {
  color: #000;
  text-transform: uppercase;
  font-weight: 200;
  font-size: 0.75rem; }

::-moz-placeholder {
  color: #000;
  text-transform: uppercase;
  font-weight: 200;
  font-size: 0.75rem; }

/* firefox 19+ */
:-ms-input-placeholder {
  color: #000;
  text-transform: uppercase;
  font-weight: 200;
  font-size: 0.75rem; }

/* ie */
input:-moz-placeholder {
  color: #000;
  text-transform: uppercase;
  font-weight: 200;
  font-size: 0.75rem; }

form input[type="email"], form input[type="text"], form input[type="submit"] {
  max-height: 2.5rem;
  border: 0.125rem #000 solid; }

form input[type="email"], form input[type="text"] {
  color: #000;
  padding: 0.625rem 2.5rem 0.625rem 0.625rem;
  font-size: 0.875rem; }

.thank-you {
  margin-left: 1.25rem;
  display: none;
  font-family: "mr-eaves-modern", "Helvetica", san-serif;
  font-size: 1.25rem;
  font-weight: 400; }

/*------------------------------------*\
02-Layout
\*------------------------------------*/
#hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000;
  padding: 0.625rem 0;
  z-index: 60; }
  #hdr .black-bar {
    padding: 0.625rem 0.9375rem 0.625rem 0; }
  #hdr .wrapper {
    max-width: 95%; }
  @media (min-width: 600px) {
    #hdr {
      padding: 1.25rem 0;
      margin-top: 0; }
      #hdr .black-bar {
        padding: 1.25rem 0; } }
  #hdr .wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end; }
  #hdr .logo {
    display: block;
    position: absolute;
    left: 0.75rem;
    top: 64%;
    transform: translateY(-50%); }

.nav a {
  color: #fff;
  display: block;
  font-weight: 700;
  text-decoration: none;
  margin: 0.625rem 1.25rem;
  transition: color 200ms;
  word-spacing: 0.3em; }
  .nav a:hover {
    color: #575757; }

.nav ul {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0; }

.nav li {
  margin: 0; }
  .nav li.current-menu-item a, .nav li.current-page-item a {
    position: relative; }
    .nav li.current-menu-item a:after, .nav li.current-page-item a:after {
      content: "";
      position: absolute;
      bottom: 0.125rem;
      left: 0;
      right: 0;
      border-bottom: 1px #fff solid; }

/* Appended styled for mobile menu */
#hdr .nav {
  position: fixed;
  right: 0; }
  #hdr .nav a {
    opacity: 0;
    pointer-events: none;
    transition: opacity 600ms, color 600ms; }
  #hdr .nav li {
    background-color: transparent;
    transform: translateX(100%);
    transition: background-color 600ms, transform 600ms;
    transition-delay: 300ms; }
    #hdr .nav li:last-child a {
      margin-right: 0.75rem; }
  #hdr .nav li:nth-child(4) {
    transition-delay: 25ms; }
    #hdr .nav li:nth-child(4) a {
      transition: opacity 300ms;
      transition-delay: 25ms; }
  #hdr .nav li:nth-child(3) {
    transition-delay: 33.33333ms; }
    #hdr .nav li:nth-child(3) a {
      transition: opacity 300ms;
      transition-delay: 33.33333ms; }
  #hdr .nav li:nth-child(2) {
    transition-delay: 50ms; }
    #hdr .nav li:nth-child(2) a {
      transition: opacity 300ms;
      transition-delay: 50ms; }
  #hdr .nav li:nth-child(1) {
    transition-delay: 100ms; }
    #hdr .nav li:nth-child(1) a {
      transition: opacity 300ms;
      transition-delay: 100ms; }
  #hdr .nav ul {
    position: absolute;
    right: 0;
    bottom: -1.875rem;
    padding: 0;
    width: 50vw;
    pointer-events: none;
    transform: translateY(100%); }
  #hdr .nav.is-active {
    display: block; }
    #hdr .nav.is-active ul {
      pointer-events: all; }
      #hdr .nav.is-active ul li:nth-child(1) {
        transition-delay: 75ms; }
        #hdr .nav.is-active ul li:nth-child(1) a {
          transition-delay: 75ms; }
      #hdr .nav.is-active ul li:nth-child(2) {
        transition-delay: 150ms; }
        #hdr .nav.is-active ul li:nth-child(2) a {
          transition-delay: 150ms; }
      #hdr .nav.is-active ul li:nth-child(3) {
        transition-delay: 225ms; }
        #hdr .nav.is-active ul li:nth-child(3) a {
          transition-delay: 225ms; }
      #hdr .nav.is-active ul li:nth-child(4) {
        transition-delay: 300ms; }
        #hdr .nav.is-active ul li:nth-child(4) a {
          transition-delay: 300ms; }
      #hdr .nav.is-active ul li {
        background-color: #000;
        transform: translateX(0%); }
      #hdr .nav.is-active ul a {
        opacity: 1;
        pointer-events: all; }
        #hdr .nav.is-active ul a:after {
          border-bottom: 0;
          text-decoration: underline; }
  @media (min-width: 600px) {
    #hdr .nav {
      position: initial;
      display: block; }
      #hdr .nav ul, #hdr .nav.is-active ul {
        pointer-events: all;
        position: initial;
        bottom: 0;
        transform: translateY(0%);
        flex-direction: row;
        width: auto; }
        #hdr .nav ul li, #hdr .nav.is-active ul li {
          background-color: transparent;
          padding: 0;
          transition-delay: 0;
          transition: none;
          transform: translateX(0%);
          pointer-events: all; }
        #hdr .nav ul a, #hdr .nav.is-active ul a {
          padding: 0;
          margin: 0 1.5625rem;
          opacity: 1;
          pointer-events: all; } }
  @media (min-width: 900px) {
    #hdr .nav ul a, #hdr .nav.is-active ul a {
      padding: 0;
      margin: 0 1.875rem; } }

#ftr .nav {
  padding: 1.25rem 0 0 0; }
  #ftr .nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }

@media (min-width: 600px) {
  #ftr .nav {
    padding: 1.25rem 0 0 0; }
    #ftr .nav ul {
      flex-direction: row; }
      #ftr .nav ul a {
        padding: 0;
        margin: 0 1.5625rem; } }

/* Career Navigation */
.career-link {
  margin: 1.25rem 0; }
  .career-link ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }
    .career-link ul li {
      margin: 0; }
      .career-link ul li:after {
        display: inline-block;
        content: "|";
        padding: 0 0.9375rem; }
      .career-link ul li:last-child:after {
        content: "";
        padding: 0; }
      .career-link ul li a {
        display: inline-block;
        color: #000;
        margin: 0; }

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger, .modal-close {
  padding: 1px 1px;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  outline: 0;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  max-height: 1.5rem; }
  .hamburger:hover, .modal-close:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 27px;
  height: 22px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 27px;
    height: 4px;
    background-color: #fff;
    border-radius: 12px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -9px; }
  .hamburger-inner::after {
    bottom: -9px; }

/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

.responsive-img {
  width: 100%; }

.wrapper {
  max-width: 60rem;
  margin: 0 auto; }

/* Logo */
.kane-logo {
  text-rendering: optimizeLegibility;
  width: 3.95833rem;
  height: 3.20833rem; }
  @media (min-width: 600px) {
    .kane-logo {
      width: 5.9375rem;
      height: 4.8125rem; } }

/* 2 Column Panels */
.panel-two-column {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 2.5rem 0;
  text-align: center; }
  .panel-two-column .panel-column {
    width: 100%; }
  .panel-two-column .header-style-primary-small {
    padding: 1.25rem 1.25rem 0 1.25rem;
    margin-bottom: 0; }
    .panel-two-column .header-style-primary-small + .panel {
      padding-top: 0.9375rem; }
  @media (min-width: 600px) {
    .panel-two-column {
      flex-direction: row;
      flex-wrap: wrap;
      text-align: left; }
      .panel-two-column .panel-column {
        width: 33.33334%; }
      .panel-two-column .panel {
        padding: 1.25rem 1.25rem;
        margin-bottom: 0; } }

/* 3 Column Panels */
.layout-three-column {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: column; }
  .layout-three-column .panel {
    padding-top: 0rem;
    padding-bottom: 2.5rem;
    text-align: center; }
    .layout-three-column .panel h3 {
      margin-bottom: 0.3125rem; }
    .layout-three-column .panel p {
      margin: 0; }
    .layout-three-column .panel:first-child {
      padding-top: 1.875rem; }
  @media (min-width: 600px) {
    .layout-three-column {
      flex-direction: row;
      padding-top: 3.125rem;
      padding-bottom: 3.125rem; }
      .layout-three-column .panel {
        width: 33.334%;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem; }
        .layout-three-column .panel h3 {
          margin-bottom: 0.5rem; }
        .layout-three-column .panel:first-child {
          padding-top: 1.25rem; }
        .layout-three-column .panel:nth-child(2) {
          border-left: 1px #000 solid;
          border-right: 1px #000 solid; } }
  @media (min-width: 600px) and (min-width: 900px) {
    .layout-three-column {
      padding-top: 3.75rem;
      padding-bottom: 3.75rem; } }

/* Careers page  */
@media (min-width: 600px) {
  .careers {
    margin-bottom: 3.75rem; } }

.careers:last-child {
  margin-bottom: 0; }

.page-careers {
  max-width: 43.75rem;
  margin: 0 auto; }
  .page-careers.ui-single-column {
    padding-top: 0; }
  .page-careers .column {
    padding: 0 2.5rem; }
  @media (max-width: 599px) {
    .page-careers .column.margin-40-t {
      margin-top: 0.625rem; } }

.page-contact {
  max-width: 48rem; }
  @media (min-width: 600px) {
    .page-contact .column:first-child {
      text-align: right; } }

/* Flip Source order of Instagram posts and email sign up */
.source-order {
  display: flex;
  flex-direction: column; }

/* Link Grid */
.link-grid .wrapper {
  display: flex;
  flex-wrap: wrap; }

.link-grid a {
  display: block;
  width: 100%;
  position: relative;
  padding: 0.625rem; }
  .link-grid a span {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 5;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transform: translate(0%, -50%);
    transition: color 200ms; }
  .link-grid a figure {
    margin: 0;
    padding: 0;
    overflow: hidden; }
    .link-grid a figure img {
      display: block;
      width: 100%;
      transition: filter 400ms; }
  .link-grid a:hover figure img {
    filter: grayscale(100%); }
  @media (min-width: 600px) {
    .link-grid a {
      width: 50%; } }

#instagram {
  order: 1; }
  @media (min-width: 900px) {
    #instagram {
      order: 2; } }

/* Email sign up */
#connect {
  order: 2; }
  @media (min-width: 900px) {
    #connect {
      order: 1;
      margin-top: 2.5rem; }
      #connect .wrapper {
        display: flex;
        justify-content: space-around; } }

.email-capture {
  text-align: center; }
  .email-capture h3 {
    padding: 0.0625rem 0 0.625rem 0; }
  .email-capture form {
    position: relative; }
    .email-capture form input[type="email"] {
      margin-right: 0.625rem; }
  .email-capture .error {
    position: absolute;
    bottom: -1.25rem;
    font-size: 0.875rem;
    color: #939598; }
  @media (min-width: 900px) {
    .email-capture {
      display: flex;
      align-items: center; }
      .email-capture h3 {
        padding: 0; }
      .email-capture form {
        margin-left: 0.9375rem; } }

.social {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem; }
  @media (min-width: 600px) {
    .social {
      align-items: center; } }
  .social ul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.625rem 0 0.3125rem; }
  .social li {
    margin: 0;
    padding: 0 0.3125rem; }
    .social li a {
      position: relative;
      background-color: #fff;
      border: 2px #000 solid;
      border-radius: 50%;
      display: block;
      width: 2.5rem;
      height: 2.5rem; }
      .social li a span {
        visibility: hidden; }
      .social li a:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
      .social li a:hover {
        background-color: #000; }
    .social li.icon-instagram a:after {
      background-image: url("img/instagram.svg");
      background-size: contain;
      background-repeat: no-repeat;
      width: 1.36364rem;
      height: 1.59091rem; }
    .social li.icon-instagram a:hover:after {
      background-image: url("img/instagram-white.svg"); }
    .social li.icon-facebook a:after {
      background-image: url("img/facebook.svg");
      background-size: contain;
      background-repeat: no-repeat;
      width: 0.83333rem;
      height: 1.45833rem; }
    .social li.icon-facebook a:hover:after {
      background-image: url("img/facebook-white.svg"); }

#ftr {
  padding: 1.25rem;
  text-align: center; }
  @media (min-width: 600px) {
    #ftr {
      padding: 2.5rem; } }
  #ftr figure .kane-logo {
    width: 3.95833rem;
    height: 3.20833rem; }
  #ftr small {
    color: #939598;
    line-height: 1.4; }
    #ftr small span:not(.hide-on-mobile) {
      display: block; }
    @media (min-width: 600px) {
      #ftr small span, #ftr small span.hide-on-mobile {
        display: inline-block !important; }
      #ftr small span.hide-on-mobile {
        margin: 0 0.625rem; } }

/*------------------------------------*\
03-Modules
\*------------------------------------*/
.btn, input[type="submit"] {
  background-color: #fff;
  border: 0.0625rem #000 solid;
  color: #000;
  padding: 0.625rem 2.5rem 0.625rem 0.625rem;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  -webkit-appearance: none; }
  @media (min-width: 600px) {
    .btn, input[type="submit"] {
      padding: 0.625rem 3.125rem; } }
  .btn > span, input[type="submit"] > span {
    position: absolute;
    top: 50%;
    right: 0.625rem;
    transform: translateY(-50%);
    text-align: left; }
    .btn > span svg, input[type="submit"] > span svg {
      width: 0.5rem;
      height: 0.875rem; }
  .btn:hover, .btn.active, input[type="submit"]:hover, input[type="submit"].active {
    background-color: #000;
    color: #fff; }
    .btn:hover > span svg, .btn.active > span svg, input[type="submit"]:hover > span svg, input[type="submit"].active > span svg {
      transform: rotate(90deg);
      fill: #fff; }

input[type="submit"] {
  padding: 0.625rem 0.625rem 0.625rem 0.625rem; }
  @media (min-width: 600px) {
    input[type="submit"] {
      padding: 0.625rem 3.125rem; } }

.hero img, .banner img {
  width: 100vw; }

.hero .slick-slider .slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 50;
  transform-origin: center center;
  width: 1.375rem;
  height: 2.58333rem;
  transform: translateY(-50%);
  fill: #fff; }

.hero .slick-slider .prevArrow {
  left: 2.5rem;
  transform: rotate(180deg) translateY(50%); }

.hero .slick-slider .nextArrow {
  right: 2.5rem; }

.slide {
  position: relative; }

.banner {
  position: relative; }
  .banner h1 {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: #fff; }

#product-slider {
  position: relative; }

@media (min-width: 600px) {
  .product-photos figure img {
    min-height: 12.5rem;
    width: 150%; } }

@media (min-width: 900px) {
  .product-photos figure img {
    min-height: initial;
    width: 100%; } }

.product-details {
  position: relative; }
  .product-details .permanent-header {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%); }
  .product-details .product-carousel {
    padding-top: 2.5rem; }
  .product-details .slick-list {
    z-index: 40; }
  .product-details .slick-arrow {
    position: absolute;
    top: 1.5625rem;
    width: 1.03125rem;
    height: 1.9375rem;
    transform-origin: center center;
    z-index: 50; }
    .product-details .slick-arrow.prevArrow {
      left: 1.25rem;
      transform: rotate(180deg); }
    .product-details .slick-arrow.nextArrow {
      right: 1.25rem; }
  @media (min-width: 600px) {
    .product-details {
      position: absolute !important;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      max-width: 25rem; }
      .product-details .slick-arrow {
        top: 50%; }
        .product-details .slick-arrow.prevArrow {
          transform: rotate(180deg) translateY(50%); }
        .product-details .slick-arrow.nextArrow {
          transform: translateY(-50%); } }
  @media (min-width: 900px) {
    .product-details {
      padding: 1.25rem;
      max-width: 31.25rem; }
      .product-details .product-carousel {
        padding-top: 1.25rem; } }
  @media (min-width: 1200px) {
    .product-details {
      padding: 2.5rem;
      max-width: 37.5rem; } }

.product-info header {
  padding: 1.25rem 0;
  text-align: center;
  text-transform: uppercase; }
  .product-info header h2, .product-info header h4 {
    line-height: 1; }

.product-stats {
  font-weight: 700;
  margin-bottom: 1.25rem;
  text-align: center;
  text-transform: uppercase; }
  .product-stats span {
    display: inline-block;
    margin: 0 0.4375rem; }

.product-availability li {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1.25rem;
  line-height: 1;
  text-align: center; }
  .product-availability li strong {
    display: block;
    font-weight: 700; }

@media (min-width: 600px) {
  .product-availability li {
    margin-bottom: 0; }
    .product-availability li strong {
      display: inline; } }

.product {
  margin-bottom: 1.875rem; }
  .product p {
    margin-bottom: 0;
    line-height: 1.2; }
  .product h5, .product p {
    font-family: "mr-eaves-modern", "Helvetica", san-serif;
    font-size: 1rem; }
  @media (min-width: 600px) {
    .product {
      margin-bottom: 0;
      padding-bottom: 0 !important; } }

#availability {
  padding: 1.25rem 1.25rem 0 1.25rem; }
  #availability h2 + h4 {
    padding-top: 0;
    margin-bottom: 1.25rem; }
  @media (min-width: 600px) {
    #availability {
      padding: 2.5rem; } }

.toggle {
  display: flex;
  flex-wrap: nowrap; }
  .toggle .btn {
    width: 50%;
    margin: 0;
    text-align: left; }
    .toggle .btn:first-child {
      margin-right: 0.3125rem; }
    .toggle .btn:last-child {
      margin-left: 0.3125rem; }
  @media (min-width: 600px) {
    .toggle {
      justify-content: center; }
      .toggle .btn {
        width: auto; } }

.availability-toggle {
  display: none; }
  @media (min-width: 600px) {
    .availability-toggle {
      padding: 2.5rem; } }
  .availability-toggle .header-style-primary-small {
    text-transform: capitalize; }
  .availability-toggle.active {
    display: flex; }

.beer-name {
  margin-right: 0.625rem; }

.beer-type {
  font-weight: 600; }

#instagram {
  margin: 0 0.625rem 0.625rem 0.625rem; }
  #instagram ul {
    display: flex;
    flex-wrap: wrap; }
  #instagram li {
    width: 50%;
    padding: 0.625rem;
    margin: 0; }
  #instagram img {
    display: block;
    transition: transform 400ms; }
  #instagram li a figure {
    overflow: hidden; }
  #instagram li a:hover img {
    transform: scale(1.05); }
  @media (min-width: 600px) {
    #instagram {
      margin: 2.5rem 2.5rem 1.25rem 2.5rem; } }
  @media (min-width: 900px) {
    #instagram {
      margin: 2.5rem 2.5rem 3.75rem 2.5rem; }
      #instagram li {
        width: 25%; } }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

#map {
  height: 31.25rem;
  width: 100vw; }
  #map a {
    text-decoration: none; }

#location-list.wrapper {
  max-width: 65.625rem; }

#location-list .column {
  padding: 0;
  margin: 0; }

#location-list ol {
  margin: 0; }

#location-list li {
  margin: 0 0 1.875rem 0;
  transition: background-color 200ms, color 200ms; }
  #location-list li a {
    display: flex;
    flex-direction: row;
    text-decoration: none; }
  #location-list li figure {
    display: none;
    position: relative;
    margin: 0 1.25rem 0 0;
    width: 2rem;
    height: 3.5rem; }
    #location-list li figure svg {
      position: relative;
      width: 2rem;
      height: 3.5rem;
      z-index: 1;
      transition: fill 200ms; }
    #location-list li figure span {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      color: #fff;
      transform: translate(-50%, -50%);
      font-family: "komu-a", "Helvetica", san-serif;
      font-size: 1.875rem;
      transition: color 200ms; }
  #location-list li p {
    margin-bottom: 0; }
  @media (min-width: 600px) {
    #location-list li:hover {
      background-color: #000;
      color: #fff; }
      #location-list li:hover a {
        color: #fff; }
      #location-list li:hover figure svg {
        fill: #fff; }
      #location-list li:hover figure span {
        color: #000; } }

#location-list .column:last-child li:last-child {
  margin-bottom: 0; }

@media (min-width: 600px) {
  #location-list li {
    padding: 1.875rem 2.5rem;
    margin: 0; }
    #location-list li figure {
      display: block; } }

@media (max-width: 599px) {
  .expandable-section {
    margin: 0; }
    .expandable-section header {
      position: relative;
      border-top: 1px #000 solid;
      padding: 1.25rem 1.875rem 1.25rem 0; }
      .expandable-section header button {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        -webkit-appearance: none;
        background-color: transparent;
        border: 0; }
        .expandable-section header button svg {
          width: 0.5rem;
          height: 0.875rem;
          transform-origin: center center;
          transition: transform 200ms; }
      .expandable-section header h2 {
        margin: 0;
        line-height: 1;
        font-family: "mr-eaves-modern", "Helvetica", san-serif;
        font-weight: 700;
        font-size: 1rem; }
    .expandable-section .content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 1000ms; }
    .expandable-section.active header button svg {
      transform: rotate(90deg); }
    .expandable-section.active .content {
      max-height: 93.75rem;
      overflow: hidden; } }

@media (min-width: 600px) {
  .expandable-section header button {
    display: none; } }

/*------------------------------------*\
04-Templates
\*------------------------------------*/
/*------------------------------------*\
05-Themes
\*------------------------------------*/
.ui-dark {
  background-color: #000;
  color: #fff; }

.ui-single-column {
  padding: 1.875rem; }
  @media (min-width: 600px) {
    .ui-single-column {
      padding: 2.5rem; } }

.ui-two-column {
  display: flex;
  flex-direction: column;
  padding: 1.875rem; }
  .ui-two-column .column {
    width: 100%; }
    .ui-two-column .column:first-child {
      margin-bottom: 2.5rem; }
      @media (max-width: 599px) {
        .ui-two-column .column:first-child p:last-child {
          margin-bottom: 0; } }
  @media (min-width: 600px) {
    .ui-two-column {
      flex-direction: row;
      padding: 2.5rem; }
      .ui-two-column .column {
        width: 50%;
        padding: 2.5rem; }
        .ui-two-column .column:first-child {
          border-right: 2px #d3d2d2 solid;
          margin-bottom: 0; } }

#brewery-information a {
  text-decoration: none; }