/* Styling of the Mailchimp embedded form */
#mc_embed_shell {
    grid-area: 4 / 2 / 5 / 5;
    place-self: center;
    height: fit-content;
    width: 60%;
    margin: 5%;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 600px) {
    #mc_embed_shell {
        width: 90%;
    }
}

#mc_embed_shell h2 {
    padding-bottom: 50px;
}

#mc_embed_shell .indicates-required {
    padding-left: 5%;
    font-size: 10px;
}

#mc_embed_shell .mc-field-group.input-group {
    display: flex;
    flex-direction: column;
}

#mc_embed_shell .mc-field-group.input-group ul {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    list-style: none;
}

#mc_embed_shell .mc-field-group.input-group ul li {
    padding-top: 5px;
    padding-bottom: 5px;
}

#mc_embed_shell .mc-field-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 0 5px;
}

#mc_embed_shell .mc-field-group input {
    font-family: var(--Alverata);
    flex-grow: 3;
    margin-left: 25px;
    padding: 0 5px;
    height: 15px;
    background-color: var(--brand-third);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom: 1px solid var(--brand-main);
}

#mc_embed_shell .mc-field-group input:focus,
#mc_embed_shell .mc-field-group input:focus-visible {
    @keyframes selector {
        0% {
            border-left-color: #620a1600;
            border-right-color: #620a1600;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        100% {
            border-left-color: #620a16ff;
            border-right-color: #620a16ff;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    }
    animation: .5s ease-in-out 0s 1 both selector;
    outline: none;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#mc_embed_shell #mc-embedded-subscribe {
    cursor: pointer;
    position: relative;
    height: 50px;
    width: min(75%, 250px);
    display: block;
    margin: 25px auto;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color: var(--brand-main);
    color: var(--brand-third);
    font-family: var(--Alverata);
    font-size: 1rem;
    text-align: center;
    border-radius: var(--border-rad);
    border-style: none;
}#content-container {
      grid-template-rows: 100vh minmax(950px, min-content) 275vh 70vh;
      row-gap: 10vh;
      margin-left: auto;
      margin-right: auto;
    }

    @media screen and (max-width: 600px) {
      #content-container {
        width: 100vw;
        grid-template-rows: 100vh minmax(120vh, max-content) minmax(370vh, max-content) 90vh;
        display: grid;
        grid-template-columns: 3% 28% 34% 28% 3%;
        row-gap: 5vh;
      }
    }

    #tour-button p {
      font-family: var(--Alverata);
      color: var(--brand-third);
      place-self: center;
    }

    #main-header #grapes-continue {
      /* Flow behind other content. */
      position: absolute;
      z-index: 1;

      /* Positioning. Centered, flowing
         off the bottom of the screen
         to lead the user down. */
      bottom: 10vh;
      place-self: center;

      /* Keep it from growing */
      height: auto;
      width: 15%;
      
    }

    /* Sizing and margin setting for the
       continuation graphic. */
    #main-header #grapes-continue,
    #main-header #grapes-continue img {
        margin: 0;
        height: 8vh;
        width: auto;
        object-fit: cover;

        /* Don't let it expand outside
           the boundaries on mobile. */
        max-width: 100%;
    }

    .hero-slider {
      display: none;
    }
        
    #homepage-hero {
      grid-area: 2 / 2 / 3 / 5;
      position: relative;
      z-index: 3;
      place-self: center;
      height: 100%;
      width: 95%;
      max-width: 600px;
      margin: auto;


      display: grid;
      grid-template-rows: 85% 15%;

      z-index: 5;
    }

    #homepage-hero div {
      height: fit-content;
    }

    #homepage-hero p:nth-child(1) {
      text-align: center;
      font-family: var(--Alverata);
      font-size: 3rem;
    }
        
    #homepage-hero p {
      position: relative;
      z-index: 5;
    }

    #homepage-hero p:last-child {
      padding-bottom: 45px;
    }

    #homepage-hero #grapes-separator {
      /* Flow behind other content. */
      position: relative;
      z-index: 1;

      /* Positioning. Centered, flowing
         off the bottom of the screen
         to lead the user down. */
      bottom: 15px;
      place-self: end center;

      /* Keep it from growing */
      height: auto;
    }

    #homepage-hero #grapes-separator img {
        margin: 0;
        height: 12vh;
        width: auto;
        object-fit: cover;

        /* Don't let it expand outside
           the boundaries on mobile. */
        max-width: 100%;
    }

    #homepage-banners {
      grid-area: 3 / 1 / 4 / 6;
      height: 100%;
      width: 100vw;
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: repeat(4, 24%);
      row-gap: 1%;
      column-gap: 10px;

      padding: 85px 55px;

      box-sizing: border-box;

      background-image: 
        url(https://admin.omniwinery.com/wp-content/uploads/2026/09/grapes-cream-20per.png),
        url(https://admin.omniwinery.com/wp-content/uploads/2026/09/grapes-cream-20per.png);

      background-repeat: no-repeat no-repeat;

      background-position: -50% 10%, 150% 80%;

      background-blend-mode: soft-light;

      background-color: var(--brand-main);

    }

      #wedding-banner figure img {
        object-position: 20% 0%;
      }
        
    #venue-features {
      display: none;
    }
        
    #venue-features-bg {
      display: none;
    }
        
    @media screen and (max-width: 600px) {
      #homepage-hero {
        grid-area: 2 / 1 / 3 / 6;
        padding: 0px 18px;
        box-sizing: border-box;
        width: 100%;
      }

      #homepage-hero p:nth-child(1) {
        font-size: 2rem;
      }

      #venue-features {
        display: none;
      }
        
      figure#venue-features-bg {
        display: none;
      }

      figure#venue-features-bg img {
        display: none;
      }

      #homepage-hero p {
        font-size: 1.4rem;
      }

      #homepage-banners {
        grid-area: 3 / 1 / 4 / 6;
        padding-left: 2%;
        padding-right: 2%;

        padding-bottom: 55px;
      }

      #wedding-banner figure img {
        object-position: 20% 0%;
      }

      #winery-banner figure img {
        object-position: 0% 100%;
      }

      #wine-club-banner figure img {
        object-position: 0% 70%;
      }
    }

    @media screen and (max-width: 600px) {
      #mc_embed_shell {
        grid-area: 4 / 2 / 5 / 5;
      }
    }