/*
Theme Name: Wine Diplomacy
Version: 1.0
Author: georgebadea.com
Author URI: https://georgebadea.com/
*/

@font-face {
    font-family: 'BebasNeue';
    src: url('assets/fonts/BebasNeue-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('assets/fonts/Satoshi-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
    font-style: normal;
}


/* 
 * 	Reset
-------------------------------------------------------------------------------*/

html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}

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

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

html,
body {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100%;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    /*overflow-x: clip;*/
}

img,
picture,
object,
embed {
    max-width: 100%;
    display: block;
}

b,
strong {
    font-weight: bolder;
}

ul,
ol {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    transition: all 0.3s ease;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

textarea:not([rows]) {
    min-height: 10em;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
}

th {
    font-weight: bolder;
    vertical-align: top;
}

td {
    font-weight: normal;
    vertical-align: top;
}

td,
td img {
    vertical-align: top;
}

:target {
    scroll-margin-block: 5ex;
}

::selection {
    text-shadow: none;
    background-color: var(--corten);
    color: var(--text-color-invert)
}

img {
    height: auto;
}

address {
    font-style: normal;
}

.is-clipped {
    overflow: hidden;
    touch-action: none;
    /* Prevents touch gestures like pull-to-refresh */
    -webkit-overflow-scrolling: none;
    /* Disables momentum scrolling on iOS */
}

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}


/* Flexbox Grid 
-------------------------------------------------------------------------------*/

.row {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: calc(var(--grid-gap) * -1);
    margin-left: calc(var(--grid-gap) * -1);
}

.row.reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.col.reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: var(--grid-gap);
    padding-left: var(--grid-gap);
}

.col-xs {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
}

.col-xs-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
}

.col-xs-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
}

.col-xs-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
}

.col-xs-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
}

.col-xs-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
}

.col-xs-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
}

.col-xs-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
}

.col-xs-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
}

.col-xs-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
}

.col-xs-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
}

.col-xs-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
}

.col-xs-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}

.col-xs-offset-0 {
    margin-left: 0;
}

.col-xs-offset-1 {
    margin-left: 8.33333333%;
}

.col-xs-offset-2 {
    margin-left: 16.66666667%;
}

.col-xs-offset-3 {
    margin-left: 25%;
}

.col-xs-offset-4 {
    margin-left: 33.33333333%;
}

.col-xs-offset-5 {
    margin-left: 41.66666667%;
}

.col-xs-offset-6 {
    margin-left: 50%;
}

.col-xs-offset-7 {
    margin-left: 58.33333333%;
}

.col-xs-offset-8 {
    margin-left: 66.66666667%;
}

.col-xs-offset-9 {
    margin-left: 75%;
}

.col-xs-offset-10 {
    margin-left: 83.33333333%;
}

.col-xs-offset-11 {
    margin-left: 91.66666667%;
}

.start-xs {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start;
}

.center-xs {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

.end-xs {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end;
}

.top-xs {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.middle-xs {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.bottom-xs {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.around-xs {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.between-xs {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.first-xs {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
}

.last-xs {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

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

    .col-sm,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-offset-0,
    .col-sm-offset-1,
    .col-sm-offset-2,
    .col-sm-offset-3,
    .col-sm-offset-4,
    .col-sm-offset-5,
    .col-sm-offset-6,
    .col-sm-offset-7,
    .col-sm-offset-8,
    .col-sm-offset-9,
    .col-sm-offset-10,
    .col-sm-offset-11,
    .col-sm-offset-12 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding-right: var(--grid-gap);
        padding-left: var(--grid-gap);
    }

    .col-sm {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }

    .col-sm-1 {
        -ms-flex-preferred-size: 8.33333333%;
        flex-basis: 8.33333333%;
        max-width: 8.33333333%;
    }

    .col-sm-2 {
        -ms-flex-preferred-size: 16.66666667%;
        flex-basis: 16.66666667%;
        max-width: 16.66666667%;
    }

    .col-sm-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }

    .col-sm-5 {
        -ms-flex-preferred-size: 41.66666667%;
        flex-basis: 41.66666667%;
        max-width: 41.66666667%;
    }

    .col-sm-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        -ms-flex-preferred-size: 58.33333333%;
        flex-basis: 58.33333333%;
        max-width: 58.33333333%;
    }

    .col-sm-8 {
        -ms-flex-preferred-size: 66.66666667%;
        flex-basis: 66.66666667%;
        max-width: 66.66666667%;
    }

    .col-sm-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        -ms-flex-preferred-size: 83.33333333%;
        flex-basis: 83.33333333%;
        max-width: 83.33333333%;
    }

    .col-sm-11 {
        -ms-flex-preferred-size: 91.66666667%;
        flex-basis: 91.66666667%;
        max-width: 91.66666667%;
    }

    .col-sm-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .col-sm-offset-0 {
        margin-left: 0;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .start-sm {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        text-align: start;
    }

    .center-sm {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .end-sm {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        text-align: end;
    }

    .top-sm {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .middle-sm {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .bottom-sm {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .around-sm {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    .between-sm {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .first-sm {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }

    .last-sm {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
}

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

    .col-md,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-offset-0,
    .col-md-offset-1,
    .col-md-offset-2,
    .col-md-offset-3,
    .col-md-offset-4,
    .col-md-offset-5,
    .col-md-offset-6,
    .col-md-offset-7,
    .col-md-offset-8,
    .col-md-offset-9,
    .col-md-offset-10,
    .col-md-offset-11,
    .col-md-offset-12 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding-right: var(--grid-gap);
        padding-left: var(--grid-gap);
    }

    .col-md {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }

    .col-md-1 {
        -ms-flex-preferred-size: 8.33333333%;
        flex-basis: 8.33333333%;
        max-width: 8.33333333%;
    }

    .col-md-2 {
        -ms-flex-preferred-size: 16.66666667%;
        flex-basis: 16.66666667%;
        max-width: 16.66666667%;
    }

    .col-md-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    .col-md-4 {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }

    .col-md-5 {
        -ms-flex-preferred-size: 41.66666667%;
        flex-basis: 41.66666667%;
        max-width: 41.66666667%;
    }

    .col-md-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-md-7 {
        -ms-flex-preferred-size: 58.33333333%;
        flex-basis: 58.33333333%;
        max-width: 58.33333333%;
    }

    .col-md-8 {
        -ms-flex-preferred-size: 66.66666667%;
        flex-basis: 66.66666667%;
        max-width: 66.66666667%;
    }

    .col-md-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .col-md-10 {
        -ms-flex-preferred-size: 83.33333333%;
        flex-basis: 83.33333333%;
        max-width: 83.33333333%;
    }

    .col-md-11 {
        -ms-flex-preferred-size: 91.66666667%;
        flex-basis: 91.66666667%;
        max-width: 91.66666667%;
    }

    .col-md-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .col-md-offset-0 {
        margin-left: 0;
    }

    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-md-offset-3 {
        margin-left: 25%;
    }

    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-md-offset-6 {
        margin-left: 50%;
    }

    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-md-offset-9 {
        margin-left: 75%;
    }

    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }

    .start-md {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        text-align: start;
    }

    .center-md {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .end-md {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        text-align: end;
    }

    .top-md {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .middle-md {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .bottom-md {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .around-md {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    .between-md {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .first-md {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }

    .last-md {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
}

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

    .col-lg,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-offset-0,
    .col-lg-offset-1,
    .col-lg-offset-2,
    .col-lg-offset-3,
    .col-lg-offset-4,
    .col-lg-offset-5,
    .col-lg-offset-6,
    .col-lg-offset-7,
    .col-lg-offset-8,
    .col-lg-offset-9,
    .col-lg-offset-10,
    .col-lg-offset-11,
    .col-lg-offset-12 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding-right: var(--grid-gap);
        padding-left: var(--grid-gap);
    }

    .col-lg {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }

    .col-lg-1 {
        -ms-flex-preferred-size: 8.33333333%;
        flex-basis: 8.33333333%;
        max-width: 8.33333333%;
    }

    .col-lg-2 {
        -ms-flex-preferred-size: 16.66666667%;
        flex-basis: 16.66666667%;
        max-width: 16.66666667%;
    }

    .col-lg-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }

    .col-lg-5 {
        -ms-flex-preferred-size: 41.66666667%;
        flex-basis: 41.66666667%;
        max-width: 41.66666667%;
    }

    .col-lg-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-lg-7 {
        -ms-flex-preferred-size: 58.33333333%;
        flex-basis: 58.33333333%;
        max-width: 58.33333333%;
    }

    .col-lg-8 {
        -ms-flex-preferred-size: 66.66666667%;
        flex-basis: 66.66666667%;
        max-width: 66.66666667%;
    }

    .col-lg-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .col-lg-10 {
        -ms-flex-preferred-size: 83.33333333%;
        flex-basis: 83.33333333%;
        max-width: 83.33333333%;
    }

    .col-lg-11 {
        -ms-flex-preferred-size: 91.66666667%;
        flex-basis: 91.66666667%;
        max-width: 91.66666667%;
    }

    .col-lg-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .col-lg-offset-0 {
        margin-left: 0;
    }

    .col-lg-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-lg-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-lg-offset-3 {
        margin-left: 25%;
    }

    .col-lg-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-lg-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-lg-offset-6 {
        margin-left: 50%;
    }

    .col-lg-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-lg-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-lg-offset-9 {
        margin-left: 75%;
    }

    .col-lg-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-lg-offset-11 {
        margin-left: 91.66666667%;
    }

    .start-lg {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        text-align: start;
    }

    .center-lg {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .end-lg {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        text-align: end;
    }

    .top-lg {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .middle-lg {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .bottom-lg {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .around-lg {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    .between-lg {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .first-lg {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }

    .last-lg {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
}

/* Variables
-------------------------------------------------------------------------------*/

:root {
    font-size: 62.5%;
    /* Colors */
    --granite: #1d1c1c;
    --corten: #7d402d;
    --oak: #A67B5B;
    --walnut: #38312C;
    --pinot-gris: #EBDFC8;
    --merlot: #5E1A28;
    /* Theme */
    --text-color: var(--pinot-gris);
    --text-color-invert: var(--granite);
    --light-border-color: rgba(255, 255, 255, 0.15);
    --dark-border-color: rgba(0, 0, 0, 0.2);
    /* Type */
    --font-family-primary: "Satoshi";
    --font-family-secondary: "BebasNeue";
    --font-weight-normal: 700;
    --font-weight-bold: 900;
    --font-size-s: 1.4rem;
    --font-size-m: 1.8rem;
    --font-size-l: 2.4rem;
    --font-size-xl: 4.8rem;
    --line-height: 1.3;
    /* Border */
    --border: 1px solid var(--light-border-color);
    --border-radius: 8px;
    /* Spacers */
    --spacer-xxs: 4px;
    --spacer-xs: 8px;
    --spacer-s: 16px;
    --spacer-m: 24px;
    --spacer-l: 32px;
    --spacer-xl: 48px;
    --spacer-xxl: 96px;
    --spacer-3xl: 216px;
    --grid-gap: 1.6rem;
    --offset: 4.8rem;
    /* Z-index */
    --zindex-cookie-notice: 1020;
    --zindex-mobile-nav: 1010;
    --zindex-header: 1000;
    --zindex-overlay: 900;
    /* Layout */
    --container: 2560px;
    /* Transition curves */
    --transition-easeInOutCirc: cubic-bezier(0.85, 0, 0.15, 1);
    --transition-easeInOutQuint: cubic-bezier(0.83, 0, 0.17, 1);
    --transition-easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
}

.winegrid {
    width: 100%;
    max-width: var(--container);
    padding: 0 calc(var(--offset) - var(--grid-gap));
    height: 100vh;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.winegrid .row {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.winegrid .col-xs {
    position: relative;
}

.winegrid.invert .col-xs:before, .winegrid.invert .col-xs:last-of-type:after {
    background-color: var(--dark-border-color);
}

.winegrid .col-xs:before {
    content: "";
    display: block;
    width: 1px;
    background: var(--light-border-color);
    height: 0;
    position: absolute;
    left: 0;
    bottom: 50%;
    animation-delay: .1s;
    animation-name: drawLines;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.winegrid .col-xs:nth-of-type(2):before {
    animation-delay: .2s;
}

.winegrid .col-xs:nth-of-type(3):before {
    animation-delay: .3s;
}

.winegrid .col-xs:nth-of-type(4):before {
    animation-delay: .4s;
}

.winegrid .col-xs:nth-of-type(5):before {
    animation-delay: .5s;
}

.winegrid .col-xs:nth-of-type(6):before {
    animation-delay: .6s;
}

.winegrid .col-xs:last-of-type:after {
    content: "";
    display: block;
    width: 1px;
    background: var(--light-border-color);
    height: 0;
    position: absolute;
    right: 0;
    bottom: 50%;
    animation-delay: 1.3s;
    animation-name: drawLines;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes drawLines {
    0% {
        height: 0px;
        bottom: 50%;
    }

    100% {
        height: 100%;
        bottom: 0;
    }
}


/* Layout
-------------------------------------------------------------------------------*/

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-m);
    line-height: var(--line-height);
    font-weight: var(--font-weight-normal);
    font-style: normal;
}

.wrapper {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    z-index: 1;
    position: relative;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--offset);
    position: relative;
}

.main {
    flex: 1;
}

section {
    position: relative;
    padding: var(--spacer-3xl) 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.zebra-section {
    min-height: auto;
    padding: var(--spacer-m) 0;
}

.zebra-section .winegrid {
    position: absolute;
    height: 100%;
}

.granite {
    background-color: var(--granite);
    color: var(--text-color);
}

.oak {
    background: var(--oak);
    color: var(--text-color);
}

.walnut {
    background: var(--walnut);
    color: var(--text-color);
}

.corten {
    background-color: var(--corten);
    color: var(--text-color);
}

.pinot-gris, .button-icon.pinot-gris {
    background: var(--pinot-gris);
    color: var(--text-color-invert);
}

.merlot {
    background-color: var(--merlot);
    color: var(--text-color);
}

.sticky {
    position: sticky;
    top: var(--spacer-m);
}

/* wine */

@keyframes noise {
    0% {
        background-position: top 0 right 50%;
        background-position-x: 0;
        background-position-y: 50%;
    }

    100% {
        background-position: top 50% right 100%;
        background-position-x: 50%;
        background-position-y: 0%;
    }
}

@keyframes shape {
    0% {
        border-radius: 8% 26% 39% 13%;
    }

    30% {
        border-radius: 19% 45% 50% 22%;
    }

    50% {
        border-radius: 47% 22% 26% 42%;
    }

    100% {
        border-radius: 25% 13% 40% 24%;
    }
}

@keyframes shape-alt {
    0% {
        border-radius: 50% 25% 10% 20%;
    }

    20% {
        border-radius: 20% 30% 40% 5%;
    }

    60% {
        border-radius: 35% 15% 50% 20%;
    }

    100% {
        border-radius: 10% 40% 20% 50%;
    }
}


.illustration {
    background-image: url("assets/img/noise-accent.jpg");
    background-repeat: repeat;
    background-size: 150px;
    animation-name: noise;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(10);
}

.illustration figure {
    overflow: hidden;
    animation-name: shape;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: alternate-reverse;
    animation-timing-function: linear;
}

.illustration.shape-alt figure {
    animation-name: shape-alt;
    animation-duration: 15s;
}

.hero-visual video, .hero-visual img {
    width: 100%;
    max-height: 110vh;
    object-fit: cover;
    display: block;
    margin: 0;
}

/* palette */

.palette {
    width: 100%;
    margin-bottom: var(--spacer-s);
}

.palette span {
    display: block;
    width: 100%;
    height: 14px;
}

.palette .granite {
    border: var(--border);
    border-right: 0;
}

/* Typography
-------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    font-weight: inherit;
    font-size: inherit;
}

h2 {
    font-family: var(--font-family-secondary);
    font-weight: 400;
    font-size: var(--font-size-xl);
    line-height: 1;
    text-transform: uppercase;
    padding: 4px 0 2px 0;
    margin-bottom: var(--spacer-xs);
}

h3 {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-s);
}

/* Links
-------------------------------------------------------------------------------*/

a {
    color: inherit;
    text-decoration: none;
}

a:not(.button, .icon-button, .logo, .logo-alt, .address) {
    border-bottom: 1px solid var(--light-border-color);
    transition: border-bottom-color 0.2s;
}

a:not(.button, .icon-button, .logo, .logo-alt, .address):hover {
    border-bottom-color: var(--pinot-gris);
}

.button-group {
    display: flex;
    gap: var(--spacer-s);
}

.button {
    border: var(--border);
    padding: var(--spacer-xs) var(--spacer-m);
    border-radius: 48px;
    display: inline-block;
    width: auto;
    overflow: clip;
    position: relative;
    color: transparent;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
}

.button.solid {
    border: 0;
}

.button::before,
.button::after {
    content: attr(data-text);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
    color: var(--text-color);
}

.button::before {
    top: 0;
    transform: translateX(-50%) translateY(0);
}

.button::after {
    top: 100%;
    transform: translateX(-50%) translateY(0);
}

.button:hover::before {
    transform: translateX(-50%) translateY(-100%);
}

.button:hover::after {
    transform: translateX(-50%) translateY(-100%);
}

.button.pinot-gris:before, .button.pinot-gris:after {
    color: var(--text-color-invert);
}

.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacer-xs);
    border: var(--border);
    padding: var(--spacer-xs) var(--spacer-m);
    border-radius: 48px;
    width: auto;
    overflow: clip;
    position: relative;
    color: transparent;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
}

.button-icon span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    background: var(--granite);
    border-radius: 50%;
    padding: 4px;
    color: var(--text-color);
}

.button-icon svg {
    fill: currentColor;
}

.button.invert {
    border-color: var(--dark-border-color);
}

.button.invert:before,
.button.invert:after {
    color: var(--text-color-invert);
}

/* Header
-------------------------------------------------------------------------------*/

.header {
    padding: var(--spacer-s) 0 var(--spacer-xxl) 0;
    font-size: var(--font-size-s);
    position: sticky;
    top: 0;
    opacity: 1;
    transition: visibility .25s ease, opacity .25s ease;
}

.header.hide {
    visibility: hidden;
    opacity: 0;
}

.nav {
    font-family: var(--font-family-secondary);
    font-weight: 400;
    text-transform: uppercase;
    font-size: var(--font-size-l);
    text-align: right;
}

.nav li {
    width: 100%;
}

.nav a, .nav .reservation {
    display: inline-block;
    border-bottom: none;
    position: relative;
    transition: color .3s ease;
}

.nav .reservation {
    cursor: pointer;
}

.nav a:before, .nav .reservation:before {
    content: "";
    display: block;
    position: absolute;
    left: -20px;
    background-color: var(--oak);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    top: 8px;
    transition: opacity .3s ease;
    opacity: 0;
}

.nav a:hover, .nav .reservation:hover {
    color: var(--oak);
}

.nav a:hover:before, .nav .reservation:hover:before {
    opacity: 1;
}

.logo {
    display: inline-block;
    height: 72px;
    margin-bottom: var(--spacer-xl);
}

.logo svg {
    fill: currentColor;
    width: auto;
    height: 100%;
}

.header-group {
    margin-bottom: var(--spacer-m);
}

.header-group:last-of-type {
    margin-bottom: 0;
}

.header-title {
    border-top: var(--border);
    border-bottom: var(--border);
    margin-bottom: var(--spacer-xs);
    line-height: 1;
    padding: 4px 0 2px 0;
    font-weight: var(--font-weight-bold);
}

.header-group span {
    display: block;
}

.icon-button {
    position: relative;
    cursor: pointer;
    border: var(--border);
    padding: var(--spacer-xs) var(--spacer-m);
    border-radius: 48px;
    display: inline-flex;
    width: auto;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
    transition: border-color .3s ease;
}

.icon-button:hover {
    border-color: rgba(255, 255, 255, 0.35);
}

.icon-button::before {
    content: 'Tooltip';
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacer-xxs) var(--spacer-xs);
    background: var(--pinot-gris);
    color: var(--granite);
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.icon-button:hover::before {
    opacity: 1;
    visibility: visible;
}

.header-button:before {
    content: 'Reservations';

}

.hamburger, .close-menu {
    display: none;
}

/* mobile nav */
@media (max-width: 1023px) {
    .hamburger {
        display: block;
        position: absolute;
        z-index: 1;
        right: var(--offset);
        top: var(--offset);
        cursor: pointer;
    }

    .nav-container {
        visibility: hidden;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100dvh;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(29, 28, 28, 0.975);
        z-index: 99999;
        opacity: 0;
        transition: visibility .75s ease, opacity .75s ease;
    }

    .nav {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: var(--font-size-xl);
        transform: translateY(75px);
        opacity: 0;
        visibility: hidden;
        transition: transform .75s var(--transition-easeInOutQuint), opacity .75s, visibility .75s;

    }

    .mobile-menu-open .nav {
        transform: translateY(0);
        visibility: visible;
        opacity: 1;

    }

    .mobile-menu-open .nav-container {
        visibility: visible;
        opacity: 1;
    }

    .mobile-menu-open .fixed-logo {
        opacity: 0;
        visibility: hidden;
    }

    .close-menu {
        display: block;
        cursor: pointer;
        position: absolute;
        right: var(--offset);
        top: var(--spacer-l);
    }
}

/* fixed logo */
.fixed-logo {
    position: fixed;
    width: 96px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    mix-blend-mode: difference;
    color: #fff;
    opacity: 1;
    transition: opacity 0.5s ease, visibility .3s ease;

}

.fixed-logo svg {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
}

.fixed-logo.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* reservation modal */

.reservation-modal {
    display: flex;
    min-height: 480px;
    border-radius: 0 0 280px 280px;
    width: 560px;
    flex-direction: column;
    text-align: center;
    align-items: center;
    position: fixed;
    z-index: 9999;
    padding: var(--spacer-xxl) var(--spacer-xxl) calc(var(--spacer-xxl) * 1.25) var(--spacer-xxl);
    top: 50%;
    left: 50%;
    transform: translate(-50%, 75%);
    opacity: 0;
    visibility: hidden;
    transition: transform .75s var(--transition-easeInOutQuint), opacity .75s, visibility .75s;
}

.reservations-open .reservation-modal {
    transform: translate(-50%, -50%);
    visibility: visible;
    opacity: 1;

}

.overlay {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"), auto;
    position: fixed;
    z-index: 9998;
    width: 100%;
    height: 100dvh;
    left: 0;
    top: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: visibility .75s, opacity .75s;
}

.reservations-open .overlay {
    visibility: visible;
    opacity: .95;
}

.reservation-modal ul {
    margin: var(--spacer-s) 0;
}

.reservation-modal a {
    display: inline-block;
    margin: 2px 0;
    border-color: var(--dark-border-color);
    color: var(--corten);
}

.reservation-modal a:hover {
    border-color: var(--corten);
}

/* Footer
-------------------------------------------------------------------------------*/
.rack {
    height: 240px;
    margin-top: var(--spacer-xl);
    position: relative;
    width: 100%;
    background: var(--granite);
    max-width: var(--container);
    padding: 0 calc(var(--offset) - var(--grid-gap));
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.rack-horizontal {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.rack-horizontal span {
    width: 100%;
    height: 1px;
    background-color: var(--light-border-color);
    display: block;
}

.rack .row {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.rack .row:after {
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background: var(--light-border-color);
    position: absolute;
    right: 0;

}

.rack .col-xs {
    position: relative;
    padding: 0;
}


.rack .col-xs:before {
    content: "";
    display: block;
    width: 1px;
    background: var(--light-border-color);
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.rack-column {
    width: 33.33%;
    height: 100%;
    border-left: var(--border);
    border-right: var(--border);
    margin: 0 auto;
}

.footer {
    display: flex;
    flex-direction: column;
}

.footer .container {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.footer-brand {
    text-align: center;
    padding: var(--spacer-3xl) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.footer-brand p {
    font-size: var(--font-size-xl);
    line-height: 1;
    font-family: var(--font-family-secondary);
    font-weight: 400;
    text-transform: uppercase;

}

.to-top {
    background: var(--granite);
    border-radius: 50%;
    width: 54px;
    height: 54px;
    border: 1px solid var(--light-border-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--light-border-color);
    margin-top: var(--spacer-l);
    transition: all .3s ease;
    cursor: pointer;
    position: relative;
    top: 0;
}

.to-top:hover {
    top: -4px;
    box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.25);
}

.bottom-footer {
    border-top: 16px solid var(--text-color);
    padding: var(--spacer-s) 0;
    font-size: var(--font-size-s);
}

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

.footer-widget {
    padding: var(--spacer-l) 0;
    height: 100%;
    border-top: var(--border);
    font-size: var(--font-size-s);
}

.footer-widget p {
    max-width: 270px;
}

.footer-widget h3 {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-s);
    margin-bottom: var(--spacer-xs);
}

.footer-widget p {
    margin-bottom: var(--spacer-xs);
}

.contact-links a {
    margin-bottom: var(--spacer-xxs);
    display: inline-block;
}

.social-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--spacer-m);
    row-gap: var(--spacer-xxs);
}

a.icon-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    gap: var(--spacer-xs);
    border-bottom: none;
    padding: 4px 0;
    line-height: 1;
}

a.icon-link span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: var(--text-color);
    border-radius: 50%;
    padding: 4px;
    color: var(--granite);
}

.footer-widget .logo-alt {
    height: 96px;
    display: block;
}

.footer-contact {
    display: flex;
    gap: var(--spacer-l);
    justify-content: flex-start;
    align-items: flex-start;
}

.logo-alt svg {
    height: 100%;
    width: auto;
    fill: currentColor;
}

.menu-footer {
    display: inline-flex;
    margin-left: var(--spacer-m);
    position: relative;
    gap: var(--spacer-m);
}

.menu-footer li {
    position: relative;
}

.menu-footer li:before {
    display: block;
    content: "";
    position: absolute;
    left: -15px;
    top: 5px;
    width: 6px;
    height: 6px;
    background-color: var(--walnut);
}

/* Sections 
-------------------------------------------------------------------------------*/
.announcement {
    position: relative;
}

.announcement.pinot-gris:hover {
    background-color: var(--merlot);
    color: var(--text-color);
}

.announcement:hover .marquee-event li::after {
    background-color: var(--text-color);
}

.announcement .winegrid {
    height: 100%;
    position: absolute;
}

.announcement p {
    font-family: var(--font-family-secondary);
    font-weight: 400;
    text-transform: uppercase;
    font-size: var(--font-size-l);
    display: block;
    margin: 0;
}

.hero-container {
    display: flex;
}

.hero-container>* {
    width: 50%;
}

.hero {
    padding: var(--spacer-xxl);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    background-image: url("assets/img/noise.jpg");
    background-repeat: repeat;
    background-size: 150px;
    animation-name: noise;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(10);
}

.hero h1 {
    font-family: var(--font-family-secondary);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacer-xs);
    text-wrap: balance;
    text-wrap: pretty;
}

.hero-cite {
    display: block;
    font-style: normal;
    font-size: var(--font-size-s);
    color: var(--oak);
    margin-bottom: var(--spacer-l);
}

/* wineries marquee */


@keyframes scrollMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.marquee {
    display: flex;
    user-select: none;
}

.marquee-ul {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;
    animation: scrollMarquee 90s linear infinite;
}

.marquee.reverse .marquee-ul {
    margin-top: 8px;
}

.marquee.reverse .marquee-ul {
    animation-direction: reverse;
}

.marquee-logos.static {
    animation: none;
    justify-content: center;
    width: 100%;
}

.marquee-event li {
    padding: 4px 0;
    margin-right: var(--spacer-xl);
    flex-shrink: 0;
    position: relative;
}

.marquee-event li:after {
    content: "";
    display: block;
    position: absolute;
    right: -32px;
    top: 12px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background-color: var(--merlot);
}

.marquee-logos li {
    background-color: #f4efe7;
    padding: 32px 48px;
    border-radius: var(--border-radius);
    margin-right: 8px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.marquee-logos li::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: rgba(220, 204, 176, 0.15);
    border-radius: inherit;
    pointer-events: none;
}

.marquee-logos img {
    max-width: 100%;
    max-height: 6.4rem;
    object-fit: contain;
    filter: grayscale(1);
    mix-blend-mode: darken;
    position: relative;
    z-index: 1;
}

.logos-container {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: auto;
    align-items: center;
}

.split-section .winegrid {
    position: absolute;
    height: 100%;
}

.features {
    padding: var(--spacer-xl) 0;
    text-align: center;
    height: 100%;
    border-top: var(--border);
    border-bottom: var(--border);
}

.features .illustration {
    background-image: url("assets/img/noise.jpg");
    margin-bottom: var(--spacer-l);
}

.feature {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.feature p {
    max-width: 640px;
    margin-bottom: var(--spacer-s);
}

.feature p:last-child {
    margin-bottom: 0;
}

.why-us {
    position: relative;
    background-image: url("assets/img/noise.jpg");
    background-repeat: repeat;
    background-size: 150px;
    animation-name: noise;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(10);
}

.why-us h2 {
    font-family: var(--font-family-primary);
    text-transform: none;
    margin-bottom: var(--spacer-s);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

.why-us .why-us-copy-box {
    background-image: url("assets/img/noise-accent.jpg");
    background-color: var(--corten);
    background-repeat: repeat;
    background-size: 150px;
    animation-name: noise;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(10);
    padding: var(--spacer-xl);
    position: absolute;
    bottom: 0;
    width: calc(50% - 1rem);
    right: 0;
}

.why-us ul {
    margin-bottom: var(--spacer-s);
}

.why-us ul li {
    border-bottom: var(--border);
    padding: 2px 0;
}

.why-us-copy-box p {
    max-width: 800px;
}

.why-us-copy-box .button {
    margin-top: var(--spacer-l);
}

.about {
    max-width: 1120px;
}

.about .button {
    margin-top: var(--spacer-xl);
}

.about.flow h2 {
    margin-block-start: 0;
}

hr {
    width: 100%;
    background: transparent;
    border: 0;
    border-top: var(--border);
    margin-bottom: var(--spacer-l);
    margin-top: var(--spacer-l);
}

.text-indent {
    text-indent: 60px;
}

.about h3 {
    font-size: var(--font-size-m);
}

.about p:first-of-type {
    font-size: var(--font-size-l);
}

.about ul li {
    position: relative;
    padding-left: var(--spacer-m);
    margin-bottom: var(--spacer-xs);
}

.about ul li:last-child {
    margin-bottom: 0;
}

.about ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--oak);
}

.location-section {
    border-bottom: var(--border);
}

.about-location-item {
    background: var(--walnut);
    padding: var(--spacer-s);
    height: 100%;
    text-wrap: balance;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: var(--spacer-xl);
    justify-content: space-between;
}

.about-location-item h3 {
    margin-bottom: var(--spacer-xxs);
    color: var(--oak);
    letter-spacing: 0.5px;
}

/* Events
-------------------------------------------------------------------------------*/
section.events {
    padding-top: var(--spacer-3xl);
    padding-bottom: var(--spacer-3xl);
}

.events-header {
    margin-bottom: var(--spacer-xl);
    max-width: 800px;
}

.events-header h2 {
    max-width: 600px;
}

.event {
    padding: var(--spacer-xl);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.swiper-slide .event {
    height: 100%;
}

.event-header {
    margin-bottom: var(--spacer-xxl);
}

.event-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacer-m);
}

.event h3 {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
}

.swiper-events .event h3 {
    max-width: 560px;
}

.event-time {
    opacity: .7;
    font-weight: var(--font-weight-bold);
    display: flex;
    margin-bottom: var(--spacer-xs);
    gap: var(--spacer-xs);
    align-items: center;
}

.event-time span {
    position: relative;
}

.event-time svg {
    top: 1px;
    position: relative;
}

.events .swiper-events .swiper-slide:nth-of-type(1) .event.corten {
    background-color: #32231b;
}

.events .swiper-events .swiper-slide:nth-of-type(3) .event.corten {
    background-color: #320e03;
}

.events .swiper-events .swiper-slide:nth-of-type(4) .event.corten {
    background-color: #32231b;
}

.events .swiper-events .swiper-slide:nth-of-type(6) .event.corten {
    background-color: #320e03;
}

/* Swiper */

.swiper-container {
    overflow-x: hidden;
}

.swiper-slide {
    height: auto;
}

.events-slider-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacer-s);
}

.slider-nav {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.swiper-button-next,
.swiper-button-prev {
    cursor: pointer;
    color: var(--text-color-invert);
    background-color: var(--corten);
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    right: auto;
    top: auto;
    margin: 0 0 0 var(--spacer-xs);
    height: 36px;
    width: 64px;
    left: auto;
    border-radius: 20px;
}

.swiper-button-next svg,
.swiper-button-prev svg {
    fill: none;
    width: auto;
    height: auto;
    color: var(--text-color);
}

/* Archive
-------------------------------------------------------------------------------*/
.archive-header {
    max-width: 640px;
    margin-bottom: var(--spacer-l);
}

.archive-header p {
    margin-bottom: var(--spacer-l);
}

.archive .event, .search-results .event {
    margin-bottom: var(--spacer-l);
}

/* Events archive
-------------------------------------------------------------------------------*/

.event.pinot-gris a {
    border-bottom-color: var(--dark-border-color);
}

.event.pinot-gris a:hover {
    border-bottom-color: var(--granite);
}



.pagination .nav-links {
    display: flex;
    gap: var(--spacer-s);
}


/* Events Single
-------------------------------------------------------------------------------*/
.events-single-nav {
    margin-bottom: var(--spacer-l);
}

.back-button::before {
    content: 'Events';
}

.article h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacer-m);
}

.article h2 {
    line-height: var(--line-height);
}

.article .event-time {
    margin-bottom: var(--spacer-s);
}

.article-footer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--grid-gap);
    align-items: start;
    margin-top: var(--spacer-xxl);
    background-image: url("assets/img/noise-accent.jpg");
    background-color: var(--corten);
    background-repeat: repeat;
    background-size: 150px;
    animation-name: noise;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(10);
}

.article .article-footer h2 {
    margin-bottom: var(--spacer-xs);
}

.article-footer-copy {
    padding: var(--spacer-xl);
}

.article-footer p {
    margin-bottom: var(--spacer-m);
}

.article-footer-links {
    display: flex;
    gap: var(--spacer-l);
}

.article-footer figure {
    aspect-ratio: 3/4;
    margin: 0;
    overflow: hidden;
}

.article-footer img,
.article-footer video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* article content styling */

.flow>*+* {
    margin-block-start: var(--spacer-s);
}

.flow :is(h2, h3, h4) {
    margin-block-start: var(--spacer-l);
}

.article .flow {
    min-height: 40vh;
}

.article b,
.article strong,
.article em {
    font-weight: var(--font-weight-bold);
    font-style: normal;
}

.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
    font-family: var(--font-family-primary);
    margin-bottom: 0;
    font-weight: var(--font-weight-normal);
    text-transform: none;
    font-size: var(--font-size-l);
}

.wp-caption-text {
    color: var(--light-text);
    padding-right: 30%;
}

.article blockquote {
    background: none;
    padding: var(--spacer-l) 0;
    border-top: var(--border);
    border-bottom: var(--border);
}

.article blockquote p {
    max-width: 100% !important;
    font-size: var(--font-size-l);
}

.article blockquote cite {
    padding-top: var(--spacer-m);
    display: block;
    font-size: var(--font-size-m);
}

.article cite {
    position: relative;
    font-style: normal;
}

.article cite a {
    border-bottom: none !important;
}

.article ul {
    list-style: none;
}

.article ul li {
    margin-bottom: var(--spacer-xs);
}

.article ul li:last-child {
    margin-bottom: 0;
}

.article ul li:before {
    content: "•";
    color: var(--text-color-light);
    margin-right: var(--spacer-m);
    display: inline-block;
}

.article ol {
    list-style-type: none;
    padding: 0 0 0 34px;
    counter-reset: li-counter;
}

.article ol>li {
    position: relative;
    margin-bottom: var(--spacer-xs);
    padding-left: var(--spacer-s);
    border-left: var(--border);
}

.article ol>li:before {
    position: absolute;
    top: 0;
    left: -35px;
    text-align: right;
    color: var(--text-color-light);
    content: counter(li-counter);
    counter-increment: li-counter;
    width: 18px;
}

img.alignright {
    float: right;
    margin: 0 0 1em 1em;
}

img.alignleft {
    float: left;
    margin: 0 1em 1em 0;
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {

    /*rtl:ignore*/
    float: left;

    /*rtl:ignore*/
    margin-right: 1.5em;
}

.alignright {

    /*rtl:ignore*/
    float: right;

    /*rtl:ignore*/
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 404
-------------------------------------------------------------------------------*/
.not-found {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    flex-direction: column;
}

.not-found h1 {
    margin-bottom: var(--spacer-l);
}

.not-found h1 span {
    font-size: 19.6rem;
    line-height: 1;
    display: block;
    font-family: var(--font-family-secondary);
    font-weight: 400;
    margin-bottom: var(--spacer-xxs);
}

/* Responsive
-------------------------------------------------------------------------------*/

/* laptop */
@media (min-width: 1920px) {
    .hero h1 {
        font-size: 6.4rem;
    }
}

@media (max-width: 1440px) {
    :root {
        --font-size-l: 2.4rem
    }

    .hero {
        padding: var(--spacer-xl);
    }

    .article-footer figure {
        aspect-ratio: 5/7;
    }

    .article-footer-copy {
        padding: var(--spacer-l);
    }
}

/* small laptop */
@media (max-width: 1199px) {
    :root {
        --grid-gap: 0.8rem;
        --offset: 2.4rem;
    }

    .why-us .why-us-copy-box {
        padding: var(--spacer-l);
    }

    .why-us-copy-box .button {
        margin-top: var(--spacer-l);
    }
}

/* tablet */
@media (max-width: 1023px) {
    .header {
        padding-bottom: var(--spacer-m);
        position: relative;
    }

    .header.hide {
        visibility: initial;
    }

    .nav a:before, .nav .reservation:before {
        left: -24px;
        top: 24px;
    }

    .header-group {
        margin-bottom: 0;
        background: var(--granite);
        border-bottom: none;
        padding-bottom: var(--spacer-xs);
    }

    .header-group:last-of-type {
        border-bottom: var(--border);
    }

    .header-title {
        border-bottom: none;
        padding-top: var(--spacer-xs);
    }

    .header .contact-links a {
        border: none;
        margin-bottom: 0;
    }

    .events-slider-nav {
        justify-content: space-between;
        margin-bottom: var(--spacer-m);
    }

    .events-single-nav {
        justify-content: space-between;
    }

    .hero-container {
        flex-direction: column;
    }

    .hero-container>* {
        width: 100%;
    }

    .why-us .why-us-copy-box {
        position: relative;
        width: 100%;
        margin-left: var(--grid-gap);
        margin-right: var(--grid-gap);
    }


    .why-us .framed {
        padding: var(--spacer-xl);
    }

    .rack {
        height: 180px;
    }

    .page-template-page-legal article.article {
        margin-bottom: var(--spacer-xxl);
    }

}

/* phone */
@media (max-width: 767px) {
    :root {
        --offset: 1.6rem;
        --font-size-s: 1.2rem;
        --font-size-m: 1.6rem;
        --font-size-l: 2.0rem;
        --font-size-xl: 3.2rem;
        --spacer-3xl: 128px;
    }

    .nav a:before, .nav .reservation:before {
        top: 13px;
    }

    .hero-visual video, .hero-visual img {
        max-height: 80vh;
    }

    .text-indent {
        text-indent: 40px;
    }

    .about-location-grid {
        grid-template-columns: 1fr;
    }

    .winegrid .row .col-xs:nth-child(2), .winegrid .row .col-xs:nth-child(4) {
        display: none;
    }

    .palette span {
        height: 8px;
    }

    .reservation-modal {
        width: 359px;
        padding: var(--spacer-xl) var(--spacer-xl) calc(var(--spacer-xl) * 1.25) var(--spacer-xl);
    }

    .button-group {
        gap: var(--spacer-xs);
    }

    .logo {
        height: 64px;
    }

    .fixed-logo {
        width: 64px;
    }

    .footer-contact {
        flex-direction: row-reverse;
        width: 100%;
        justify-content: space-between;
        max-width: none;
    }

    .footer-widget {
        padding: var(--spacer-m) 0;
    }

    .bottom-footer, .bottom-footer .right {
        text-align: center;
    }

    .bottom-footer .right {
        padding: var(--spacer-xs) 0;
    }

    .footer-widget .logo-alt {
        height: 88px;
    }

    .article-footer {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: var(--spacer-l);
    }

    .icon-button::before {
        display: none;
    }

    #about .illustration {
        margin-bottom: var(--spacer-l);
    }

    .event {
        padding: var(--spacer-l);
    }

    .rack {
        height: 100px;
    }

    .marquee-event li::after {
        top: 11px;
        width: 12px;
        height: 12px;
    }

    .split-section .container .row .col-xs-12:first-child .features {
        border-bottom: 0;
    }

    .marquee-logos li {
        padding: 16px 24px;
    }

    .marquee-logos img {
        max-height: 32px;
    }

    .why-us ul li {
        padding: 4px 0;
    }

    .about-intro .col-xs-12:nth-child(2) {
        margin: var(--spacer-xs) 0;
    }

    .article-footer figure {
        aspect-ratio: 3/4;
    }

    .article-footer-copy {
        padding: var(--spacer-m);
    }

}