/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
* { box-sizing: border-box; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; }

/** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove default margin. */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background: transparent; }

/** Improve readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.  1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

@font-face { font-family: 'gotham lighter'; src: url("../../fonts/gotham/gotham-light-webfont.eot"); src: url("../../fonts/gotham/gotham-light-webfont-1.eot") format("embedded-opentype"), url("../../fonts/gotham/gotham-light-webfont.woff") format("woff"), url("../../fonts/gotham/gotham-light-webfont.ttf") format("truetype"), url("../../fonts/gotham/gotham-light-webfont.svg") format("svg"); font-weight: lighter; font-style: normal; }
@font-face { font-family: 'gotham thin'; src: url("../../fonts/gotham/gotham-thin-webfont.eot"); src: url("../../fonts/gotham/gotham-thin-webfont-1.eot") format("embedded-opentype"), url("../../fonts/gotham/gotham-thin-webfont.woff") format("woff"), url("../../fonts/gotham/gotham-thin-webfont.ttf") format("truetype"), url("../../fonts/gotham/gotham-thin-webfont.svg") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'gotham'; src: url("../../fonts/gotham/gotham-medium-webfont.eot"); src: url("../../fonts/gotham/gotham-medium-webfont-1.eot") format("embedded-opentype"), url("../../fonts/gotham/gotham-medium-webfont.woff") format("woff"), url("../../fonts/gotham/gotham-medium-webfont.ttf") format("truetype"), url("../../fonts/gotham/gotham-medium-webfont.svg") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'gestalt bold'; src: url("../../fonts/gestalt/gestalt-linearboldselva-webfont.eot"); src: url("../../fonts/gestalt/gestalt-linearboldselva-webfont-1.eot") format("embedded-opentype"), url("../../fonts/gestalt/gestalt-linearboldselva-webfont.woff2") format("woff2"), url("../../fonts/gestalt/gestalt-linearboldselva-webfont.woff") format("woff"), url("../../fonts/gestalt/gestalt-linearboldselva-webfont.ttf") format("truetype"), url("../../fonts/gestalt/gestalt-linearboldselva-webfont.svg") format("svg"); font-weight: bold; font-style: normal; }
@font-face { font-family: 'gestalt'; src: url("../../fonts/gestalt/gestalt-linearmediumselva-webfont.eot"); src: url("../../fonts/gestalt/gestalt-linearmediumselva-webfont-1.eot") format("embedded-opentype"), url("../../fonts/gestalt/gestalt-linearmediumselva-webfont.woff2") format("woff2"), url("../../fonts/gestalt/gestalt-linearmediumselva-webfont.woff") format("woff"), url("../../fonts/gestalt/gestalt-linearmediumselva-webfont.ttf") format("truetype"), url("../../fonts/gestalt/gestalt-linearmediumselva-webfont.svg") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'gestalt lighter'; src: url("../../fonts/gestalt/gestalt-linearlightselva-webfont.eot"); src: url("../../fonts/gestalt/gestalt-linearlightselva-webfont-1.eot") format("embedded-opentype"), url("../../fonts/gestalt/gestalt-linearlightselva-webfont.woff2") format("woff2"), url("../../fonts/gestalt/gestalt-linearlightselva-webfont.woff") format("woff"), url("../../fonts/gestalt/gestalt-linearlightselva-webfont.ttf") format("truetype"), url("../../fonts/gestalt/gestalt-linearlightselva-webfont.svg") format("svg"); font-weight: lighter; font-style: normal; }
@font-face { font-family: 'icomoon'; src: url("../../fonts/icons/icomoon.eot"); src: url("../../fonts/icons/icomoon-1.eot") format("embedded-opentype"), url("../../fonts/icons/icomoon.woff") format("woff"), url("../../fonts/icons/icomoon.ttf") format("truetype"), url("../../fonts/icons/icomoon.svg") format("svg"); font-weight: normal; font-style: normal; }
[class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-check:before { content: "\e116"; }

.icon-cross:before { content: "\e117"; }

.icon-blog:before { content: "\e604"; }

.icon-facebook-rect:before { content: "\e607"; }

.icon-instagram:before { content: "\e608"; }

.icon-down:before { content: "\e609"; }

.icon-next:before { content: "\e605"; }

.icon-previous:before { content: "\e606"; }

.icon-logo:before { content: "\e604"; }

.icon-hops:before { content: "\e600"; }

.icon-malt:before { content: "\e601"; }

.icon-sugar:before { content: "\e602"; }

.icon-toast:before { content: "\e603"; }

html, body { height: 100%; color: white; font-size: 12px; font-family: gotham, verdana, arial, sans-serif; }
html.is_locked, body.is_locked { overflow: hidden !important; }

.skrollr-desktop body { height: 100% !important; }

h1, h2, h3, h4, h5, h6 { font-family: gestalt; }

.logo { margin: 0; padding: 0; width: 100%; left: 0; position: absolute; text-align: center; font-weight: lighter; font-family: "gestalt lighter"; }
.logo.faux_link { color: white; }

.logo__prelude, .logo__selva, .logo__postlude { display: block; }

.logo__prelude { font-size: 21px; font-family: "gestalt bold"; font-weight: bold; }
.logo__prelude .letter__1 { margin-left: -20px; }
.logo__prelude .letter__2 { margin-left: -7px; }
@media only screen and (min-width: 500px) { .logo__prelude { font-size: 30px; }
  .logo__prelude .letter__1 { margin-left: -27px; }
  .logo__prelude .letter__2 { margin-left: -12px; } }
@media only screen and (min-width: 640px) { .logo__prelude { font-size: 32px; }
  .logo__prelude .letter__1 { margin-left: -30px; }
  .logo__prelude .letter__2 { margin-left: -11px; } }
@media only screen and (min-width: 1200px) { .logo__prelude { font-size: 41px; }
  .logo__prelude .letter__1 { margin-left: -38px; }
  .logo__prelude .letter__2 { margin-left: -16px; } }

.logo__selva { margin-top: -37px; font-size: 76px; }
.logo__selva .letter { margin: 0 -20px; }
.logo__selva .letter__1 { margin-left: -30px; }
.logo__selva .letter__2 { margin-right: -22px; }
.logo__selva .letter__4 { margin: 0 -25px; }
@media only screen and (min-width: 500px) { .logo__selva { margin-top: -41px; font-size: 106px; }
  .logo__selva .letter { margin: 0; }
  .logo__selva .letter__1 { margin-left: -14px; }
  .logo__selva .letter__2, .logo__selva .letter__3 { margin-left: -58px; }
  .logo__selva .letter__4 { margin-left: -65px; }
  .logo__selva .letter__5 { margin-left: -61px; } }
@media only screen and (min-width: 640px) { .logo__selva { margin-top: -41px; font-size: 115px; }
  .logo__selva .letter__1 { margin-left: -14px; }
  .logo__selva .letter__2, .logo__selva .letter__3 { margin-left: -63px; }
  .logo__selva .letter__4 { margin-left: -70px; }
  .logo__selva .letter__5 { margin-left: -68px; } }
@media only screen and (min-width: 1200px) { .logo__selva { margin-top: -42px; font-size: 144px; }
  .logo__selva .letter__1 { margin-left: -18px; }
  .logo__selva .letter__2 { margin-left: -76px; }
  .logo__selva .letter__3 { margin-left: -80px; }
  .logo__selva .letter__4 { margin-left: -86px; }
  .logo__selva .letter__5 { margin-left: -84px; } }

.logo__postlude { margin-top: -30px; font-size: 8px; font-weight: bold; }
.logo__postlude .letter { display: inline-block; margin-right: 1px; }
.logo__postlude .letter__1 { margin-left: -13px; }
.logo__postlude .letter__5 { margin-left: -1px; }
.logo__postlude .letter__8 { margin-left: 9px; }
.logo__postlude .letter__9 { margin-left: -1px; }
.logo__postlude .letter__13 { margin-left: -1px; }
.logo__postlude .letter__16 { margin-left: -1px; }
@media only screen and (min-width: 500px) { .logo__postlude { margin-top: -30px; font-size: 12px; }
  .logo__postlude .letter { margin-right: -1px; }
  .logo__postlude .letter__1 { margin-left: -20px; }
  .logo__postlude .letter__5 { margin-left: 0px; }
  .logo__postlude .letter__8 { margin-left: 14px; }
  .logo__postlude .letter__9 { margin-left: 0px; }
  .logo__postlude .letter__13 { margin-left: 0px; }
  .logo__postlude .letter__16 { margin-left: 0px; } }
@media only screen and (min-width: 640px) { .logo__postlude { margin-top: -30px; font-size: 13px; }
  .logo__postlude .letter { margin-right: -1px; }
  .logo__postlude .letter__1 { margin-left: -22px; }
  .logo__postlude .letter__1 { margin-right: 0; }
  .logo__postlude .letter__5 { margin-left: 1px; }
  .logo__postlude .letter__8 { margin-left: 16px; }
  .logo__postlude .letter__9 { margin-left: 0px; }
  .logo__postlude .letter__11 { margin-left: 1px; }
  .logo__postlude .letter__12 { margin-left: 1px; } }
@media only screen and (min-width: 1200px) { .logo__postlude { margin-top: -30px; font-size: 18px; }
  .logo__postlude .letter { margin-right: -3px; }
  .logo__postlude .letter__1 { margin-left: -29px; }
  .logo__postlude .letter__5 { margin-left: -1px; }
  .logo__postlude .letter__8 { margin-left: 18px; }
  .logo__postlude .letter__9 { margin-left: 0px; }
  .logo__postlude .letter__11 { margin-left: -1px; }
  .logo__postlude .letter__12 { margin-left: 0px; }
  .logo__postlude .letter__13 { margin-left: -1px; }
  .logo__postlude .letter__16 { margin-left: -1px; } }

#data { position: fixed; padding: 20px; background-color: rgba(0, 0, 0, 0.7); color: white; z-index: 9999; display: none; }

.border__wrapper { display: none; }
@media only screen and (min-width: 810px) { .border__wrapper { display: block; height: 0; width: 0; }
  .border__wrapper > div { background-color: white; } }
.border__1 { top: 0; left: 0; position: fixed; width: 100%; z-index: 9999; height: 0; transition: height 0.3s; }
.is_active .border__1 { height: 12px; }
.border__2 { top: 0; right: 0; position: fixed; height: 100%; z-index: 9999; width: 0; transition: width 0.3s; }
.is_active .border__2 { width: 12px; }
.border__3 { left: 0; bottom: 0; position: fixed; width: 100%; z-index: 9999; height: 0; transition: height 0.3s; }
.is_active .border__3 { height: 12px; }
.border__4 { top: 0; left: 0; position: fixed; height: 100%; z-index: 9999; width: 0; transition: width 0.3s; }
.is_active .border__4 { width: 12px; }

.age_confirmation { margin: 0; cursor: pointer; padding: 30px 20px; min-height: 101px; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; background-color: rgba(0, 0, 0, 0.3); -webkit-transition: opacity 0.6s, -webkit-transform 0.6s ease-in-out; -moz-transition: opacity 0.6s, -moz-transform 0.6s ease-in-out; transition: opacity 0.6s, transform 0.6s ease-in-out; font-family: "gotham lighter"; text-transform: uppercase; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); }
@media only screen and (min-width: 500px) { .age_confirmation { padding: 70px; padding: 22px 70px 20px 20px; text-align: center; } }
@media only screen and (min-width: 810px) { .age_confirmation { padding: 34px 22px 22px; } }
.is_locked .age_confirmation { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; }

.age_confirmation__pre_post, .age_confirmation__main { margin: 0; padding: 0; }

.age_confirmation__pre_post { font-size: 2.4vw; }
@media only screen and (min-width: 500px) { .age_confirmation__pre_post { font-size: 12px; } }

.age_confirmation__main { font-size: 3.5vw; margin: 5px 0; }
@media only screen and (min-width: 500px) { .age_confirmation__main { font-size: 19px; } }

.age_confirmation__confirm { top: 20px; right: 20px; position: absolute; margin: 0; padding: 0; width: 60px; height: 60px; font-size: 30px; text-align: center; border-radius: 50%; color: white; border: 1px solid rgba(255, 255, 255, 0); background: none; line-height: 25px; z-index: 999; padding-left: 2px; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0); transition: background-color 0.3s, border-color 0.3s; }
@media only screen and (min-width: 810px) { .age_confirmation__confirm { top: 30px; right: 34px; } }
.age_confirmation:hover .age_confirmation__confirm { background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); }

.no-skrollr .parallax_section__wrapper { display: none !important; }

#skrollr-body { height: 100%; overflow: visible; position: relative; }

.about { position: relative; overflow-x: hidden; }

.about__logo { padding: 0; margin: 0; font-size: 60px; display: block; }
@media only screen and (min-width: 500px) { .about__logo { font-size: 75px; } }

.about__bottom_divider { display: inline-block; font-size: 22px; margin: 10px 0 10px; padding: 0px 40px 18px; padding: 0px 11vw 18px; border-bottom: 1px solid white; }
@media only screen and (min-width: 500px) { .about__bottom_divider { font-size: 28px; } }

.about__link { font-family: "gotham lighter"; text-transform: uppercase; font-size: 8px; }
@media only screen and (min-width: 500px) { .about__link { font-size: 10px; } }
.about__link .icon { text-decoration: none; font-size: 30px; margin: 0 6px 0 6px; color: rgba(255, 255, 255, 0.2); transition: color 0.3s; }
.about__link .icon:hover { color: white; }

.contact { list-style: none; list-style-type: none; font-family: "gotham lighter"; text-transform: uppercase; font-size: 10px; }
@media only screen and (min-width: 500px) { .contact { font-size: 12px; } }
@media only screen and (min-width: 810px) { .contact { font-size: 13px; } }
.contact a, .contact a:visited { color: white; text-decoration: none; }
.contact a:hover, .contact a:visited:hover { text-decoration: underline; }
.contact p.about__link a:hover, .contact a:visited:hover { text-decoration: none; }

.contact__item { padding: 1px 0; display: inline-block; vertical-align: middle; margin: 0 3px; }
.contact__item:nth-child(1) { border-right: 1px solid white; padding: 5px 23px 5px 0px; margin-left: -52px; }
@media only screen and (min-width: 500px) { .contact__item:nth-child(1) { margin-left: -60px; } }
@media only screen and (min-width: 810px) { .contact__item:nth-child(1) { margin-left: -65px; } }

.centered__wrapper { height: 100%; text-align: center; background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url("../../img/bg/lizard_mobile.jpg"); }
@media only screen and (min-width: 500px) { .centered__wrapper { background-image: url("../../img/bg/lizard.jpg"); } }
.centered__wrapper:before { content: ""; display: inline-block; height: 100%; width: 10px; vertical-align: middle; margin-right: -14px; }

.centered__content { width: 100%; display: inline-block; vertical-align: middle; }

.parallax_section__wrapper { left: 0; top: -100%; position: fixed; width: 100%; height: 100%; overflow: hidden; }

.parallax_section { display: none; top: 0; left: 0; bottom: 0; position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.parallax_section.skrollable-between { display: block; }
.parallax_section.parallax_section__bottles { background-size: contain; }

.gap { position: relative; height: 100%; width: 100vw; max-width: 100%; overflow-x: hidden; background-size: cover; background: transparent center no-repeat; }
.gap#bottles { overflow: hidden; }
.skrollr .gap { background: transparent !important; }

.gap__title { margin: 0; padding: 0; width: 100%; color: white; text-transform: uppercase; text-align: center; font-size: 7vw; }
@media only screen and (min-width: 640px) { .gap__title { font-size: 5.5vw; } }
@media only screen and (min-width: 810px) { .gap__title { font-size: 3.6vw; } }
.gap__title_bottles { color: black; padding: 30px 0; }

.gap__content_toggle { top: 20px; right: 20px; position: absolute; margin: 0; padding: 0; width: 60px; height: 60px; font-size: 30px; text-align: center; border-radius: 50%; color: white; border: 1px solid rgba(255, 255, 255, 0); background: none; line-height: 25px; z-index: 999; -webkit-transition: color 0.6s 0.36s, -webkit-transform 0.6s, background-color 0.2s, border-color 0.6s 0.26s, text-indent 0.6s; -moz-transition: color 0.6s 0.36s, -moz-transform 0.6s, background-color 0.2s, border-color 0.6s 0.26s, text-indent 0.6s; transition: color 0.6s 0.36s, transform 0.6s, background-color 0.2s, border-color 0.6s 0.26s, text-indent 0.6s; }
@media only screen and (min-width: 810px) { .gap__content_toggle { top: 30px; right: 34px; } }
.gap__content_toggle:hover { background-color: rgba(255, 255, 255, 0.2); }
.is_visible .gap__content_toggle { color: #adadac; border-color: #adadac; text-indent: 2px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: color 0.6s 0s, -webkit-transform 0.6s, background-color 0.2s, border-color 0.6s 0s, text-indent 0.6s; -moz-transition: color 0.6s 0s, -moz-transform 0.6s, background-color 0.2s, border-color 0.6s 0s, text-indent 0.6s; transition: color 0.6s 0s, transform 0.6s, background-color 0.2s, border-color 0.6s 0s, text-indent 0.6s; }
.is_visible .gap__content_toggle:hover { color: #666666; border-color: #666666; }
.is_reversed.is_visible .is_visible .gap__content_toggle { background-color: rgba(255, 255, 255, 0.2); }
.gap__content_toggle:focus { outline: none; box-shadow: 0 0 3px rgba(204, 221, 255, 0.9); }
.is_reversed .gap__content_toggle { color: #adadac; border-color: #adadac; }
#home .gap__content_toggle { color: white; border-color: rgba(255, 255, 255, 0); }
#home.is_visible .gap__content_toggle { border-color: white; }
.is_reversed.is_visible .gap__content_toggle { color: white; border-color: white; }

.lightbox__wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: white; color: black; overflow: auto; background-position: top center; background-size: contain; background-repeat: no-repeat; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.6s ease-in-out; -moz-transition: -moz-transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; }
@media only screen and (min-width: 500px) { .lightbox__wrapper { background-position: center center; } }
.is_visible .lightbox__wrapper { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
#bottles .lightbox__wrapper { color: white; background-size: cover; background-image: url(../../img/bg/living_ale_mobile.jpg); }
@media only screen and (min-width: 500px) { #bottles .lightbox__wrapper { background-image: url(../../img/bg/living_ale_desktop.jpg); } }
#rubia .lightbox__wrapper { background-image: url(../../img/bg/rubia_mobile.jpg); }
@media only screen and (min-width: 500px) { #rubia .lightbox__wrapper { background-image: url(../../img/bg/rubia_desktop.jpg); } }
#dorada .lightbox__wrapper { background-image: url(../../img/bg/dorada_mobile.jpg); }
@media only screen and (min-width: 500px) { #dorada .lightbox__wrapper { background-image: url(../../img/bg/dorada_desktop.jpg); } }
#naranja .lightbox__wrapper { background-image: url(../../img/bg/naranja_mobile.jpg); }
@media only screen and (min-width: 500px) { #naranja .lightbox__wrapper { background-image: url(../../img/bg/naranja_desktop.jpg); } }
#castana .lightbox__wrapper { background-image: url(../../img/bg/castana_mobile.jpg); }
@media only screen and (min-width: 500px) { #castana .lightbox__wrapper { background-image: url(../../img/bg/castana_desktop.jpg); } }
#morena .lightbox__wrapper { background-image: url(../../img/bg/morena_mobile.jpg); }
@media only screen and (min-width: 500px) { #morena .lightbox__wrapper { background-image: url(../../img/bg/morena_desktop.jpg); } }
#oscura .lightbox__wrapper { background-image: url(../../img/bg/oscura_mobile.jpg); }
@media only screen and (min-width: 500px) { #oscura .lightbox__wrapper { background-image: url(../../img/bg/oscura_desktop.jpg); } }
#done .lightbox__wrapper { color: black; background: white none; }

.overlay_content { width: 100%; min-height: 75vh; margin: 72vw 0 0; padding: 21px; text-align: center; background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 83px); background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 83px); }
@media only screen and (min-width: 640px) and (orientation: landscape) { .overlay_content { min-height: 0; } }
@media only screen and (min-width: 500px) { .overlay_content { min-height: 0; width: 50%; max-width: 250px; margin: 26vh 0 0 50%; padding: 0 0 0 20px; }
  #naranja .overlay_content { background-color: rgba(255, 255, 255, 0); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 83px); background-image: linear-gradient(to right,rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 83px); margin: 26vh 0 0 53%; } }
@media only screen and (min-width: 1000px) { .overlay_content { max-width: 360px; margin-left: 52%; }
  #naranja .overlay_content { margin-left: 55%; } }

.overlay_content__logo { font-size: 60px; }
@media only screen and (min-width: 1000px) { .overlay_content__logo { font-size: 70px; } }

.overlay_content__title { margin: 5px 0 0; padding: 0; font-size: 30px; font-weight: bold; font-family: "gestalt bold"; }
@media only screen and (min-width: 1000px) { .overlay_content__title { font-size: 40px; } }
.overlay_content__title.alt_title { margin-top: 30px; margin-bottom: 10px; padding-bottom: 15px; position: relative; display: inline-block; font-family: gotham, verdana, arial, sans-serif; }
@media only screen and (min-width: 500px) { .overlay_content__title.alt_title { margin-top: 0; margin-bottom: 20px; padding-bottom: 25px; } }
.overlay_content__title.alt_title:after { content: ""; position: absolute; width: 70%; left: 15%; bottom: 0; border-bottom: 1px solid; }

.overlay_content__subtitle, .overlay_content__percentage { margin: 5px 0 0; padding: 0; font-size: 12px; font-weight: lighter; font-family: "gestalt lighter"; }
@media only screen and (min-width: 1000px) { .overlay_content__subtitle, .overlay_content__percentage { font-size: 14px; } }

.overlay_content__percentage { margin-bottom: 20px; }

.overlay_content__text { max-width: 90%; width: 260px; font-size: 12px; margin: 1em auto; }
.whats_real__title ~ .overlay_content__text { width: 360px; }
@media only screen and (min-width: 500px) { .overlay_content__text { max-width: 80%; width: 440px; }
  .whats_real__title ~ .overlay_content__text { width: 540px; } }
@media only screen and (min-width: 810px) { .overlay_content__text { font-size: 16px; } }
@media only screen and (min-width: 1000px) { .whats_real__title ~ .overlay_content__text { width: 540px; } }
.alt_title ~ .overlay_content__text { text-transform: uppercase; font-size: 10px; }
@media only screen and (min-width: 500px) { .alt_title ~ .overlay_content__text { font-size: 14px; } }
@media only screen and (min-width: 1000px) { .alt_title ~ .overlay_content__text { font-size: 17px; width: 500px; } }

.cabo_blanco_image { width: 200px; display: inline-block; margin: 20px auto 0; }

.cabo_blanco_text { font-family: gestalt; font-size: 8px !important; margin: 0 auto; }

.info_list { font-size: 8px; text-transform: uppercase; }
@media only screen and (min-width: 1000px) { .info_list { font-size: 11px; } }

.info_list__label, .info_list__description { margin: 0; display: inline-block; text-align: left; }

.info_list__label { width: 63px; }

.info_list__description { position: relative; margin-bottom: 10px; width: calc(100% - 63px); font-weight: lighter; font-family: "gotham lighter"; }
.info_list__description:not(:last-child):after { content: ""; position: absolute; bottom: -5px; left: -25px; width: 100%; border-bottom: 1px solid #adadac; }
@media only screen and (min-width: 1000px) { .info_list__description:not(:last-child):after { left: -30px; bottom: -7px; } }

.taste_list { margin: 0; padding: 0; list-style: none; list-style-type: none; font-size: 8px; text-align: left; text-transform: uppercase; }
@media only screen and (min-width: 1000px) { .taste_list { font-size: 11px; } }

.taste_list__item { margin: 0; width: 50%; position: relative; display: inline-block; }
.taste_list__item:nth-child(1):after, .taste_list__item:nth-child(3):after { content: ""; width: 100%; height: 100%; position: absolute; right: 1px; top: 10px; border-right: 1px solid #adadac; }
.taste_list__item:nth-child(3):after { top: -10px; }
.taste_list__item:nth-child(even) { padding-left: 28px; }

.taste_list__label { margin: 0 0 5px; padding: 0; width: 42px; display: inline-block; }
@media only screen and (min-width: 1000px) { .taste_list__label { width: 60px; } }

.taste_list__icon { margin-right: 2px; color: #babcbb; font-size: 12px; }
@media only screen and (min-width: 1000px) { .taste_list__icon { font-size: 18px; } }
.taste_list__icon.is_active { color: black; }

.content { width: 100%; display: inline-block; vertical-align: middle; }
.content:before { content: ""; height: 100vh; width: 1px; margin-left: -1px; display: inline-block; vertical-align: middle; }

.text_ultra_thin { font-family: "gotham thin"; }

.text_thin { font-weight: lighter; font-family: "gotham lighter"; }

.text_bold { font-family: gotham; white-space: nowrap; }

.img_wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.faux_link { cursor: pointer; }