/* ================================================================== */

/* General */

/* ================================================================== */

@import url("reset.css");

* {
    box-sizing: border-box;
}


html {
    font-size: 16px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (max-width:1023px) and (min-width:769px) {
    html {
        font-size: 1.5vw;
    }
}

@media (min-width:1024px) {
    html {
        font-size: 18px;
    }
}

body {
    font-size: 1rem;
    line-height: 1.3;
    text-align: center;
    height: 100%;
    width: 100%;
    overflow: auto;
    overflow-x: hidden;
}

body.home {
    position: fixed;
    overflow: hidden;
}

body.hangdown-active {
    /* overflow-y: scroll; */
}

body.home #wrap {
    overflow: auto;
    overflow-x: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

main {
    opacity: 0;
    transition: opacity 750ms;
    padding-bottom: 8rem;
    margin: auto;
}

main.shown {
    opacity: 1;
}

@media (min-width:700px) {
    .mobile-image {
        display: none;
    }
}

.desktop-image {
    display: none;
}

@media (min-width:700px) {
    .desktop-image {
        display: block;
    }
}

@media (min-width:1024px) {
    body {
        font-size: .85rem;
    }
}

:root {
    --brand-color: #c48429;
}

a {
    color: #c48429;
    color: var(--brand-color);
}

img {
    width: 100%;
    height: auto;
    display: block;
}

main {
    z-index: 0;
    position: relative;
    text-align: left;
}

/* CONTAINER */

.container {
    position: relative;
    max-width: 1040px;
    margin: auto;
}

main .container {
    padding: 2rem;
}

@media (max-width: 768px) {
    .container {
        padding: 2rem 3rem;
    }

    .no-padding {
        padding: 0 !important;
    }
}

/* HEADER + FOOTER */

header:before,
header:after,
footer:before,
footer:after {
    content: "";
    display: block;
    clear: both;
}

/* HEADER */

header {
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .125);
    z-index: 2;
}

@media (min-width: 769px) {
    header {
        padding: 1rem;
    }
}

header .icon {
    float: left;
    width: 3%;
    margin-left: 1rem;
}

header .icon img {
    width: auto;
    height: 2.5rem;
    margin-top: .5rem;
}

header .branding {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    text-align: center;
}

header .branding img {
    width: auto;
    height: 2.25rem;
    display: inline-block;
    margin-top: 1rem;
}

@media (min-width: 769px) {
    header .branding img {
        margin-top: 2rem;
        height: 2.5rem;
    }
}

header .satellite {
    display: none;
}

.satellite-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #c48429;
    background: var(--brand-color);
    color: #fff;
    width: 100vw;
    padding: .25rem 1rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 2rem;
    gap: 2rem;

}

.satellite-mobile>a {
    font-family: EngraversGothic-Regular, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: lowercase;
    margin: 0;
    padding: .25rem;
    line-height: 1.2;
    letter-spacing: .3rem;
    font-size: 1rem;
    color: #fff !important;
    /* border: 1px rgba(255, 255, 255, .5) solid; */
    text-decoration: none;
}


@media (min-width: 1220px) {
    header .satellite {
        position: relative;
        display: block;
        width: 30%;
        float: right;
        background: transparent;
        color: inherit;
        padding: 0;
    }

    header nav.satellite>a {
        letter-spacing: 0;
        text-transform: none;
        font-family: inherit;
        color: #c48429 !important;
        color: var(--brand-color) !important;
    }

    .satellite-mobile {
        display: none;
    }
}

header .hamburger {
    width: 4rem;
    float: right;
    padding: 1rem
}

.mobile-hamburger a {
    display: block;
}

.mobile-hamburger a span {
    display: block;
    width: 2rem;
    height: 2px;
    background: #c48429;
    background: var(--brand-color);
    margin: 0 0 .59rem;
    opacity: 1;
    transition: .5s;
}


.hangdown-active .mobile-hamburger a span:nth-child(1) {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -ms-transform: rotate(45deg);
    -ms-transform-origin: top left;
}

.hangdown-active .mobile-hamburger a span:nth-child(2) {
    opacity: 0;
}

.hangdown-active .mobile-hamburger a span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
    -ms-transform: rotate(-45deg);
    -ms-transform-origin: bottom left;
}

.stripe ul {
    padding: 0;
    list-style-type: none;
}

/* NAV */

@media (min-width: 769px) {}



nav a,
#c7-cart {
    display: block;
    vertical-align: middle;
    text-decoration: none;
    padding: 1.125rem 1rem;
}

nav.satellite a,
#c7-cart {
    display: inline-block;
}

#c7-cart .c7-user-nav__cart>button {
    padding: 0;
}

.c7-account-login__options,
.c7-account-block--gift-card {
    display: none;
}



/* GRIDS */

@media (min-width: 769px) {
    div[class*="col-"] {
        margin: 0;
        position: relative;
    }

    div[class*="col-"]>div {
        float: left;
    }

    div[class*="col-"] div[class*="col-"] {
        margin: 0;
    }

    div[class*="col-"]:after {
        content: "";
        display: block;
        clear: both;
    }

    .col-2-wine>div {
        width: 50%;
    }

    .col-4>div {
        width: 25%;
    }

    .col-3>div {
        width: 33.33%;
        padding-bottom: 2rem;
    }

    .col-2>div:nth-child(1) {
        width: 40%;
        text-align: right;
        padding-right: 2rem;
    }

    .col-2>div:nth-child(2) {
        width: 60%;
        text-align: left;
    }

    .col-2>div:nth-child(2n+1) {
        clear: left;
    }

    .persons-listing .col-2>div:nth-child(2n+1),
    .persons-listing .col-2>div:nth-child(1n+1) {
        width: 50%;
        text-align: left;
        padding: 0 1rem 2rem 0;
    }

    .col-25-75>div:first-child {
        float: left;
        width: 25%
    }

    .col-25-75>div:last-child {
        float: right;
        width: 75%;
        margin-bottom: 1rem;

    }

    .col-20-80>div:first-child {
        float: left;
        width: 20%
    }

    .col-20-80>div:last-child {
        float: right;
        width: 77.5%;
    }
}

.col-20-80>div:last-child {
    padding-bottom: 2rem;
}

/* HEADING */

.heading {
    margin: 1rem 0 2rem;
    border-top: #c48429 solid 3px;
    border-top: var(--brand-color) solid 3px;
}

/* BUTTONS */

.button:before {
    content: " ";
    display: block;
    clear: both;
}

.button:after {
    content: "›";
    margin: 0 0 0 .5rem;
    font-size: 1.5rem;
}

.button {
    display: inline-block;
    margin: 2rem 0;
    padding: .75rem 1.5rem;
    color: #c48429;
    color: var(--brand-color);
    background: #fff;
    text-decoration: none;
    text-transform: uppercase;
    border: 10px #c48429 solid;
    border: 10px var(--brand-color) solid;
    font-family: EngraversGothic-Regular, sans-serif;
    font-size: 1.25rem;
    letter-spacing: .3rem;
}

.vs2x-box button {
    display: inline-block;
    margin: 1rem 1rem 1rem 0;
    padding: .25rem 1rem;
    color: #c48429;
    color: var(--brand-color);
    background: #fff;
    text-decoration: none;
    border: 1px #c48429 solid;
    border: 1px var(--brand-color) solid;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
}

.vs2x-box button:hover {
    background: #c48429;
    background: var(--brand-color);
    color: #fff;
}

/* SOCIAL LINKS */

.social-links {
    padding-bottom: 2rem;
}

.social-links img {
    width: auto;
    height: auto;
    margin: 0 .5rem;
}

@media (min-width: 321px) {
    .social-links img {
        margin: 0 1rem;
    }
}

.social-links span {
    display: none;
}

/* FOOTER */

footer {}

footer .links {}

footer .social-links {}


/* TYPOGRAPHY */

body, .serif {
    font-family: mrs-eaves, serif;
    font-weight: 400;
    font-style: normal;
    color: #545553;
}

.serif {
    letter-spacing: 0;
    text-transform: none;
    font-size: 16px;
}


h1,
.h1,
h2,
.h2,
h3,
.h3,
nav>a,
h2.c7-h2,
.c7-account-block__title,
h3.c7-h3 {
    font-family: EngraversGothic-Regular, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: lowercase;
    margin: 0;
    line-height: 1.2;
    letter-spacing: .3rem;
    font-size: 1rem;
    color: #545553 !important;
}

h1 {
    display: none;
}

.h1 {
    font-size: 4rem;
    color: #c48429;
    color: var(--brand-color);
}

h2 {
    margin-bottom: .5rem;
}

.person h2 {
    font-family: EngraversGothic-Bold, sans-serif;
}

h3 {
    margin-bottom: 1rem;
}


@media (max-width: 767px) {
    .h1 {
        font-size: 3rem;
    }
}

.all-caps {
    font-family: mrs-eaves-roman-all-small-ca, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .125rem;
}

nav.links ul a {
    font-family: mrs-eaves-roman-all-small-ca, sans-serif;
    font-weight: 400;
    font-style: normal;
}

nav.links ul a em {
    font-family: mrs-eaves, serif;
    letter-spacing: 0;
    display: block;
    text-transform: none;
}


p {
    margin: 0 0 1rem;
    line-height: 1.5;
}

em {
    font-style: italic;
}

/* VERTICAL CENTER */

.vertical-center {
    position: absolute;
    width: 100%;
    top: 30%;
    -webkit-transform: translateY(-30%);
            transform: translateY(-30%);
}

@media (min-width: 769px) {
    .vertical-center {
        top: 40%;
        -webkit-transform: translateY(-40%);
                transform: translateY(-40%);
    }
}

/* HANGDOWN */

.hangdown {
    text-align: left;
    position: relative;
    position: absolute;
    z-index: 1;
    /* margin-top: 4.125rem; */
    top: 0;
    right: 0;
    height: 100vh;
    overflow: scroll;
    background: transparent;
    max-width: 30rem;
    transition: .5s;
    -webkit-transform: translate(30rem, 4.125rem);
            transform: translate(30rem, 4.125rem);
    -ms-transform: translate(30rem, 4.125rem);
}

@media (min-width: 769px) {
    .hangdown {
        /* margin-top: 6.125rem; */
        -webkit-transform: translate(30rem, 6.125rem);
                transform: translate(30rem, 6.125rem);
        -ms-transform: translate(30rem, 6.125rem);

    }
}


.hangdown nav {
    background: #fff;
    padding: 2rem 3rem 6rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .125);

}

.hangdown-active .hangdown {
    -webkit-transform: translate(0, 4.125rem);
            transform: translate(0, 4.125rem);
    -ms-transform: translate(0, 4.125rem);
}

@media (min-width: 769px) {
    .hangdown-active .hangdown {
        /* margin-top: 6.125rem; */
        -webkit-transform: translate(0, 6.125rem);
                transform: translate(0, 6.125rem);
        -ms-transform: translate(0, 6.125rem);

    }
}

.hangdown nav.links a {
    color: inherit;
    display: block;
    padding: 1rem 0 1rem;

}

.hangdown nav.links ul {
    padding: 0 1rem 2rem;
    list-style-type: none;
}

.hangdown nav.links ul a {
    padding: 0 0 .75rem;
}

@media (min-width: 1220px) {
    .hangdown .satellite {
        display: none;
    }
}


/* BILLBOARD */

.billboard {
    width: 100vw;
    height: 100vh;
    position: relative;
    top: 0;
    left: 0;
}

.billboard .content {
    width: 100%;
    height: 100%;
    text-align: center;
}

.billboard .quote {
    padding: 0 3rem;
    /* max-width: 50rem; */
    width: 100%;
    margin: auto;
    text-align: center;
    transition: all 1250ms;
}

.billboard .quote.white {
    color: #fff;
}

@media (min-width: 769px) {
    .billboard .quote {
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .billboard .quote {
        font-size: 75%;
    }
}

.billboard .quote .larger {
    font-size: 1.5em;
}

@media (min-width: 769px) {
    .billboard .quote .larger {
        font-size: 1.5rem;
    }
}

.billboard .image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: none;
    background-size: cover;
}

.billboard .h1 {}

.billboard .button {}

.slick-next,
.slick-prev {
    position: absolute;
    bottom: 40%;
    left: -10000px;
    z-index: 1;
    text-indent: -20000rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background-image: url(/assets/img/arrow-left.png);
    background-size: cover;
    background-color: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: all 750ms;
}

.slick-next {
    left: auto;
    right: 44%;
    background-image: url(/assets/img/arrow-right.png);
}

@media (min-width:769px) {

    .slick-next,
    .slick-prev {
        opacity: 0;
    }

    .slick-next {
        right: 49%;
    }
}

#billboard:hover .slick-next,
#billboard:hover .slick-prev,
#billboard:hover .quote {
    opacity: 1;
}

/* MAP */

#map {
    height: 30rem;
}

.locations-list h2 {
    padding: 2rem;
}

.locations-list .col-3>div {
    padding-bottom: 2rem;
}

/* MODAL */

#modal_screen {
    background-image: url(/assets/img/home.1.jpg);
    background-size: cover;
    background-position: center center;
}

#modal_content {
    background: transparent;
    color: #fff;
    width: 250px;
}

#modal_content .logo {
    max-width: 250px;
    height: auto;
    margin-bottom: 2rem;
}

#modal_content_wrapper {
    background: #c48429;
    background: var(--brand-color);
    color: #fff;
    padding: 1rem;
}

#modal_content h3 {
    color: #fff !important;
}

#modal_content img {
    display: inline-block;
    height: 100px;
    width: auto;
}

#modal_content p {
    padding: 0 2rem;
}

#modal_content a {
    margin: 0;
}


.home header {
    position: relative;
    z-index: 2;
}

.home main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

#vs2-account-nav {
    padding: 1rem 0;
}

#vs2-account-nav div {
    display: inline-block;
    padding: 0 .25rem 0 0;
}

#vs2-accountLinks-cart {
    float: right;
}

.gray-border {
    border: solid 1px #999;
}

.tasting-notes h3 {
    margin-bottom: 0;
}

.years {
    position: relative;
    width: 7rem;
    padding-bottom: 1rem
}

.years .trigger,
.years .close {
    display: inline-block;
    padding: .15rem .5rem;
    border: 1px #545553 solid;
    color: #545553;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    cursor: pointer;
}

.years .close {
    right: 0;
    left: auto;
    display: none;
    border: 0;
    text-align: right;
}

.years .trigger:after {
    content: " ›"
}

.years .data {
    display: none;
}

.years.active {
    /**/
}

.years.active .data {
    display: block;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, .2);
    border: 1px #545553 solid;
    width: 7rem;
    padding: 1rem;
}

.years.active .trigger {
    display: none;
}

.years.active .close {
    display: block;
}

.prohibit-this main button {
    display: none;
}

.alert {
    display: none;
    margin: 1rem 1rem 1rem 0;
    padding: .5rem 1rem;
    color: #fff;
    background: #c48429;
    background: var(--brand-color);
    text-decoration: none;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
}

.prohibit-this .alert {
    display: block;
}


:root {
    --c7-page-width: 1300px;
    --c7-page-width-checkout: 1500px;
    --c7-font-family: "mrs-eaves", serif;
    --c7-body-text-color: #232324;
    --c7-alt-text-color: #50505a;
    --c7-font-size: 16px;
    --c7-font-size-sub: 14px;
    --c7-heading-font-family: var(--c7-font-family);
    --c7-heading-text-color: #000;
    --c7-heading-font-weight: bold;
    --c7-primary-color: var(--brand-color);
    --c7-primary-color-text: var(--brand-color);
    --c7-primary-color-dark: var(--brand-color);
    --c7-primary-color-focus: var(--brand-color);
    --c7-link-color: var(--c7-primary-color-text);
    --c7-bg: #fff;
    --c7-bg-alt: #f7f8fa;
    --c7-border-color: #e3e3e8;
    --c7-border-radius: 4px;
    --c7-loading-bg: hsla(0, 0%, 100%, .5);
    --c7-modal-border-radius: 8px;
    --c7-modal-shadow: 0 2px 20px 0 rgba(0, 0, 0, .1);
    --c7-overlay-bg: rgba(0, 0, 0, .1);
    --c7-progress-bar: var(--c7-primary-color);
    --c7-pill-bg: #f3f6ff;
    --c7-pill-text-color: var(--c7-primary-color-text);
    --c7-field-bg: #fff;
    --c7-field-border-radius: 4px;
    --c7-field-border-color: #b2b2b8;
    --c7-field-focus-color: rgba(0, 0, 0, .07);
    --c7-field-option-selected-color: var(--c7-primary-color);
    --c7-field-option-focus-color: var(--c7-primary-color-focus);
    --c7-field-placeholder: #b2b2b8;
    --c7-field-dropdown-shadow: 2px 2px 10px 0 rgb(0 0 0/8%);
    --c7-primary-button-bg: var(--c7-primary-color);
    --c7-primary-button-bg-hover: var(--c7-primary-color-dark);
    --c7-primary-button-text-color: #fff;
    --c7-alt-button-bg: #dedfe3;
    --c7-alt-button-bg-hover: #cecfd4;
    --c7-alt-button-text-color: #232324;
    --c7-button-border-radius: 4px;
    --c7-info-bg: #f1f1f4;
    --c7-error: #ca0505;
    --c7-error-bg: #ffebeb;
    --c7-warning: #fba213;
    --c7-warning-bg: #fff6e5;
    --c7-success: #016047;
    --c7-success-bg: #e8fcf7;
    --c7-header-text-color: #232324;
    --c7-notification: #ca0505;
    --c7-cart-count-bg: var(--c7-primary-color);
    --c7-cart-count-bg-focus: var(--c7-primary-color-focus);
    --c7-cart-count-text-color: #fff;
    --c7-side-cart-shadow: 0 0 15px 5px rgba(0, 0, 0, .1);
    --c7-dropdown-border-radius: 8px;
    --c7-dropdown-shadow: 0 1px 7px 0 rgba(0, 0, 0, .15);
    --c7-dropdown-hover: #e6e8ed;
    --c7-block-bg: var(--c7-bg);
    --c7-block-border-color: var(--c7-border-color);
    --c7-block-border-radius: var(--c7-border-radius);
    --c7-block-shadow: 0 1px 3px 0 hsla(240, 8%, 88%, .3)
}


input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: block;
    background: #fff;
    background: var(--c7-field-bg);
    border: 1px solid #b2b2b8;
    border: 1px solid var(--c7-field-border-color);
    border-radius: 4px;
    border-radius: var(--c7-field-border-radius);
    font-family: "mrs-eaves", serif;
    font-family: var(--c7-font-family);
    font-size: 16px;
    font-size: var(--c7-font-size);
    line-height: 1.4;
    height: 46px;
    padding: 11px 10px;
    width: 100%;
}

input[type="submit"],
input[type="button"],
.submit-button,
input[type="reset"] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
    display: inline-block;
    border: 0;
    border-radius: 4px;
    border-radius: var(--c7-button-border-radius);
    font-size: 16px;
    font-size: var(--c7-font-size);
    font-family: "mrs-eaves", serif;
    font-family: var(--c7-font-family);
    font-size: 16px;
    font-size: var(--c7-font-size);
    line-height: 1.5;
    min-height: 46px;
    padding: 11px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 0.1s ease-out;
    background-color: #c48429;
    color: white;
}

/* input[type="reset"] {
    cursor: pointer;
    display: block;
    border: none;
    background: none;
    text-align: center;
    margin-top: 16px;
    text-decoration: underline;
    text-decoration-color: rgba(black, 0.5);
} */

select {
    cursor: pointer;
    background-image: url('data:image/svg+xml; utf8, <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'),
        linear-gradient(#fff, #fff);
    background-image: url('data:image/svg+xml; utf8, <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'),
        linear-gradient(var(--c7-field-bg), var(--c7-field-bg));
    background-color: transparent;
    background-position: center right 8px;
    background-repeat: no-repeat, repeat;
    background-size: 17px;
    padding-right: 30px;
    color: #545553;
}

.no-access {
    display: none;
}

.wine-item,
.wine-amount {
    display: block;
    padding: 0 0 .5rem;
}

@media (min-width: 769px) {

    .wine-item {
        display: inline-block;
        width: 50%;
    }

    .wine-amount {
        display: inline-block;
        margin-left: 1rem;
        width: 25%;
    }

}

#wines>div {
    padding-bottom: 1rem;
}

.wine-amount .amt {
    margin-left: 1rem;
    width: 3.5rem;
    display: inline-block;
    height: 1rem;
}

/* .persons-listing, */
.wines-listing {
    margin-top: 3rem;
}

.persons-listing a,
.wines-listing a {
    text-decoration: none;
}

.persons-listing h2,
.wines-listing h2 {
    margin: 1rem 0 0 0;
}

.persons-listing h3 {
    margin: 0 0 2rem 0;
}

.wine {
    padding: 0 1rem 3rem 0;
}

@media (max-width: 768px) {
    .wine-details h2 {
        margin: 1rem 0 0 0;
    }
}