/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

button {
    outline: 0;
}

.button {
    display: inline-block;
    padding: 15px 20px;
    background-color: #E5D082;
    color: #000;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 20px;
    transition: 0.5s all;
}

.button:hover,
.button:focus {
    background-color: #B38C45;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html,
body {
    width: 100%;
    height: 100%;
    background-color: #000;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Removes flicker of double curly brace notation before angular loads */
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak,
.ng-hide {
    display: none !important;
}

/*-------- Skyline Absolutely Positioned ----------*/

/* Background image solution: http://css-tricks.com/perfect-full-page-background-image/ */
img.skyline,
img.distillery {
    /*Set rules to fill background*/
    min-height: 100%;
    min-width: 1024px;

    /*Set up proportionate scaling*/
    width: 100%;
    height: auto;

    /*Set up positioning*/
    position: fixed;
    top: 0;
    left: 0;

    z-index: 0;
    background-color: #000;
    -webkit-animation: FADEIN 1s cubic-bezier(0, 0.23, 0.32, 1) 0.2s;
    -moz-animation: FADEIN 1s cubic-bezier(0, 0.23, 0.32, 1) 0.2s;
    animation: FADEIN 1s cubic-bezier(0, 0.23, 0.32, 1) 0.2s;

    opacity: 0.55;
}

/* Specific to this particular image */
@media screen and (max-width: 1024px) {
    img.skyline {
        left: 50%;
        margin-left: -512px;
        /* 50% */
    }
}

/*-------- Page Border ----------*/

.page-border {
    width: 95%;
    margin-left: 2.5%;
    top: 40px;
    position: fixed;
    z-index: 1;
    opacity: 0;
    border-left: 2px solid #E5D082;
    border-right: 2px solid #E5D082;
    border-bottom: 2px solid #E5D082;
}

.page-border.bordered {
    /*    -webkit-animation: FADEBORDER 1s cubic-bezier(0, 0.23, 0.32, 1) 0.2s;
    -moz-animation: FADEBORDER 1s cubic-bezier(0, 0.23, 0.32, 1) 0.2s;
    animation: FADEBORDER 1s cubic-bezier(0, 0.23, 0.32, 1) 0.2s;*/
    opacity: 1;
}

.page-border.bordered:before {
    content: " ";
    width: 15%;
    height: 2px;
    background-color: #E5D082;
    position: absolute;
    top: 0;
    left: 0;
}

.page-age-verification .page-border.bordered:before,
.page-age-verification .page-border.bordered:after {
    width: 45%;
}

.page-border.bordered:after {
    content: " ";
    width: 15%;
    height: 2px;
    background-color: #e5d082;
    position: absolute;
    top: 0;
    right: 0;

}

/*-------- Menu ----------*/

.mobile-header {
    display: none;
}

nav.page-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 3;
}

ul.nav-list {
    width: 658px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.nav-list .nav-item {
    display: inline-block;
    padding-top: 30px;
    text-align: center;
    /*! margin-right: 10px; */
}

.nav-item a {
    text-decoration: none;
    color: #E5D082;
    text-transform: uppercase;
    padding: 15px 20px;
    border: 2px solid transparent;
    position: relative;
}

/* .nav-item:not(.logo-nav) a:hover, .nav-item.active a{
    border-color: #E5D082;
} */

.logo-nav {
    position: relative;
}

.page-home .logo-nav:after,
.page-our-bourbon .logo-nav:after,
.page-distillery .logo-nav:after {
    content: url("../img/glyph.png");
    position: absolute;
    bottom: -40px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}

.page-home .bottle-image {
    max-height: 600px;
}

.logo-header {
    float: left;
    width: 100%;
    margin-top: 30px;
    text-align: center;
}

svg.rectangle {
    position: absolute;
    left: 0;
    top: -2px;
}

.dynamic-border {
    position: relative;
    padding: 15px 15px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 15px;
}

.dynamic-border .path {
    stroke-dashoffset: 250;
    stroke-dasharray: 250;
    stroke: transparent;
    -webkit-transition: stroke-dashoffset .5s linear,
        stroke-dasharray .5s linear, stroke .1s linear .5s;
    -moz-transition: stroke-dashoffset .5s linear,
        stroke-dasharray .5s linear, stroke .1s linear .5s;
    transition: stroke-dashoffset .5s linear,
        stroke-dasharray .5s linear, stroke .1s linear .5s;
}

.dynamic-border:hover .path {
    stroke: #e5d082;
    stroke-dashoffset: 0;
    stroke-dasharray: 250;
    -webkit-transition: stroke-dashoffset .25s linear,
        stroke-dasharray .25s linear;
    -moz-transition: stroke-dashoffset .25s linear,
        stroke-dasharray .25s linear;
    transition: stroke-dashoffset .25s linear,
        stroke-dasharray .25s linear;
}

.nav-list .nav-item a .path {
    stroke-dashoffset: 200;
    stroke-dasharray: 200;
    stroke: transparent;
    -webkit-transition: stroke-dashoffset .5s linear,
        stroke-dasharray .5s linear, stroke .1s linear .5s;
    -moz-transition: stroke-dashoffset .5s linear,
        stroke-dasharray .5s linear, stroke .1s linear .5s;
    transition: stroke-dashoffset .5s linear,
        stroke-dasharray .5s linear, stroke .1s linear .5s;
}

.nav-list .nav-item a:hover .path,
.nav-list .nav-item.active a .path {
    stroke: #e5d082;
    stroke-dashoffset: 0;
    stroke-dasharray: 200;
    -webkit-transition: stroke-dashoffset .25s linear,
        stroke-dasharray .25s linear;
    -moz-transition: stroke-dashoffset .25s linear,
        stroke-dasharray .25s linear;
    transition: stroke-dashoffset .25s linear,
        stroke-dasharray .25s linear;
}

.mobile {
    display: none;
}

/*Home Page Navigation Animation*/

.home-nav {
    position: absolute;
    left: 35%;
    top: -20px;
    opacity: 0;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    -moz-transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    -webkit-transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    text-shadow: 0px 0px 10px rgba(229, 208, 130, 1);
    -webkit-transform-style: preserve-3d;
    will-change: transform, opacity;
}

.logo-image {
    position: relative;
    top: 0px;
    opacity: 1;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    -moz-transition: -moz-transform 0.25s ease-out, opacity 0.25s ease-out;
    -webkit-transition: -webkit-transform 0.25s ease-out, opacity 0.25s ease-out;
    -webkit-transform-style: preserve-3d;
    will-change: transform, opacity;
}

.logo-nav:hover .logo-image {
    -webkit-transform: translateY(-25px);
    -moz-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    -moz-transition: -moz-transform 0.25s ease-out, opacity 0.25s ease-out;
    -webkit-transition: -webkit-transform 0.25s ease-out, opacity 0.25s ease-out;
}

.logo-nav:hover .home-nav {
    -webkit-transform: translateY(28px);
    -moz-transform: translateY(28px);
    transform: translateY(28px);
    opacity: 1;
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    -moz-transition: -moz-transform 0.25s ease-out, opacity 0.25s ease-out;
    -webkit-transition: -webkit-transform 0.25s ease-out, opacity 0.25s ease-out;
}

.logo-nav:after {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}



/*-------- Content Structure ----------*/

.image-flex {
    text-align: center;
    width: 43%;
    align-self: center;
    position: fixed;
}

.page-home .image-flex {
    align-self: flex-start;
}

@media (min-height: 1000px) {
    .page-home .image-flex {
        align-self: center;
    }

}

#wrapper.flex {
    display: flex;
}

#wrapper.flex .align-center {
    align-self: center;
}

.page {
    width: 95%;
    margin: 0 auto;
    margin-top: 80px;
    position: relative;
    z-index: 1;
    height: 100%;
}

.page.hidden {
    display: none;
}

.content {
    position: relative;
}

.image {
    position: fixed;
    bottom: 0px;
    z-index: 2;
    width: 50%;
    text-align: center;
}

.bottle-image {
    position: fixed;
    z-index: 9;
    bottom: 0;
    left: 80px;
    max-height: 85%;
    width: auto;
}

.image-flex .bottle-image {
    position: relative;
    left: 0;
}

.page-defining-moments .bottle-image,
.page-accolades .bottle-image {
    z-index: 9999999;
}


.image img {
    width: 65%;
    max-width: 521px;
    height: auto;
}

.description {
    width: 50%;
    float: right;
    position: relative;
    z-index: 0;
}

.page-defining-moments .description {
    width: 52%;
}

.age-verification {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    display: none;
}

.age-verification .button--journey {
    font-size: 24px;
    display: flex;
    justify-content: center;
    float: unset;
    align-items: center;
}

.age-verification .timeline-button--end::before {
    position: relative;
    left: unset;
    bottom: unset;
}

.age-verification .button--journey .timeline-button--end {
    position: relative;
}

.age-verification .button--journey .button__text {
    padding: unset;
}

.age-verification .page {
    padding-top: 50px;
}

.page-nav.hide {
    opacity: 0;
    pointer-events: none;
}

.header-image {
    margin-top: 50px;
    margin-bottom: 20px;
}

.header-image--bottom {
    margin-top: 25px;
}

.age-verification .header-image {
    margin-top: 20px;
    margin-bottom: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*-------- Content Structure for Additional Expressions ----------*/

.page-our-bourbon .timeline-intro {
    position: relative;
}

/* .page-our-bourbon .description, .page-cocktails .description {
    height: 77vh;
} */

.page-expressions .scroller p {
    margin: 0 auto;
    margin-top: 24px;
}

.expressions-button {
    position: absolute;
    width: 215px;
    margin-top: 36px;
    text-align: center;
    bottom: 0;
}

.expressions-button:before,
.expressions-button:after {
    content: "";
    position: absolute;
    width: 70px;
    height: 1px;
    border-top: 1px solid #e5d082;
    top: 27px;
}

.expressions-button:before {
    left: 0px;
}

.expressions-button:after {
    right: 0;
}

.cocktail-items {
    width: 100%;
    margin-top: 50px;
}

.cocktail-items .col-1 {
    width: 48%;
    float: left;
}

.cocktail-items .col-2 {
    width: 48%;
    margin-left: 20px;
    float: left;
}

.cocktail-items a {
    margin-bottom: 20px;
    display: block;
}

.cocktail-items img {
    width: 100%;
    transition: 0.5s all
}

.cocktail-items a:hover img {
    opacity: 0.7;
    transition: 0.5s all;
}

.single-cocktail a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-cocktail a span {
    position: absolute;
    /* font-weight: bold; */
    text-transform: uppercase;
    font-size: 2em;
    z-index: 2;
}

/*Quick and dirty work around for CC2015 SVG issues*/

.svg-fix {
    width: 400px;
}

.expression-items {
    max-width: 540px;
}

.expression-items p {
    margin-bottom: 50px;
}

.single-expression h2 {
    margin-bottom: 20px;
    -webkit-font-smoothing: auto;
}

.single-expression {
    width: 220px;
    float: left;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.single-expression-top-row {
    margin-left: 160px;
}

.single-expression-margin {
    margin-left: 100px;
}

.single-expression .expression-bottle {
    width: 100%;
}

.single-expression .divider {
    margin-top: 10px;
}

.single-expression--button {
    background: unset;
    border: unset;
    color: #e5d082;
    font-size: 16px;
    font-family: neutraface-text, sans-serif;
    line-height: 22px;
    position: relative;
    text-decoration: underline;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: 700;
}

.single-expression-new-row {
    clear: left;
}

.single-expression-extra-row {
    margin-top: 50px;
}

p.footnote {
    font-size: 0.8em;
    font-style: italic;
}

/*--------
Timeline Graphic
CSS Only
Trying out BEM CSS naming style as per http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
 ----------*/


.timeline {
    position: absolute;
    float: left;
    height: 100%;
}

#defining-moments-timeline-graphic {
    left: 14%;
    top: 0;
}

.timeline-button:hover {
    cursor: pointer;
}

.timeline-button:before {
    content: url("../img/timeline-button.png");
    /*content: url("../img/up-down-arrow.svg");*/
    position: relative;
    z-index: 1;
    bottom: -8px;
    left: -21px;
}

.timeline-button--scroll:before,
.timeline-button--scroll:hover:before {
    -webkit-transition: -webkit-transform 0.25s ease-out;
    -moz-transition: -moz-transform 0.25s ease-out;
    transition: transform 0.25s ease-out;
}

.timeline-button--scroll:hover:before {
    display: inline-block;
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    transform: translateY(8px);
}

.timeline-button strong.dynamic-line {
    position: relative;
    top: -15px;
}

.timeline-button--end {
    position: relative;
}

.timeline-button--end:before {
    display: inline-block;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
    bottom: 9px;
    left: -18px;
}

.timeline__line {
    height: 75px;
    width: 1px;
    background-color: #e5d082;
    position: relative;
    left: 6px;
}

.timeline__line--fade-top {
    background: linear-gradient(to top, rgba(229, 208, 130, 1) 60%, rgba(0, 0, 0, 0) 100%);
}

.timeline__line--fade-bottom {
    background: linear-gradient(to bottom, rgba(229, 208, 130, 1) 80%, rgba(0, 0, 0, 0) 100%);

}

.timeline__line--end {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.timeline__line--end:before {
    content: " ";
    width: 9px;
    height: 29px;
    position: absolute;
    border-left: 1px solid #e5d082;
    left: -4px;
    border-right: 1px solid #e5d082;
}

.timeline__line--end:after {
    content: " ";
    position: absolute;
    width: 19px;
    height: 21px;
    border-left: 1px solid #e5d082;
    border-right: 1px solid #e5d082;
    left: -9px;
}

.timeline__space {
    height: 75px;
}

.timeline__line--begin:before {
    content: " ";
    width: 9px;
    height: 29px;
    position: absolute;
    border-left: 1px solid #e5d082;
    left: -4px;
    border-right: 1px solid #e5d082;
}

.timeline__line--begin:after {
    content: " ";
    position: absolute;
    width: 19px;
    height: 21px;
    border-left: 1px solid #e5d082;
    border-right: 1px solid #e5d082;
    left: -9px;
}


.timeline__diamond {
    width: 13px;
    height: 13px;
    background-color: #000;
    border: 1px solid #e5d082;
    position: relative;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*-------- Defining Moments Timeline ----------*/

.page-cocktails .button {
    display: none;
}

.moment {
    height: 651px;
    position: absolute;
    margin-left: 47px;
    z-index: 1;
}

.timeline-graphic {
    position: absolute;
    left: -60px;
}

.moment .date {
    font-size: 55px;
    position: relative;
    left: -42px;
}

.moment-content {
    padding-left: 50px;
}

.moment-content h2 {
    font-size: 55px;
}

.timeline-control {
    position: absolute;
    z-index: 10;
    top: 60px;
}

.page-defining-moments .timeline {
    left: -86px;
    top: -25px;
}

.moment--content li {
    position: relative;
    display: block;
    float: left;
    height: 502px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.moment--content {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    padding-left: 86px;
}

.moment--content .date {
    font-size: 55px;
    position: absolute;
    left: -125px;
    top: 136px;
}

.moment--content .defining-images {
    float: left;
    padding-right: 20px;
    position: relative;
    top: -8px;
}

.moment--content .title {
    margin-top: 143px;
    font-size: 55px;
    text-transform: uppercase;
}

.moment--content .caption {
    padding-right: 20px;
    font-size: 16px;
}

.moment--content .title,
.moment--content .caption,
.timeline-control {
    margin-left: 25px;
}


.timeline-control .control-prev.timeline-button:before {
    display: inline-block;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    padding-top: 6px;
}

.timeline.timeline--start {
    position: relative;
}

.page-defining-moments .timeline-intro {
    margin-bottom: 30px;
}

.end-group {
    width: 100%;
    position: relative;
    float: right;
    top: -23px;
}

.end-group .timeline-button--end h2 {
    position: absolute;
    top: -13px;
    margin-left: 50px;
}

.share-group {
    margin-left: 25px;
    position: relative;
    z-index: 9;
}

.share-group a {
    margin-right: 10px;
}


/*-------- Accolades Timeline ----------*/

/*.accolade:nth-child(odd):before{
    content: url(../img/timeline-middle.png);
    position: absolute;
    left: -8px;
}*/

.page-accolades .description {
    width: 52%;
}

.timeline-button strong {
    font-weight: normal;
}

.accolade-content {
    height: 116px;
    padding-left: 50px;
    position: relative;
}

.accolade-content h2 strong,
.accolade--special h2 strong {
    font-weight: normal;
}

.accolade h2,
.accolade h2 strong {
    /* font-size: 28px; */
    text-transform: uppercase;
    font-family: neutraface-text, sans-serif;
}

.timeline-button h2 strong {
    font-weight: normal;
}

.accolade .date {
    font-weight: normal;
}

.accolade .date strong {
    font-weight: normal;
}

.accolade .accolade-content span.date {
    font-weight: normal;
}

.accolade--special {
    height: 280px;
    position: relative;
    margin-top: -100px;
}

.accolade--special .date {
    position: absolute;
    left: -45px;
    top: 111px;
}

.accolade--special h2 {
    padding-top: 121px;
    margin-left: 20px;
}

.accolade--special p {
    margin-left: 20px;
}



/*.page-accolades .timeline-button:after{
    content: url("../img/timeline-middle.png");
    position: relative;
    left: -63px;
    bottom: -10px;
}*/

.accolade .timeline {
    left: 0;
    top: 5px;
}

.accolade .timeline__line {
    height: 100px;
}

.page-accolades .timeline-button--end h2 {
    position: absolute;
    top: -13px;
    left: 50px;
}


/*-------- Fixed Page Footer ----------*/

footer.page-footer {
    position: fixed;
    bottom: 0;
    right: 10px;
    width: 52%;
    height: 50px;
    background-color: #000000;
    z-index: 2;
}

.page-footer section {
    font-size: 10px;
}

.page-footer section p {
    text-transform: uppercase;
}

.page-footer section p {
    max-width: 90%;
    color: #e5d082;
    margin-top: 0;
    margin-bottom: 0;
}

/*-------- Fade In Animation On Load ----------*/

@keyframes FADEIN {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.55;
    }
}

@-webkit-keyframes FADEIN {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.55;
    }
}

@-moz-keyframes FADEIN {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.55;
    }
}

@-ms-keyframes FADEIN {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.55;
    }
}

@keyframes FADEBORDER {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes FADEBORDER {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes FADEBORDER {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes FADEBORDER {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*-------- iScroll 5 CSS ----------*/

body {
    overflow: hidden;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    margin-right: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #000000;
    border: 1px solid #e5d082;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #111111;
}

#wrapper {
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    height: 82vh;
    z-index: 999999;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;

    /* Prevent the callout on tap-hold and text selection */
    /*    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/

    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
    margin-right: 10px;

}

.scroller {
    position: absolute;
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    width: 52%;
    right: 0;
}

.page-expressions .scroller {
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
}

.page-accolades .description,
.page-defining-moments .description,
.page-our-bourbon .description,
.page-cocktails .description,
.page-home .description {
    width: 100%;
    float: unset;
}

.award {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2em;
}

.award .date {
    font-size: 46px;
    margin-right: 0.5em;
}

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

.award .info h2 {
    margin-bottom: 0;
    margin-top: 0;
}

.award .info p {
    margin: 0;
}

.iScrollIndicator {
    box-sizing: border-box;
    position: absolute;
    border-radius: 0;
    border: 1px solid #E5D082;
    width: 100%;
    background: rgba(0, 0, 0, 0.49);
}

.iScrollVerticalScrollbar {
    position: absolute;
    z-index: 9999;
    width: 8px;
    bottom: 2px;
    top: 2px;
    right: 5px;
    overflow: hidden;
}

ul.no-bullets {
    padding-left: 0;
}

ul.no-bullets li {
    list-style-type: none;
    color: #FFF7C9;
}

ol {
    padding-left: 1em;
}

ol li {
    color: #FFF7C9;
}

/*-------- Starry Night ----------*/


.stars {
    position: fixed;
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -webkit-animation: TWINKLING 5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: TWINKLING 5s;
    -moz-animation-iteration-count: infinite;
    animation: TWINKLING 5s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes TWINKLING {
    0% {
        -webkit-transform: scale(0.1);
    }

    50% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(0.1);
    }
}

@-moz-keyframes TWINKLING {
    0% {
        -moz-transform: scale(0.1);
    }

    50% {
        -moz-transform: scale(0.5);
    }

    100% {
        -moz-transform: scale(0.1);
    }

}

@keyframes TWINKLING {
    0% {
        transform: scale(0.1);
    }

    50% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(0.1);
    }
}

/*-------- button bordered style ----------*/

.button--bordered {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 5px;
    text-transform: uppercase;
    font-family: neutraface-text, sans-serif;
    line-height: 1;
    font-size: 14px;
}

.button--bordered>div {
    background-color: #e5d082;
    color: black;
    padding: 10px 15px 8px;
    position: relative;
    overflow: hidden;
    -webkit-transition: color 0.2s cubic-bezier(0, 0.23, 0.31, 1),
        background-color 0.2s cubic-bezier(0, 0.23, 0.31, 1);
}

/*.button--bordered:hover > div{
    color: #e5d082;
    background-color: transparent;
    -webkit-transition: color 0.2s cubic-bezier(0, 0.23, 0.31, 1),
                        background-color 0.2s cubic-bezier(0, 0.23, 0.31, 1);
}*/

/*-------- button journey style ----------*/

.button--journey {
    display: inline-block;
    position: relative;
    float: left;
    text-decoration: none;
}

.button--journey.first {
    margin-bottom: 20px;
}

.button--journey .timeline-button--end {
    position: absolute;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

.button--journey .timeline-button--end:before {
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
}

.button--journey:hover .timeline-button--end:before {
    -webkit-transform: translateX(8px) rotate(270deg);
    -moz-transform: translateX(8px) rotate(270deg);
    transform: translateX(8px) rotate(270deg);
    -webkit-transition: -webkit-transform 0.25s ease-out;
    -moz-transition: -moz-transform 0.25s ease-out;
    transition: transform 0.25s ease-out;
}

.button--journey .button__text {
    font-size: 24px;
    text-decoration: none;
    padding-left: 50px;
    text-transform: uppercase;
    padding-top: 9px;
    line-height: 29px;
    cursor: pointer;
}

.dynamic-line {
    position: relative;
    overflow: hidden;
}

.dynamic-line svg {
    position: absolute;
    bottom: 0;
}

.dynamic-line .path--line {
    position: absolute;
    stroke: transparent;
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    -webkit-transition: stroke-dashoffset .5s linear,
        stroke-dasharray .5s linear, stroke .1s linear .5s;
    -moz-transition: stroke-dashoffset .5s linear,
        stroke-dasharray .5s linear, stroke .1s linear .5s;
    transition: stroke-dashoffset .5s linear,
        stroke-dasharray .5s linear, stroke .1s linear .5s;
}

.dynamic-line.dynamic-line--long .path--line {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}

.dynamic-line.dynamic-line--long:hover .path--line,
.timeline-button:hover .dynamic-line.dynamic-line--long .path--line {
    stroke-dasharray: 800;
    stroke-dashoffset: 0;
}

.dynamic-line:hover .path--line,
.timeline-button:hover .dynamic-line .path--line {
    stroke: #e5d082;
    stroke-dasharray: 250;
    stroke-dashoffset: 0;
    -webkit-transition: stroke-dashoffset .25s linear,
        stroke-dasharray .25s linear;
    -moz-transition: stroke-dashoffset .25s linear,
        stroke-dasharray .25s linear;
    transition: stroke-dashoffset .25s linear,
        stroke-dasharray .25s linear;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {}

@media only screen and (max-height: 800px) {
    #wrapper {
        height: 78vh;
    }
}

@media only screen and (max-width: 1500px) {
    .bottle-image {
        max-width: 45%;
    }

    .page-home .bottle-image {
        max-height: 450px;
    }
}

@media only screen and (max-height: 600px) {
    #wrapper {
        height: 73vh;
    }

    .page-home .bottle-image {
        max-height: 300px;
    }
}

@media only screen and (max-width: 1280px) {
    #slider {
        top: 0;
    }


    .accolade--special h2 {
        font-size: 1.5em;
    }

    .moment--content .title {
        font-size: 36px;
        margin-top: 158px;
    }

    .description {
        padding-right: 50px;
    }

    .image img {
        max-height: 500px;
        width: auto;
    }

    .header-image {
        max-width: 90%;
    }

    .bottle-image {
        max-width: 40%;
    }

    .cocktail-items .col-1,
    .cocktail-items .col-2 {
        width: 43%;
    }

    .award {
        flex-direction: column;
    }

    .award .date {
        margin-right: 0;
    }

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

}

@media only screen and (max-width: 1024px) {
    .moment--content .caption {
        font-size: 0.8125em;
    }
}

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

    .page-border.bordered:after,
    .page-border.bordered:before {
        width: 8%;
    }
}

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

    .page {
        position: relative;
    }

    .scroller {
        width: 57%;
    }

    .page-nav {
        position: relative;
    }

    .mobile-header {
        display: block;
    }

    .page-border.bordered:after,
    .page-border.bordered:before {
        width: 5%;
    }

    .page-defining-moments .image {
        display: none;
    }

    .page-defining-moments .description {
        width: 100%;
        padding: 5%;
    }

    .page-defining-moments .end-group {
        padding: 5%;
        top: -42px;
        padding-top: 0;
    }


    .bottle-image {
        /*position: absolute;*/
        width: 35%;
        max-height: 400px;
        bottom: 61px;
        left: 15px;
    }

    .page-home .bottle-image {
        bottom: 0;
    }

    .page-accolades .bottle-image,
    .page-defining-moments .bottle-image {
        left: 35px;
    }

    .moment--content .title {
        margin-top: 155px;
        font-size: 36px;
    }

    .page-footer section {
        width: 95%;
        float: left;
        margin-left: 2.5%;
    }
}

@media only screen and (max-width: 767px) {
    .award {
        margin-bottom: 1em;
    }

    .page {
        margin-top: 0;
        width: 100%;
    }

    .page-footer.fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    .age-verification {
        background: #000000;
    }

    .age-verification .page {
        margin-top: 80px;
    }

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    html,
    body {
        background-color: #DEDEDE;
        font-family: neutraface-text, sans-serif;
        overflow: unset;
    }

    footer.page-footer {
        position: relative;
        bottom: unset;
        right: unset;
        width: 100%;
        height: auto;
    }

    .page-footer section {
        float: unset;
        margin-left: auto;
        margin-right: auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .page-footer section p {
        margin-width: unset;
        text-transform: unset;
        max-width: unset;
        font-size: 11px;
        font-weight: bold;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .page-footer section p:last-of-type {
        text-transform: uppercase;
    }

    .stars {
        display: none;
    }

    a {
        text-decoration: none;
    }

    p {
        text-align: center;
    }

    .moment--content {
        padding-left: unset;
    }

    .moment--content li {
        height: auto;
        float: unset;
        margin-top: 40px;
    }

    .moment--content .title {
        margin-top: unset;
        margin-left: unset;
        font-size: 30px;
    }

    .timeline-intro p,
    .description p {
        padding-left: 10px;
        padding-right: 10px;
    }

    .moment--content .caption {
        margin-left: unset;
        padding-left: 20px;
    }

    .mobilegrey {
        text-align: center;
        color: #848484;
        font-size: 38px;
        line-height: 1.6;
        font-weight: normal;
        font-style: normal;
        margin-bottom: 0;
        margin-top: 60px;
    }

    .mobilewhite {
        text-align: center;
        color: white;
        font-size: 36px;
        line-height: 1.6;
        font-weight: normal;
        font-style: normal;
        margin-bottom: 14px;
        margin-top: 53px;
        padding: 0px 20px 0px 20px;
    }

    .mobilelightheader {
        font-size: 27px;
        text-align: center;
        color: white;
        line-height: 1.6;
        font-weight: normal;
        font-style: normal;
        margin-bottom: 0;
        margin-top: 60px;
        padding: 0px 20px 0px 20px;
    }

    .mobilesmallwhite {
        text-align: center;
        color: white;
        font-size: 23px;
        padding-top: 31px;
        margin-top: 0px;
    }

    .pageimg {
        max-width: 275px;
        padding: 17px 17px 48px 17px;
    }

    .buttontypo {
        width: 194px;
        height: 55px;
        border-radius: 4px;
        background-color: white;
    }

    .active {
        text-decoration: line-through;
        color: grey;
        font-weight: 900;
    }

    .navitem {
        color: black;
        font-weight: 900;
    }

    #nav {
        display: none;
        background-color: #D8D8D8;
        padding-bottom: 42px;
    }

    .textdark {
        color: black;
        padding: 56px 20px 27px 20px;
    }

    .textdark2 {
        color: black;
        padding: 175px 20px 27px 20px;
        margin-top: 0px;
    }

    .textdark3 {
        color: black;
        padding: 56px 20px 27px 20px;
        margin-top: 0px;
    }

    .quotemain {
        color: #FFF;
        padding: 0px 37px 9px;
        font-size: 24px;
    }

    .quotesub {
        color: #FFF;
        padding: 0px 37px 9px;
        font-size: 15px;
        margin-bottom: 0px;
    }

    .textdark4 {
        color: #000;
        padding: 0px 20px;
        font-size: 25px;
        font-weight: 900;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .textdark5 {
        color: #000;
        padding: 0px 20px;
        font-size: 15px;
        font-weight: 900;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .textlight {
        color: white;
        padding: 33px 20px 27px 20px;

    }

    .accoladesrate {
        color: white;
        padding: 33px 20px 27px 20px;
        font-family: neutraface-text, sans-serif;
        font-size: 15px;
    }

    .textlight4 {
        color: #FFF;
        padding: 33px 26px 27px;
        line-height: 31px;
        margin-bottom: 0px;
    }

    .textlightp {
        color: white;
        padding: 0px 20px 27px 20px
    }

    .momenttext {
        color: #000;
        padding: 4px 20px 11px;
        margin-top: 0px;
        font-size: 13px;
    }

    .directionbutton {
        padding-top: 4px;
        text-align: center;
        padding-bottom: 0px;
    }

    .bourbonbutton {
        text-align: center;
        padding-top: 36px;
        padding-bottom: 36px;

    }

    .definingbutton {
        text-align: center;
        padding-bottom: 45px;
        padding-top: 36px;

    }

    .footer {
        background-color: #FFF;
        width: 100%;
        padding: 0px;
        margin-left: 0px;
        margin-top: 60px;
    }

    .footer2 {
        background-color: #000;
        width: 100%;
        padding: 0px;
        margin-left: 0px;
        margin-top: 0px;
    }

    .footertext {
        color: #e5d082;
        padding: 0px 20px 27px;
        font-size: 12px;
    }

    .transparentcommon {
        width: 320px;
    }

    .transparentcommon2 {
        width: 320px;
        padding-bottom: 65px;
    }

    .paleboxborder {
        background-color: #DEDEDE;
        border: 3px solid #F2F0F0;
        width: 283px;
        padding: 0px;
        margin-left: 14px;
        margin-top: 94px;
        margin-bottom: 50px;
    }

    .greyboxborder {
        background-color: #808080;
        border: 3px solid #F2F0F0;
        width: 283px;
        padding: 0px;
        /*margin-left: 14px;*/
        /*margin-top: 94px;*/
        /*margin-bottom: 50px;*/
    }

    .greyboxnoborder {
        background-color: #808080;
        /*border: 3px solid #F2F0F0;*/
        width: 283px;
        padding: 0px;
        /*margin-left: 14px;*/
        /*margin-top: 94px;*/
        /*margin-bottom: 50px;*/
    }

    .greybox {
        background-color: #808080;
        width: 306px;
        padding-left: 14px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .palebox {
        background-color: #DEDEDE;
        width: 100%;
        padding: 0px;
        /*margin-left: 14px;*/
        /*margin-top: 62px;*/
        padding-bottom: 16px;
    }

    .paleboxheight {
        background-color: #DEDEDE;
        width: 283px;
        /*height:100%;*/
        padding: 0px;
        margin-left: 14px;
        margin-top: 213px;
        margin-bottom: 16px;
    }

    .paleboxheight2 {
        background-color: #DEDEDE;
        width: 100%;
        /*height:100%;*/
        /*padding: 0px;*/
        /*margin-left: 14px;*/
        padding-top: 70px;
        padding-bottom: 16px;
    }

    .distillerybody {
        background-color: #2E2E2E;
        width: 320px;
        /*height:831px;*/
    }

    .accoladesbody {
        background-color: #2E2E2E;
        width: 320px;
        /*height:1086px;*/
    }

    .momentsbody {
        background-color: #2E2E2E;
        width: 320px;
        /*height:966px;*/
    }

    .bourbonbody {
        background-color: #2E2E2E;
        width: 320px;
        /*height:877px;*/
    }

    .homebody {
        background-color: #2E2E2E;
        width: 320px;
        /*height: 770px;*/
    }

    .naviconposition {
        text-align: center;
        padding-top: 17px;
    }

    .navimg {
        width: 25px;
    }

    #navclose {
        top: -20px;
        position: relative;
    }

    .momentsimg {
        text-align: center;
    }

    .hometextp {
        padding: 0px 25px 0px 25px;
    }

    .footerfbicon {
        width: 40px;
    }

    .our-bourbonp {
        padding: 0px 25px 0px 25px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        max-width: none;
    }

    p {
        max-width: none;
    }

    *,
    *:before,
    *:after {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

    body {
        font-family: neutraface-text, sans-serif;
        background-color: #000;
    }

    .logo {
        text-align: center;
        color: #fff;
        font-size: 23px;
        padding-top: 31px;
        margin-top: 0;
    }

    #nav {
        display: none;
        background-color: #000;
        padding-bottom: 30px;
        padding-top: 30px;
    }

    .naviconposition {
        text-align: center;
        padding-top: 17px;
    }


    .nav-item {
        font-weight: bold;
        color: #E5D082;
    }

    .nav-item.active {
        color: #fff7c9;
        position: relative;
        text-decoration: underline;
    }

    .main {
        min-height: 100%;
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        height: auto;
    }

    .main.nyc {
        background-image: url(../img/nyc.jpg);
    }

    .main.london {
        background-image: url(../img/london.jpg);
    }

    .main.cocktail {
        background-image: url(../img/cocktails-mobile.jpg);
    }

    .main.dallas {
        background-image: url(../img/dallas-skyline.jpg);
    }

    .main.la {
        background-image: url(../img/la-skyline.jpg);
    }

    .main.distillery {
        background-image: url(../img/distillery.jpg);
    }

    .main {
        text-align: center;
    }

    h1 {
        font-size: 40px;
        margin-bottom: 0;
    }

    h4 {
        font-size: 10px;
    }

    .page-cocktails .bottle-image {
        display: none;
    }

    .section {
        width: 100%;
        padding: 20px 10px;
        text-align: center;
    }

    .button {
        display: inline-block;
        padding: 15px 20px;
        background-color: #E5D082;
        color: #000;
        font-size: 14px;
        line-height: 1;
        margin-bottom: 20px;
        float: unset;
        width: 90%;
    }

    .expressions-button {
        margin-top: 15px;
    }

    .button--space {
        margin-top: 20px;
    }

    .border {
        border: 2px solid #E5D082;
        padding: 15px;
    }

    .bottle-img {
        max-width: 80%;
        margin-top: 30px;
        margin-bottom: -6px;
        max-height: 250px;
        margin-bottom: 20px;
    }

    .footer2 {
        background-color: #000;
    }

    .footer2 p {
        font-size: 11px;
        color: #E5D082;
    }

    .footer2 b {
        display: block;
    }

    .moments {
        margin-bottom: 30px;
    }

    .moments__year,
    .moments__title {
        font-size: 24px;
        margin-top: 5px;
        margin-bottom: 5px;
        color: #E5D082;
        text-transform: uppercase;
    }

    .moments__text {
        font-size: 16px;
        margin-top: 5px;
        margin-bottom: 5px;
        color: #fff7c9;
    }

    .moments__text--uppercase {
        text-transform: uppercase;
    }


    .single-expression {
        margin-top: 36px;
        text-align: center;
        width: unset;
        float: unset;
    }

    .single-expression-margin {
        margin-left: unset;
    }

    .expression-bottle {
        height: 300px;
        display: block;
        margin: 0 auto;
    }

    .expressions-button {
        position: relative;
        width: 215px;
        margin-top: 36px;
        text-align: center;
        bottom: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .expressions-button:before,
    .expressions-button:after {
        content: "";
        position: absolute;
        width: 70px;
        height: 1px;
        border-top: 1px solid #e5d082;
        top: 27px;
    }

    .expressions-button:before {
        left: 0px;
    }

    .expressions-button:after {
        right: 0;
    }

    .single-expression h2 {
        margin-bottom: 20px;
    }

    .single-expression .divider {
        margin-top: 36px;
    }

    .single-expression--button {
        background: unset;
        border: unset;
        color: #e5d082;
        font-size: 16px;
        font-family: neutraface-text, sans-serif;
        line-height: 22px;
        position: relative;
        text-decoration: underline;
        margin-top: 15px;
        margin-bottom: 5px;
        font-weight: 700;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .bottle-image {
        width: 50%;
        margin-top: 36px;
        margin-bottom: 36px;
        max-height: unset;
        bottom: unset;
        left: unset;
        position: relative;
        max-width: unset;
    }

    .page-accolades .bottle-image,
    .page-defining-moments .bottle-image {
        left: unset;
    }

    #wrapper {
        height: unset;
        margin-right: unset;
        overflow: unset;
    }

    .scroller {
        width: 100%;
        position: relative;
    }

    .description {
        padding-right: unset;
    }

    .accolade-content {
        height: auto;
        padding-left: unset;
    }

    .accolade--special h2 {
        margin-left: unset;
        padding-top: unset;
        margin-top: unset;
    }

    .accolade--special {
        margin-top: unset;
        border: 1px solid #e5d082;
        margin-top: 20px;
        margin-bottom: 10px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        padding: 15px;
    }

    .accolade--special p {
        margin: 0;
    }

    .accolade--special .date {
        position: relative;
        left: unset;
        top: unset;
        font-size: 30px;
        line-height: 1;
    }

    .page-cocktails .button--journey {
        display: none;
    }

    .page-cocktails .button {
        display: inline-block;
    }

    .cocktail-items .col-1,
    .cocktail-items .col-2 {
        width: 100%;
        float: unset;
        margin: unset;
    }

    .page {
        height: auto;
    }

    .page-border {
        display: none;
    }

    .single-expression .expression-bottle {
        width: unset;
    }

    a[data-fancybox] img {
        max-width: 90%;
        border: 1px solid #E5D082;
    }

    .single-cocktail a {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .single-cocktail a span {
        position: absolute;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 2em;
        z-index: 2;
    }

    .single-cocktail img {
        width: 90%;
    }

    ul.no-bullets {
        padding-left: 0;
    }

    ul.no-bullets li {
        list-style-type: none;
        color: #FFF7C9;
    }

    ol {
        padding-left: 1em;
    }

    ol li {
        color: #FFF7C9;
        list-style-type: none;
    }

    p.footnote {
        font-size: 0.8em;
        font-style: italic;
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.prepare {
    opacity: 0;
}

a[data-fancybox] img {
    border: 1px solid #E5D082;
}

.page-cocktails a[data-fancybox] {
    display: block;
    text-align: center;
}


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " ("attr(href) ")";
    }

    abbr[title]:after {
        content: " ("attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }


}

.ot-sdk-show-settings {
    background: none;
    border: none;
    text-transform: uppercase;
    font-size: 10px;
    color: rgb(228, 206, 125);
    font-family: neutraface-text, sans-serif;
}