/* CONTENTS

1. Reset Styles
FONTS
2. Baseline Styles
3. Main Menu
4. Tile Styles
5. Search form
6. Page Styles
6.1 Video Container Styles
6.2 Section Divider Styles
6.3 Carousel Styles
Fading animation
6.4 Callout Styles
front page blog overwrite
6.5 Hero Styles
6.6 Sort Styles
6.7 View All Styles
6.8 Page Two Column Styles
6.9 Sticky Footer Styles
6.10 Category Link Styles
6.11 Load More Button Styles
6.12 Filter Styles
7 All Wines Page Styles
7.1 Wine Container Styles
7.2 Single Wine Styles
8 Single Wine Page Styles
8.1 Single Wine Page Navigation Arrow Styles
8.2 Related Content Styles
8.2 Related Wines Styles
9 Recipes and Pairings Page Styles
10. Single Post Styles
11. Blog Page Styles
12. Privacy Policy Page Styles
13. Build a Better Burger Page Styles
14. Sutter Home for Hope Page Styles
15. Our Roots Page Styles
16. Find Our Wine Styles
17. Nutrition Page Styles
18. Footer Styles
19. Social Widget Styles
20. Age Gate Overlay Styles
21. Very page specific styles
22. 404 Page Styles
blog pro styles
BBB Overrides
Image Adjustments
03/20/19 Additions
Build a better burger css
2019 Sutter Home For Hope
Wine Filter Feature
THEMES - home page
Varietal Nav Indicator
Promo banner
BEGIN styles for Custom Stickers landing page
BEGIN Gravity form styles
Custom Sticker Page MEDIA QUERIES
BEGIN Commerce7 Version 2 Style Updates
Global Styles
Side Cart Styles
Cart Page Styles
Header Styles
Collection Styles
Profile Styles
Checkout Page Styles
Order Receipt Page Styles
Clubs Page
Create Account Page
E-Gift Card Page
Subscribe Form
Media Queries

*/

/* 1. Reset Styles */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;font-size: 100%;/* font: inherit; */vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}body {line-height: 1;}ol,ul {list-style: none;}blockquote,q {quotes: none;}blockquote:before,blockquote:after,q:before,q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

/*FONTS*/
@font-face {
  font-family: 'Block';
  src: url('fonts/blockcffcon-webfont.woff2') format('woff2'),
    url('fontsblockcffcon-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

/* 2. Baseline Styles */
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

body {
  font-family: "PT Sans", sans-serif;
  position: relative;
  padding-top: 70px;
}

h1 {
  font-family: "Homemade Apple", cursive;
}

h2 {
  font-family: "Libre Baskerville", serif;
}

h2.line-accent,
h4 {
  font-family: "Libre Baskerville", serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
}

h2.line-accent,
h4.line-accent {
  display: inline-block;
  position: relative;
  width: 100%;
}

h2.line-accent span,
h4.line-accent span {
  font-size: 18px;
  font-family: "PT Sans", sans-serif;
  color: #900;
  padding: 0 20px;
  background-image: url("/wp-content/themes/sutterhome_new/images/big-lighter.jpg");
  z-index: 1;
  position: relative;
}

h2.line-accent:after,
h4.line-accent:after {
  content: '';
  border-top: 2px solid #900;
  position: absolute;
  z-index: 0;
  top: 13px;
  width: 60%;
  max-width: 330px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

h5 {
  font-size: 24px;
  line-height: 50px;
  color: #AAAAAA;
  font-family: "Libre Baskerville", serif;
  text-align: center;
}

div.fancy, .page.recipes-pairings div.fancy { /* Targeting .fancy div */
  color: #fff;
  font-size: 16px;
  display: block;
  width: 220px;
  margin: 0 auto 20px; }
  div.fancy, .page.recipes-pairings div.fancy { /* Targeting .fancy div */
    line-height: 0.5;
    text-align: center; }
    div.fancy span, .page.recipes-pairings div.fancy span { /* Targeting .fancy div */
      display: inline-block;
      font-family: 'PT Sans', sans-serif;
      text-transform: uppercase;
      position: relative; }
      div.fancy span:before, div.fancy span:after, .page.recipes-pairings div.fancy span:before, .page.recipes-pairings div.fancy span:after  {
        content: '';
        position: absolute;
        height: 5px;
        border-bottom: 2px solid #ed1c24;
        top: 0;
        width: 100%; }
      div.fancy span:before, .page.recipes-pairings div.fancy span:before {
        right: 100%;
        margin-right: 15px; }
      div.fancy span:after, .page.recipes-pairings div.fancy span:after {
        left: 100%;
        margin-left: 15px; }


p {
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 10px;
  font-family: sans-serif;
}

.back-link {
  padding: 0 0 100px 0;
}

.button-link {
  border: 1px solid #D1CDCD;
  padding: 20px 30px;
  max-width: 300px;
  display: block;
  text-align: center;
  margin: 0px auto;
  width: 90%;
  color: #000;
  font-size: 22px;
  font-weight: 100;
  background-color: #fff;
}

.button-link:hover {
  text-decoration: none;
  background-color: #000;
  color: #fff;
}

.styled-select {
  background-color: #000;
  overflow: hidden;
  height: 50px;
  width: 90%;
  max-width: 500px;
  margin: 20px auto;
}

.styled-select select {
  background: transparent;
  padding: 5px;
  font-size: 18px;
  width: 100%;
  height: 50px;
  color: #fff;
  text-transform: uppercase;
}

.styled-select select option {
  background-color: #000;
  width: 100%;
}

/* 3. Main Menu */
header {
  height: 70px;
  position: fixed;
  top: 0;
  z-index: 300;
  display: flex;
  justify-content: space-between;
      background-color: #fdf8f4;
  width: 100%; }
  header .logo {
    position: relative;
    z-index: 10;
    margin-left: 20px; }
    header .logo img {
      width: 70px; }
  header .menu {
    padding: 20px 0; }
    
    header .menu .mobile svg .menu_svg {
      fill: none;
      stroke: #000000;
      stroke-miterlimit: 10; }
    header .menu #mainmenu  { /* changed to target the #mainmenu specifically and not all ul */
      position: absolute;
      top: 69px;
      left: 0;
      width: 100%;
      height: 0;
      -webkit-transition: height 300ms ease-in-out 100ms, opacity 300ms ease-in-out 100ms;
      transition: height 300ms ease-in-out 100ms, opacity 300ms ease-in-out 100ms; }
      header .menu ul li:not(.c7-user-nav__account__dropdown ul li) {
        display: none; }
        header .menu ul li:not(#nonsense) {
          text-align: center;
          /* padding: 15px 0;  */
        }
        header .menu ul li a {
          font-family: "PT Sans", sans-serif;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: #000000;
          font-size: 1.125em;/* changed font unit to em to make text responsive */
          font-weight: 400; }
      header .menu #mainmenu.open, header .menu #nonsense.open  {
        height: 480px;
        opacity: 1; }
        header .menu #mainmenu.open li, header .menu #nonsense.open li {
          display: block; }
  header .locations, header .shop {
    padding: 20px 0; }

  header .search {
    padding: 20px 0;
    cursor: pointer; }

header .menu {
  flex-grow: 1;
}

header .menu {
  padding-left: 42px;
}

.mobileMenu{
  background-color: #fdf8f4;
  height: 0;
  display: none;
  position: absolute;
  top: 69px;
  width: 100%;
  height: 510px;
  left: 0;
  -webkit-transition: height 300ms ease-in-out 100ms, opacity 300ms ease-in-out 100ms;
  transition: height 300ms ease-in-out 100ms, opacity 300ms ease-in-out 100ms;
  padding: 10px 20px;
}

.mobileMenu.open {
  display: block;
}

.mobileMenu li,
.mobileMenu #c7-account {
  list-style: none;
  text-align: center;
  padding: 15px 0;
}

.mobileMenu li a {
  font-family: "PT Sans", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000000;
  font-size: 1.125em;/* changed font unit to em to make text responsive */
  font-weight: 400;
}

header .search,
header .locations,
header .shop,
header .shop-wines {
  padding: 10px 16px 10px 16px;
  border-right: 2px solid #000;
  margin: 10px 0 10px 0;
}

header .shop {
  border-right: 0;
}

header .wine-club {
  display: none;
}

header .shop-wines {
  max-width: 5.5em;
  font-family: "PT Sans", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  padding: 12px 0;
  text-align: center;
}

header .shop-wines:active,
header .shop-wines:focus,
header .shop-wines:hover {
  text-decoration: none;
}

.st0 {
  fill: none;
  stroke: #000;
  stroke-width: 4.0624;
  stroke-miterlimit: 10;
}

@media all and (min-width: 768px) {
  header .logo {
    float: left;
  }

  header .logo img {
    width: 132px;
  }

  header .menu {
    padding-left: 60px;
  }

}

@media all and (min-width: 1200px) {
  header {
    display: block; }
    header .menu {
      float: left;
      padding: 0;
      width: calc(100% - 156px);
      height: 100%; }
      header .menu #mainmenu { /* changed to target the #mainmenu specifically and not all ul */
        opacity: 1;
        position: relative;

        top: auto;
        left: auto;
        padding: 0 0 0 20px;
        height: 100%; }
        header .menu ul:not(#nonsense) li:not(.c7-user-nav__account__dropdown ul li) { /* changed to target the non #nonsense li's */
          display: inline-block;
          padding-right: 20px;
          height: 70px;
          padding-top: 25px; }
          header .menu ul:not(#nonsense) li a { /* changed to target the non #nonsense li's */
            font-size: 14px; }
        header .menu #nonsense { /* changed to target the #nonsense */
          /* float: right; */
          display: flex;
          justify-content: space-evenly;
          width: 300px;
          position: absolute;
          top: 0;
          right: 0;
          height: 70px; }
          header .menu #nonsense li { /* changed to target the #nonsense li's */
            display: inline-block;
            padding: 5px; /* ** tiny home edit 15px */
            flex: 1;
            height: 100%;
            /* float: left; */
            margin: 0px;
            cursor: pointer; }
            header .menu  #nonsense li:nth-of-type(1) { 
              background-color: rgba(251, 176, 59, 0.15);
/*               margin-right: -4px; **tiny home edit */ }
              header .menu  #nonsense li:nth-of-type(1):hover {
                background-color: #fbb03b; }
            header .menu  #nonsense li:nth-of-type(2) {
              background-color: rgba(255, 226, 239, 0.2); }
              header .menu  #nonsense li:nth-of-type(2):hover {
                background-color: #ffe2ef; }

            header .menu  #nonsense li:nth-of-type(3) {
	            background-color: rgba(235, 251, 188, 1); }
             header .menu  #nonsense li:nth-of-type(3):hover {
                background-color: #6f9130; }
            header .menu  #nonsense li a {
              font-size: 10px; /* Changed font from 7px to 0.52rem so it resized properly */
              display: block;
              text-align: center; }
              header .menu  #nonsense li a:hover {
                text-decoration: none; }
              header .menu  #nonsense li a:before {
                display: block;
                content: '';
                width: 100%;
                height: 21px;
                margin-bottom: 10px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: auto 100%; }
            header .menu  #nonsense li.burger a:before {
              background-image: url('/wp-content/themes/sutterhome_new/images/header/burger.svg'); }
            header .menu  #nonsense li.hope a:before {
              background-image: url('/wp-content/themes/sutterhome_new/images/header/ribbon.svg'); }
              header .menu #nonsense li.tiny-home a:before {
              background-image: url('/wp-content/themes/sutterhome_new/images/header/tinyhome.svg'); }
    header .locations, header .shop, header .search {
      float: right;
      padding: 0;
      width: 200px;
      background-color: #625f5b;
      height: 30px;
      text-align: center; }
    header .locations, header .shop {
      width:150px;
    }
    header .search {
      width:150px;
/*       margin-right:-1px; */
    }
    header .locations {
      background-color: #b51f2a;
      text-decoration: none; }
    header .shop,
	header .shop-wines {
      display: none;
    }
	header .wine-club {
		display: block;
	}
    header .locations span, header .shop span, header .search span {
      display: inline-block;
      color: #fff;
      line-height: 30px;
      font-size: 11px; }
    header .locations svg, header .shop svg {
      fill: #fff;
      float: right;
      height: 16px;
      width: 10px;
      margin: 5px 9px 0 0; }
      header .shop svg {
        width:16px;
      }
    header .search {
      border-right: 1px solid white; }
      header .search span {
        position: relative;
	 }
      header .search svg {
        fill: #fff;
        float: right;
        height: 16px;
        width: 10px;
        margin: 7px 30px 0 0; }

  header .search,
  header .locations,
  header .shop {
    padding: 0;
    border-right: 0;
    margin: 0;
  }

  .mobile {
    display: none;
  }

  .mobileMenu:not(.open) {
    display: none;
  }




  .st0 {
    fill: none;
    stroke: #FFF;
    stroke-width: 4.0624;
    stroke-miterlimit: 10;
  }


}

header .menu ul {
  background-color: #fdf8f4;
}

@media all and (min-width: 1024px) {
  header .menu #nonsense li img {
    display: block !important;
    height: 25px;
    margin: 0 auto 5px;
  }
}

/* 4. Tile Styles */
.tile-section {
  max-width: 992px;
  margin: 0 auto;
  overflow: hidden;
  /*
    &.recipes .tile .wrap-link, &.related-posts .tile .wrap-link {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
    }
  */
}

.tile-section .tile {
  position: relative;
}

.tile-section .tile .icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 100px solid #990000;
  border-left: 100px solid transparent;
}

.tile-section .tile .icon.project-tiny-home {
  border-top: 100px solid #88a444;
}

.tile-section .tile .icon .icon-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: -90px;
  right: 5px;
  height: 35px;
  width: 50px;
  z-index: 100;
}

.tile-section .tile .text .category .divider {
  width: 20px;
  height: 3px;
  background-color: #990000;
  margin: 20px 0 0;
}

.tile-section .tile.project-tiny-home .text .category .divider {
  background-color: #88a444;
}

.tile-section .tile.burger-recipes .text .category .divider,
.tile-section .tile.cocktail-recipes .text .category .divider,
.tile-section .tile.sutter-home-kitchen-recipes .text .category .divider,
.tile-section .tile.simple-recipes .text .category .divider {
  background-color: #900;
}

.tile-section .tile.sutter-home-for-hope .text .category .divider,
.tile-section .tile.operation-gratitude .text .category .divider {
  background-color: #ff6699;
}

/*    .tile-section .tile.our-wines .text .category .divider, .tile-section .tile.home-entertainment .text .category .divider, .tile-section .tile.wine-and-food .text .category .divider, .tile-section .tile.homemade .text .category .divider, .tile-section .tile.book-club .text .category .divider {
      background-color: #00adee; }
  .tile-section .tilehome-improvement .text .category .divider {
    background-color: #00adee; }
  .tile-section .tile.for-the-holidays .text .category .divider {
    background-color: #00adee; }
*/
.tile-section .tile.build-a-better-burger .text .category .divider,
.tile-section .tile.vibe-and-vine .text .category .divider,
.tile-section .tile.live-in-the-vineyard .text .category .divider,
.tile-section .tile.build-a-better-burger-info .text .category .divider,
.tile-section .tile.press-releases .text .category .divider {
  background-color: #990000;
  /*#ff9900;*/
}

.tile-section .tile .tile-image {
  height: 250px;
  background-position: center;
  background-size: cover;
  bottom: 0;
}

.better-burger .tile-section.big-doubles .tile .tile-image {
  height: 370px;
}

@media all and (min-width: 1024px) {
  .better-burger .tile-section.big-doubles .tile .tile-image {
    height: 466px;
  }
}

.better-burger .tile-section.doubles.big-doubles .red-btn {
  width: 300px;
  text-align: center;
  left: 50%;
  margin-left: -150px;
}

.tile-section .tile .text {
  margin-bottom: 30px;
  padding: 0 20px;
  padding-top: 20px;
  text-align: left;
}

.tile-section .tile .text .category {
  margin-bottom: 10px;
  padding-right: 30px;
  position: relative;
  z-index: 5;
}

.tile-section .tile .text .category h3 {
  padding-right: 30px;
  text-transform: uppercase;
}

.tile-section .tile .text .category h3 a {
  font-size: 14px;
  color: #000;
  text-transform: uppercase;
  font-family: "PT Sans", sans-serif;
}

.tile-section .tile .text .category ul li a {
  font-size: 14px;
  color: #000;
  text-transform: uppercase;
  font-family: "PT Sans", sans-serif;
}

.tile-section .tile.burger-recipes .icon,
.tile-section .tile.cocktail-recipes .icon,
.tile-section .tile.sutter-home-kitchen-recipes .icon,
.tile-section .tile.simple-recipes .icon {
  border-top-color: #990000;
}

.tile-section .tile.sutter-home-for-hope .icon,
.tile-section .tile.operation-gratitude .icon {
  border-top-color: #ff6699;
}

/*
  .tile-section .tile.our-wines .icon, .tile-section .tile.home-entertainment .icon, .tile-section .tile.wine-and-food .icon, .tile-section .tile.homemade .icon, .tile-section .tile.book-club .icon, .tile-section .tile.home-improvement .icon, .tile-section .tile.for-the-holidays .icon {
    border-top-color: #00adee; }
*/
.tile-section .tile.build-a-better-burger .icon,
.tile-section .tile.vibe-and-vine .icon,
.tile-section .tile.live-in-the-vineyard .icon,
.tile-section .tile.build-a-better-burger-info .icon,
.tile-section .tile.press-releases .icon {
  border-top-color: #990000;
  /* #ff9900; */
}

.tile-section .tile .text h2 {
  font-size: 18px;
  line-height: 24px;
  color: #990000;
  font-family: "Libre Baskerville", serif;
  margin-bottom: 1rem;
}

.tile-section .tile.project-tiny-home .text h2 {
  color: #88a444;
}

.tile-section .tile.burger-recipes h2,
.tile-section .tile.cocktail-recipes h2,
.tile-section .tile.sutter-home-kitchen-recipes h2,
.tile-section .tile.simple-recipes h2 {
  color: #990000;
}

.tile-section .tile.sutter-home-for-hope h2,
.tile-section .tile.operation-gratitude h2 {
  color: #ff6699;
}

/*
  .tile-section .tile.our-wines h2, .tile-section .tile.home-entertainment h2, .tile-section .tile.wine-and-food h2, .tile-section .tile.homemade h2, .tile-section .tile.book-club h2, .tile-section .tile.home-improvement h2, .tile-section .tile.for-the-holidays h2 {
    color: #00adee; }
*/
.tile-section .tile.build-a-better-burger h2,
.tile-section .tile.vibe-and-vine h2,
.tile-section .tile.live-in-the-vineyard h2,
.tile-section .tile.build-a-better-burger-info h2,
.tile-section .tile.press-releases h2 {
  color: #990000;
  /*#ff9900;*/
}

.tile-section .tile .text p {
  font-size: 16px;
  word-wrap: break-word;
  margin: 0 0 1rem;
  line-height: 20px;
  font-family: "PT Sans", sans-serif;
}

.tile-section .tile .text p.prep-time {
  margin: 5px 0;
  font-size: 11px;
}

.tile-section .tile .text>a {
  border: 2px solid #FF0000;
  padding: 8px 30px;
  margin: 30px 0;
  color: #FF0000;
  display: inline-block;
}

.tile-section .tile.burger-recipes .text>a,
.tile-section .tile.cocktail-recipes .text>a,
.tile-section .tile.sutter-home-kitchen-recipes .text>a,
.tile-section .tile.simple-recipes .text>a {
  color: #990000;
  border-color: #990000;
}

.tile-section .tile.sutter-home-for-hope .text>a,
.tile-section .tile.operation-gratitude .text>a {
  color: #ff6699;
  border-color: #ff6699;
}

/*
  .tile-section .tile.our-wines .text > a, .tile-section .tile.home-entertainment .text > a, .tile-section .tile.wine-and-food .text > a, .tile-section .tile.homemade .text > a, .tile-section .tile.book-club .text > a, .tile-section .tile.home-improvement .text > a, .tile-section .tile.for-the-holidays .text > a {
    color: #00adee;
    border-color: #00adee; }
*/
.tile-section .tile.build-a-better-burger .text>a,
.tile-section .tile.vibe-and-vine .text>a,
.tile-section .tile.live-in-the-vineyard .text>a,
.tile-section .tile.build-a-better-burger-info .text>a,
.tile-section .tile.press-releases .text>a {
  color: #990000;
  /*#ff9900*/
  ;
  border-color: #990000;
  /*#ff9900;*/
}

.tile-section.recipes,
.tile-section.related-posts {
  padding: 0 20px;
}

.tile-section.recipes .tile,
.tile-section.related-posts .tile {
  background-color: #fff;
  padding-bottom: 250px;
  margin-bottom: 30px;
}

.tile-section.recipes .tile .text h2,
.tile-section.related-posts .tile .text h2 {
  font-size: 18px;
  padding-right: 20px;
  margin-bottom: 20px;
}

.tile-section.recipes .tile .text p.prep-time {
  margin: 0 auto;
}

.tile-section.related-posts .tile .text p.prep-time {
  margin: 0 auto;
}

.tile-section.related-posts .tile .text a {
  color: #000;
}

.tile-section.recipes .tile .tile-image,
.tile-section.related-posts .tile .tile-image {
  padding-bottom: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-image: url("/wp-content/uploads/2017/10/Generic_Blog_1200x628.png");
}

.tile-section.recipes.varietals .tile .tile-image {
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.tile-section.related-posts h2 {
  font-size: 24px;
  line-height: 30px;
  color: #7f7f7f;
}

.tile-section.doubles .tile {
  margin-bottom: 50px;
}

.tile-section.doubles .tile .tile-image {
  position: relative;
  width: 100%;
}

.tile-section.doubles .tile .icon {
  z-index: 1;
}

.tile-section.doubles .tile .text {
  position: relative;
  height: auto;
}

.tile-section.doubles .tile .text>a {
  position: relative;
  bottom: 0;
  margin: 0;
}

@media all and (min-width: 768px) {

  .tile-section.recipes,
  .tile-section.related-posts {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;
    /* NEW, Spec - Firefox, Chrome, Opera */
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 20px;
    padding: 0;
    margin-bottom: 50px;
  }

  .better-burger .tile-section.recipes {
    margin-bottom: 0;
  }
}

@media all and (min-width: 768px) {

  .tile-section.recipes .tile,
  .tile-section.related-posts .tile {
    -webkit-box-flex: 0 0 300px;
    /* OLD - iOS 6-, Safari 3.1-6 */
    /* Safari 6.1+. iOS 7.1+, BB10 */
    -ms-flex: 0 0 235px;
    /* IE 10 */
    flex: 0 0 235px;
    /* NEW, Spec - Firefox, Chrome, Opera */
    width: 235px;
    margin: 20px 10px;
  }

  .tile-section.recipes .tile.wide,
  .tile-section.related-posts .tile.wide {
    -webkit-box-flex: 0 0 100%;
    /* OLD - iOS 6-, Safari 3.1-6 */
    /* Safari 6.1+. iOS 7.1+, BB10 */
    -ms-flex: 0 0 100%;
    /* IE 10 */
    flex: 0 0 100%;
    /* NEW, Spec - Firefox, Chrome, Opera */
    overflow: hidden;
    height: 400px;
    max-width: 700px;
  }

  .tile-section.recipes .tile.wide .tile-image,
  .tile-section.related-posts .tile.wide .tile-image {
    width: 50%;
    height: 100%;
    float: left;
  }

  .tile-section.recipes .tile.wide .text,
  .tile-section.related-posts .tile.wide .text {
    padding-top: 0;
    width: 50%;
    float: right;
  }
}

@media all and (min-width: 992px) {

  .tile-section.recipes .tile,
  .tile-section.related-posts .tile {
    -webkit-box-flex: 0 0 260px;
    /* OLD - iOS 6-, Safari 3.1-6 */
    /* Safari 6.1+. iOS 7.1+, BB10 */
    -ms-flex: 0 0 260px;
    /* IE 10 */
    flex: 0 0 260px;
    /* NEW, Spec - Firefox, Chrome, Opera */
    width: 260px;
  }
}

@media all and (min-width: 768px) {
  .tile-section.doubles {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: flex;
    margin-bottom: 50px;
  }
}

@media all and (min-width: 992px) {
  .tile-section.doubles .tile {
    margin-bottom: 0;
  }
}

/* 5. Search Form */
.search-form {
  background-color: rgba(0, 0, 0, 0.9);
  width: 100%;
  height: calc(100% - 70px);
  position: absolute;
  top: 70px;
  left: 0;
  z-index: 200;
  padding-top: 100px;
  overflow: hidden;
}

.search-form .tidy {
  padding: 0 20px;
}

.search-form .overflow-scroll {
  overflow: scroll;
  height: 100%;
  padding-right: 40px;
  width: calc(100% + 40px);
  padding-bottom: 300px;
  position: relative;
}

.search-form h2 {
  color: #fff;
  font-family: "PT Sans", sans-serif;
  margin-bottom: 30px;
}

.search-form .close {
  position: absolute;
  right: 35px;
  color: #fff;
  border: 1px solid #fff;
  z-index: 300;
  opacity: 1;
  padding: 10px 15px;
  border-radius: 50%;
}

.search-form .close span {
  color: #fff;
  position: relative;
  top: -2px;
}

.search-form input {
  background-color: transparent;
  width: 100%;
  font-size: 48px;
  color: #fff;
  border: 0;
  font-family: "PT Sans", sans-serif;
  margin-bottom: 30px;
  position: relative;
}

.search-form input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #ffffff;
}

.search-form input::-moz-placeholder {
  /* Firefox 19+ */
  color: #ffffff;
}

.search-form input:-ms-input-placeholder {
  /* IE 10+ */
  color: #ffffff;
}

.search-form input:-moz-placeholder {
  /* Firefox 18- */
  color: #ffffff;
}

.search-form input:focus {
  outline: none;
}

.search-form .results small {
  color: #fff;
  margin-bottom: 40px;
  display: block;
}

.search-form .results small span {
  margin-right: 5px;
}

.search-form .results h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 30px;
}

.search-form .tile-section {
  margin: 0 auto;
  max-width: 100%;
}

@media all and (min-width: 768px) {
  .search-form .tidy {
    padding: 0 100px;
  }
}

@media all and (min-width: 768px) {
  .search-form .close {
    right: 100px;
  }
}

@media all and (min-width: 768px) {
  .search-form .tile-section .tile {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 295px;
    flex: 0 0 295px;
    width: 295px;
  }
}

@media all and (min-width: 992px) {
  .search-form .tile-section .tile {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 265px;
    flex: 0 0 265px;
    width: 265px;
  }
}


/* 6. Page Styles */
.page {
  background-color: #F5EEE4;
  background-image: url("/wp-content/themes/sutterhome_new/images/big-lighter.jpg");
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page>.container {
  padding: 50px 0;
}

.page.recipes-pairings>.container {
  padding-bottom: 0;
}

.page>.container.skinny {
  max-width: 900px;
}

/* 6.1 Video Container Styles */
.page .video-container {
  position: relative;
  height: 570px;
  overflow: hidden;
}

.page.better-burger .video-container {
  height: auto;
}

.page .video-container .graphic {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  width: 320px;
  height: 220px;
  margin: auto;
}

.page .video-container .graphic img {
  height: 100%;
  display: block;
  margin: 0 auto;
}

.page .video-container .video,
.page .video-container .youtube {
  position: relative;
  clear: both;
  height: 570px;
  overflow: hidden;
  max-width: 100%;
}

.page.better-burger .video-container .video {
  height: 300px;
}

.page .video-container .video video,
.page .video-container .video iframe {
  position: absolute;
  left: 50%;
  height: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.page .video-container .youtube iframe {
  position: absolute;
  left: 50%;
  height: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.page .video-container .text {
  position: absolute;
  top: 150px;
  text-align: center;
  width: 100%;
  max-width: 900px;
  left: 0;
  right: 0;
  margin: auto;
}

.page .video-container .text img {
  width: 200px;
  margin-bottom: 50px;
}

.page .video-container .text h1 {
  color: #fff;
  font-family: "Libre Baskerville", serif;
  /* "Homemade Apple", cursive; */
  font-size: 24px;
  max-width: 200px;
  margin: 0 auto;
  line-height: 42px;
}

.page .video-container .text h3 {
  font-size: 28px;
  text-transform: uppercase;
  font-family: "PT Sans", sans-serif;
  color: #fff;
  line-height: 36px;
  margin-bottom: 20px;
}

.page .video-container .text h3 img {
  width: 80%;
  max-width: 292px;
  margin: 20px auto 150px;
  display: block;
}

.page .video-container .text .more-below {
  margin-top: 50px;
}

.page .youtube {
  top: 0;
  margin-bottom: 50px;
  height: 150px;
}

.page .youtube iframe {
  width: 100%;
}

@media all and (min-width: 992px) {

  .page .video-container .video,
  .page .video-container .youtube {
    position: relative;
    padding-bottom: 55.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
  }

  .page .video-container.image {
    height: auto;
  }

  .page .video-container .video.image {
    height: auto;
  }

  .page .video-container.image .video.image {
    padding-bottom: 35.25%;
    padding-top: 0;
  }

  .page.better-burger .video-container .video {
    padding-bottom: 30%;
  }

  .page .video-container .video video,
  .page .video-container .video iframe {
    position: absolute;
    top: 0;
    width: 105%;
    height: 100%;
  }

  .page .video-container .youtube iframe {
    position: absolute;
    top: 0;
    width: 105%;
    height: 100%;
  }
}

@media all and (min-width: 992px) {
  .page .video-container .text {
    top: 0;
    bottom: 0;
    margin: auto;
    height: 215px;
  }
}

@media all and (min-width: 768px) {
  .page .video-container .text h1 {
    font-size: 32px;
    line-height: 42px;
    max-width: 100%;
  }
}

@media all and (min-width: 768px) {
  .page .video-container .text h3 img {
    margin-top: 30px;
    margin-bottom: 75px;
  }
}

@media all and (min-width: 768px) {
  .page .video-container .text h3 {
    font-size: 20px;
    line-height: 36px;
  }
}

/* 6.2 Section Divider Styles */
.page .section-divider {
  padding: 30px 0;
  text-align: center;
}

.page .section-divider.social {
  padding-bottom: 40px;
}

.page.better-burger .section-divider.social {
  padding-bottom: 30px;
}

.page .section-divider h3,
.page .section-divider h2 {
  text-align: center;
  margin-top: 15px;
  font-size: 28px;
  color: #736357;
  padding: 0 20px;
  /* line-height: 34px; */
  font-weight: 400;
  font-family: "Libre Baskerville", serif;
}

.page .section-divider h3 i,
.page .section-divider h2 i {
  font-style: italic;
}

.page .section-divider p {
  color: #900;
  font-size: 16px;
  margin-top: 20px;
  text-align: center;
  font-family: "bell-centennial-std-sub-capt", sans-serif;
}

.page .section-divider-2 {
  margin: 40px 0;
}

/* 6.3 Carousel Styles */

.page .carousel {
  height: 100%;
  overflow: hidden;
}

.page .carousel .carousel-item {
  height: auto;
  overflow: hidden;
  position: relative;
  z-index: 0;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /*
    opacity: 0;
    -webkit-transition: opacity 500ms ease-in-out 500ms;
    transition: opacity 500ms ease-in-out 500ms;
*/
}

.page .carousel .carousel-item.active {
  opacity: 1;
  z-index: 1;
}

.page .carousel .carousel-item .carousel-text {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  margin: auto;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /* Added dark transparent background to fix text/img contrast issues in carousel items */
  background-color: rgba(0, 0, 0, 0.1);
}

.page .carousel .carousel-item .carousel-text p {
  font-size: 20px;
  margin-bottom: 0;
  color: #b51f2a;
  font-family: "PT Sans", sans-serif;
}

.page .carousel .carousel-item .carousel-text .divider,
.callout .divider,
.video-container .text .divider {
  width: 20px;
  height: 3px;
  background-color: red;
  margin: 20px auto 25px;
}

.page .carousel .carousel-item .carousel-text h2 {
  font-size: 34px;
  line-height: 42px;
  color: #c40f1e;
  font-family: "Libre Baskerville", serif;
}

.page .carousel .carousel-item .carousel-text a,
.page .video-container .text a {
  border: 1px solid #fff;
  display: inline-block;
  /*         width: 150px; */
  /*        margin: 40px auto; */
  padding: 10px 20px;
  color: #fff;
  cursor: pointer;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
}

.page-id-10 .carousel .carousel-item .carousel-text a,
.page .video-container .text a {
  display: none;
}

@supports (perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) {
  .page .carousel .carousel-item {
    background-attachment: fixed;
  }
}

.carousel-item a.image-link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 9999;
  position: relative;
}
.carousel-item a.image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5.0s;
  animation-name: fade;
  animation-duration: 5.0s;
}

@-webkit-keyframes fade {
  from {
    opacity: .9
  }

  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .9
  }

  to {
    opacity: 1
  }
}

.carousel-item {
  /*   display: none; */
}

@media all {
  .page .carousel {
    /* height: 210px; */
  }

  .page .carousel .carousel-item .carousel-text p {
    font-size: 16px;
  }

  .page .carousel .carousel-item .carousel-text p {
    font-size: 16px;
  }

  .page .carousel .carousel-item .carousel-text .divider,
  .video-container .text .divider {
    margin: 10px auto 15px;
  }

  .page .carousel .carousel-item .carousel-text h2 {
    font-size: 21px;
  }

  .page .carousel .carousel-item .carousel-text a {
    border: 1px solid #FFF;
    background: #b51f2a;
    color: #FFF;
    max-width: 240px;
    margin: 0 auto;
  }

  .page .carousel:nth-of-type(2) .carousel-item .carousel-text a,
  .page .video-container .text a {
    /*		margin:18px auto; */
    position: absolute;
    bottom: 9px;
    left: 50%;
    margin-left: -57px;
    background: #b51f2a;
    border: 0;
    color: #FFF;
  }


}

@media all and (min-width: 768px) {

  .page .carousel .carousel-item .carousel-text a,
  .page .video-container .text a {
    bottom: 42px;
  }

}

@media all and (min-width: 481px) {
  .page .carousel {
    /* height: 420px; */
  }
}

@media all and (min-width: 769px) {
  .page .carousel {
    /* height: 720px; */
  }

  .page .carousel .carousel-item .carousel-text p {
    font-size: 20px;
  }

  .page .carousel .carousel-item .carousel-text .divider,
  .video-container .text .divider {
    margin: 20px auto 25px;
  }

  .page .carousel .carousel-item .carousel-text h2 {
    font-size: 34px;
  }

  .page .carousel .carousel-item .carousel-text a,
  .page .video-container .text a {
    margin: 40px auto;
  }

}

/* 6.4 Callout Styles */
.page .callout {
  overflow: hidden;
  height: 700px;
  background-position: center;
  background-size: cover;
  position: relative;
  margin-bottom: 30px;
}

.page .callout:after,
.video-container.image .video.image:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  /*    background: rgba(102, 64, 51, 0.37); */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.page.recipes-pairings .callout {
  margin-bottom: 0;
}

.page .callout.skinny {
  max-width: 900px;
  margin: 0 auto 40px;
  height: 400px;
}

.page .callout.static {
  background-attachment: scroll;
  background-size: cover;
}

.page .callout .text {
  position: absolute;
  width: 100%;
  text-align: center;
}

.page .callout.burger-recipes .text h6 span:before,
.page .callout.cocktail-recipes .text h6 span:before,
.page .callout.sutter-home-kitchen-recipes h6 span:before,
.page .callout.simple-recipes h6 span:before,
.page .callout.burger-recipes .text h6 span:after,
.page .callout.cocktail-recipes .text h6 span:after,
.page .callout.sutter-home-kitchen-recipes h6 span:after,
.page .callout.simple-recipes h6 span:after {
  border-bottom: 2px solid #990000;
}

.page .callout.sutter-home-for-hope h6 span:before,
.page .callout.operation-gratitude h6 span:before,
.page .callout.sutter-home-for-hope h6 span:after,
.page .callout.operation-gratitude h6 span:after {
  border-bottom: 2px solid #ff6699;
}

.page .callout.our-wines h6 span:before,
.page .callout.home-entertainment h6 span:before,
.page .callout.wine-and-food h6 span:before,
.page .callout.homemade h6 span:before,
.page .callout.book-club h6 span:before,
.page .callout.home-improvement h6 span:before,
.page .callout.for-the-holidays h6 span:before,
.page .callout.our-wines h6 span:after,
.page .callout.home-entertainment h6 span:after,
.page .callout.wine-and-food h6 span:after,
.page .callout.homemade h6 span:after,
.page .callout.book-club h6 span:after,
.page .callout.home-improvement h6 span:after,
.page .callout.for-the-holidays h6 span:after {
  border-bottom: 2px solid #00adee;
}

.page .callout.build-a-better-burger h6 span:before,
.page .callout.vibe-and-vine h6 span:before,
.page .callout.live-in-the-vineyard h6 span:before,
.page .callout.build-a-better-burger-info h6 span:before,
.page .callout.press-releases h6 span:before,
.page .callout.build-a-better-burger h6 span:after,
.page .callout.vibe-and-vine h6 span:after,
.page .callout.live-in-the-vineyard h6 span:after,
.page .callout.build-a-better-burger-info h6 span:after,
.page .callout.press-releases h6 span:after {
  border-bottom: 2px solid #ff9900;
}

.page .callout .text {
  z-index: 1;
}

.page .callout .text.bottom {
  bottom: 80px;
}

.page .callout .text.centered {
  top: 0;
  bottom: 0;
  margin: auto;
  height: 200px;
}

.page .callout .text .icon {
  width: 30px;
  height: 30px;
  display: block;
  margin: 20px auto;
  background-size: auto 30px;
  background-position: center;
  background-repeat: no-repeat;
}

.page .callout .text h2.callout-text,/* Added new class here as well */
.page .callout .text p,/*Changed link to p tag to eliminate redundancy*/
.page .callout .text h2 {
  border: 2px solid #fff;
  margin: 0;
  padding: 0;
  color: #fff;
  width: auto;
  display: inline-block;
  line-height: 36px;
  font-family: "Libre Baskerville", serif;
  font-size: 26px;
}

/* front page blog overwrite */
.page .callout .text h2.callout-text, /* added new class (callout-text) to target h2 within .callout (changed tag from 'a' to 'h2') to eliminate redundant links and wrong header structure*/
.page .callout .text p/*Changed link to p tag to eliminate redundancy*/{
  border: 0;
  font-size: 34px;
}

.page .callout.overlay .text a {
  border: none;
  margin: 0 20px 20px;
  padding: 15px 20px;
  color: #fff;
  width: auto;
  display: inline-block;
  line-height: 36px;
  font-family: "Libre Baskerville", serif;
  font-size: 26px;
}

.callout.overlay .divider {
  margin: 0 auto;
}

.page .videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.page .videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@supports (perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) {
  .page .callout {
    background-attachment: fixed;
  }
}

/* 6.5 Hero Styles */
.page .hero {
  width: 100%;
  background-position: center;
  background-size: cover;
  height: 200px;
  display: table;
  position: relative;
  background-repeat: no-repeat;
  background-color: #69aad9;
}

.page.visit-us .hero {
  background-position: top;
}

.page .hero .hero-text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.page .hero h1 {
  font-size: 30px;
  font-family: "Homemade Apple", cursive;
  color: #fff;
  text-align: center;
  line-height: 54px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}

/* Adds darkened overlay to visit us hero image */
.page.privacy-policy.visit-us .hero .hero-text {
  background-color: rgba(0, 0, 0, 0.08);
  height: 100%;
  width: 100%;
}

/* Adds darkened overlay to wines hero image */
.page.page.all-wines .hero.wines-hero .hero-text {
  background-color: rgba(0, 0, 0, 0.08);
  height: 100%;
  width: 100%;
}

.page .hero .graphic {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 320px;
  height: 220px;
  margin: auto;
}

.page .hero .graphic img {
  height: 100%;
  display: block;
  margin: 0 auto;
}

@media all and (min-width: 768px) {
  .page .hero {
    height: 300px;
  }

  @supports (perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) {
    .page .hero {
      /* background-attachment: fixed; */
    }
  }
}

@media all and (min-width: 1440px) {
  .page .hero {
    height: 390px;
    /* background-position: center;  */
  }

  .page.page-id-344 .hero {
    height: 600px;
  }
}

@media all and (min-width: 768px) {
  .page .hero h1 {
    font-size: 40px;
  }
}

/* 6.6 Sort Styles */
.page .sort {
  text-align: center;
  padding: 40px 15px 40px;
  height: 90px;
  width: 100%;
  max-width: 359px;
  margin: 0 auto 100px;
}

.page .sort .select {
  width: 100%;
  max-width: 359px;
  height: 60px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  float: left;
  margin: 0 auto 7px;
  padding: 12px 0;
  border: 1px solid #D1CDCD;
  background-color: #ffffff;
  font-size: 20px;
  line-height: 30px;
  text-align-last: center;
  background-image: linear-gradient(45deg, transparent 50%, black 50%), linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, black 50%, transparent 50%), linear-gradient(135deg, white 50%, transparent 50%), radial-gradient(black 70%, transparent 72%);
  background-position: calc(100% - 30px) 25px, calc(100% - 30px) 27px, calc(100% - 25px) 25px, calc(100% - 25px) 27px, calc(100% - 20px) 18px;
  background-size: 5px 5px, 5px 5px, 5px 5px, 5px 5px, 20px 20px;
  background-repeat: no-repeat;
}

.page .sort .select .placeholder {
  font-family: "Libre Baskerville", serif;
  font-size: 16px;
}

.page .sort .select .options {
  position: absolute;
  width: 100%;
  top: 59px;
  z-index: 1000;
  background-color: #fff;
  padding: 20px 0;
}

.page .sort .select .options .option {
  padding: 5px 0;
}

.page .sort.single {
  padding-bottom: 0;
}

.page .sort.single .select {
  float: none;
}

.page .sort .toggle-holder {
  clear: both;
  overflow: hidden;
}

.page .sort .toggle-holder .toggle {
  width: 50%;
  float: left;
  padding: 12px 0;
  height: 56px;
  line-height: 30px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.page .sort .toggle-holder .toggle.selected {
  width: 50%;
  float: left;
  padding: 12px 0;
  height: 56px;
  line-height: 30px;
  border: 1px solid transparent;
  cursor: pointer;
  background-color: #ccc;
  cursor: default;
}

@media all and (min-width: 768px) {
  .page .sort .select:first-of-type {
    background-position: 25px 25px, 25px 27px, 30px 25px, 30px 27px, 20px 18px;
  }
}

@media all and (min-width: 992px) {
  .page .sort .select {
    max-width: 435px;
  }
}

/* 6.7 View All Styles */
.page .view-all {
  width: 250px;
  height: 60px;
  cursor: pointer;
  position: relative;
  max-width: 275px;
  margin: 20px auto 0;
  padding: 12px 0;
  border: 1px solid #D1CDCD;
  background-color: #ffffff;
  font-size: 20px;
  line-height: 30px;
  text-align-last: center;
  background-image: linear-gradient(45deg, transparent 50%, black 50%), linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, black 50%, transparent 50%), linear-gradient(135deg, white 50%, transparent 50%), radial-gradient(black 70%, transparent 72%);
  background-position: calc(100% - 30px) 25px, calc(100% - 30px) 27px, calc(100% - 25px) 25px, calc(100% - 25px) 27px, calc(100% - 20px) 18px;
  background-size: 5px 5px, 5px 5px, 5px 5px, 5px 5px, 20px 20px;
  background-repeat: no-repeat;
  display: block;
}

/* 6.8 Page Two Column Styles */
.page .column {
  display: block;
  padding: 0 20px;
  margin: 50px 0 80px;
  text-align: left;
}

.page .column p {
  font-family: "PT Sans", sans-serif;
  line-height: 26px;
  font-size: 15px;
}

.page .column p:last-of-type {
  margin: 0;
}

@media all and (min-width: 768px) {
  .page .column {
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 60px;
    column-gap: 60px;
  }
}

/* 6.9 Sticky Footer Styles */
.page .bottom-sticky {
  max-width: 400px;
  width: 100%;
  margin: 40px auto 0;
  text-align: center;
  overflow: hidden;
}

.page .bottom-sticky a {
  font-family: "Libre Baskerville", serif;
  font-size: 13px;
}

.page .bottom-sticky a:hover {
  text-decoration: none;
}

.page .bottom-sticky img {
  width: calc(100% - 30px);
  display: block;
  margin: 20px auto 0;
}

@media all and (min-width: 992px) {
  .page .bottom-sticky {
    max-width: 800px;
  }
}

@media all and (min-width: 768px) {
  .page .bottom-sticky a {
    width: 20%;
    float: right;
    text-align: left;
    line-height: 22px;
  }
}

@media all and (min-width: 992px) {
  .page .bottom-sticky a {
    font-size: 22px;
    line-height: 30px;
  }
}

@media all and (min-width: 768px) {
  .page .bottom-sticky img {
    width: 80%;
    float: left;
  }
}

/* 6.10 Category Links Styles */
.page .category-container {
  padding: 80px 0 80px;
}

.page .category-container .category {
  position: relative;
  margin-bottom: 100px;
  text-align: center;
}

.page .category-container .category .icon {
  padding: 30px;
  height: 180px;
  width: 180px;
  margin: 0 auto 40px;
  background-color: red;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page .category-container .category .icon img {
  position: relative;
  width: auto;
  margin: 0 auto;
  z-index: 1;
}

.page .category-container .category .category-text {
  padding-top: 30px;
  position: relative;
  padding-bottom: 40px;
}

.page .category-container .category .category-text:before {
  content: '';
  position: absolute;
  top: 0;
  width: 35px;
  border: 2px solid yellow;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* changed css to target h2 instead of h3 */
.page .category-container .category .category-text h2 {
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.page .category-container .category .category-text p {
  font-family: "Libre Baskerville", serif;
  font-size: 16px;
  max-width: 250px;
  margin: 0 auto 30px;
  line-height: 29px;
  color: #736357;
}

.page .category-container .category .category-link {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.page .category-container .category .category-link a {
  border: 2px solid red;
  text-transform: uppercase;
  padding: 10px 20px;
  color: red;
}

.page .category-container .category .category-link a:hover {
  text-decoration: none;
  border-color: transparent;
  background-color: red;
  color: #fff;
}

.page .category-container .category.cocktail-recipes .category-text:before,
.page .category-container .category.wine-pairings .category-text:before {
  border-color: #c1272d;
}

.page .category-container .category.cocktail-recipes .icon,
.page .category-container .category.wine-pairings .icon {
  background-color: #c1272d;
}

.page .category-container .category.cocktail-recipes .category-link a,
.page .category-container .category.wine-pairings .category-link a {
  border-color: #c1272d;
  color: #c1272d;
}

.page .category-container .category.cocktail-recipes .category-link a:hover,
.page .category-container .category.wine-pairings .category-link a:hover {
  border-color: transparent;
  background-color: #c1272d;
  color: #fff;
}

.page .category-container .category.food-recipes .category-text:before {
  border-color: #0069AA;
}

.page .category-container .category.food-recipes .icon {
  background-color: #0069AA;
}

.page .category-container .category.food-recipes .category-link a {
  border-color: #0069AA;
  color: #0069AA;
}

.page .category-container .category.food-recipes .category-link a:hover {
  border-color: transparent;
  background-color: #0069AA;
  color: #fff;
}

.page .promo-text h4 {
  color: #C1272D;
  line-height: 48px;
  font-size: 26px;
}

.page .promo-text p {
  line-height: 22px;
  font-size: 15px;
  margin-bottom: 20px;
  font-family: 'Arial', sans-serif;
  color: #000;
}

@media all and (min-width: 768px) {
  .page .promo-text {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .page .promo-text div:nth-of-type(2) {
    border-left: 1px solid #C1272D;
    padding-left: 50px;
  }

  .page.better-burger .promo-text {
    margin: 0 auto;
  }
}

/* 6.11 Load More Button Styles */
.page #load-more,
.page .alm-load-more-btn,
.search #load-more,
.search .alm-load-more-btn {
  text-align: center !important;
  border: 1px solid #000 !important;
  max-width: 100%;
  display: block !important;
  background-color: #fff !important;
  margin: 40px auto 0 !important;
  width: 500px !important;
  cursor: pointer !important;
  padding: 20px 0 !important;
  color: #000000 !important;
  font-family: "Libre Baskerville", serif;
  height: auto !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  font-size: 22px !important;
}

.page #load-more:hover,
.page .alm-load-more-btn:hover,
.search #load-more:hover,
.search .alm-load-more-btn:hover {
  color: #000 !important;
}

.page #load-more:not(.done):hover,
.search .alm-load-more-btn:not(.done):hover {
  background-color: #000 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/** Could not convert this section to SCSS, line 1413 registers as invalid. **/
/* 6.12 Filters Styles */
.page .filters {
  text-align: center;
  padding-bottom: 50px;
}

.page .filters h6.fancy {
  color: #000;
}

.page.home-page .section-divider {
  padding: 80px 0;
}

/* 7 All Wines Page Styles */
.page.all-wines {
  position: relative;
  background-color: white;
  /* background: rgb(107 107 107 / 10%); */
  background: rgb(0,0,0,0.02); /* Added very light overlay to background image on family of wines page to help with contrast on the colorful h4's */
}

/* 7.1 Wine Container Styles */
.page.all-wines .wine-container {
  text-align: center;
  padding: 30px 0 0;
  position: relative;
  margin: 0;
}

.page.all-wines .wine-container::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(-25px / 2);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  z-index: 1;
}

.page.all-wines .wine-container::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 300px;
  top: 0;
  left: 0;
  z-index: 0;
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
  /* IE6-9 */
}

.wine-container.is-hidden {
  display: none;
}

/* changed h6 to h3 in wines page to fix heading element order */
.page.all-wines .wine-container h6, .page.all-wines .wine-container h3 {
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 0.07em;
  margin: 10px 0 30px;
  display: inline-block;
  width: auto;
  padding: 0 30px;
  position: relative;
  z-index: 1;
  color: #000;
}

/* changed h6 to h3 in wines page to fix heading element order */
.page.all-wines .wine-container h3:before,
.page.all-wines .wine-container h3:after,
.page.all-wines .wine-container h3:before,
.page.all-wines .wine-container h3:after {
  content: '';
  border: 1px solid blue;
  position: absolute;
  width: 80px;
  top: 9px;
}

/* Fixed heading order from h3 to h2 this ruleset keeps font-family the same as before */
.page.all-wines h2 {
  font: inherit;
}

@media screen and (max-width:30em) {

  .page.all-wines .wine-container h3:before,
  .page.all-wines .wine-container h3:after {
    width: 25%;
  }
}

.page.all-wines .wine-container h3:before {
  left: 100%;
}

.page.all-wines .wine-container h3:after {
  right: 100%;
}

.page.all-wines .wine-container.red {
  background-size: 100% auto;
}

.page.all-wines .wine-container.red::before {
  background-color: #962F31;
}

.page.all-wines .wine-container.red h3:before,
.page.all-wines .wine-container.red h3:after {
  border-color: #962F31;
}

.page.all-wines .wine-container.white {
  background-size: 100% auto;
}

.page.all-wines .wine-container.white::before {
  background-color: #E7AB03;
}

.page.all-wines .wine-container.white h3:before,
.page.all-wines .wine-container.white h3:after {
  border-color: #E7AB03;
}

.page.all-wines .wine-container.pink {
  background-size: 100% auto;
}

.page.all-wines .wine-container.pink::before {
  background-color: #C5345A;
}

.page.all-wines .wine-container.pink h3:before,
.page.all-wines .wine-container.pink h3:after {
  border-color: #C5345A;
}

.page.all-wines .wine-container.bubblies {
  background-size: 100% auto;
}

.page.all-wines .wine-container.bubblies::before {
  background-color: #BC9D64;
}

.page.all-wines .wine-container.bubblies h3:before,
.page.all-wines .wine-container.bubblies h3:after {
  border-color: #BC9D64;
}

.page.all-wines .wine-container.fruit {
  background-size: 100% auto;
}

.page.all-wines .wine-container.fruit::before {
  background-color: #ff0045;
}

.page.all-wines .wine-container.fruit h3:before,
.page.all-wines .wine-container.fruit h3:after {
  border-color: #ff0045;
}

.page.all-wines .wine-container .wine-list {
  display: -ms-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}

@supports (perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) {
  .page.all-wines .wine-container.red {
    background-attachment: fixed;
  }
}

@supports (perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) {
  .page.all-wines .wine-container.white {
    background-attachment: fixed;
  }
}

@supports (perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) {
  .page.all-wines .wine-container.pink {
    background-attachment: fixed;
  }
}

@supports (perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) {
  .page.all-wines .wine-container.bubblies {
    background-attachment: fixed;
  }
}

/* 7.2 Single Wine Styles */
.page.all-wines .wine-container .single-wine {
  position: relative;
  margin: 0 auto 5px;
  text-align: left;
  max-width: 225px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-bottom: 80px;
}

.page.all-wines .wine-container .single-wine .wine-bottle {
  position: relative;
  padding: 0 0 45px;
  margin: 0 0 30px;
  height: 330px;
}

.page.all-wines .wine-container .single-wine .wine-bottle a {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
}

.page.all-wines .wine-container .single-wine .wine-bottle img {
  max-height: 263px;
  display: block;
  z-index: 10;
  position: relative;
  margin: 0 auto;
}

.page.all-wines .wine-container .single-wine .wine-bottle .circle {
  height: 167px;
  width: 167px;
  border-radius: 150px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
  display: block;
}

.page.all-wines .wine-container .single-wine .wine-bottle .circle .circleOverlay {
  width: 100%;
  height: 100%;
  border-radius: 150px;
  opacity: 0.6;
}

.page.all-wines .wine-container .single-wine .wine-bottle::after {
  content: '';
  width: 40px;
  height: 2px;
  background-color: #E8D5AC;
  display: block;
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.page.all-wines .wine-container .single-wine .wine-content {
  padding: 10px;
  -webkit-box-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  position: relative;
}

.page.all-wines .wine-container .single-wine .wine-content h4 {
  text-align: center;
  margin: 0 auto 10px;
  font-weight: 300;
  font-size: 20px;
}

.page.all-wines .wine-container .single-wine .wine-content p {
  font-family: "PT Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 40px;
  text-align: center;
}

.page.all-wines .wine-container .single-wine .wine-content a {
  text-align: center;
  padding: 4px 0 5px;
  border-radius: 50px;
  width: 24px;
  background-color: lightcoral;
  color: #fff;
  font-weight: 700;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.page.all-wines .wine-container .single-wine .wine-content a:hover {
  text-decoration: none;
  opacity: 0.7;
}

@media all and (min-width: 768px) {
  .page.all-wines .wine-container .single-wine {
    margin: 0 30px 15px;
    padding-bottom: 40px;
  }
}

@media all and (min-width: 992px) {
  .page.all-wines .wine-container .single-wine {
    width: calc((100/3) - 10px);
  }
}

@media all and (min-width: 1200px) {
  .page.all-wines .wine-container .single-wine {
    width: calc(25% - 10px);
  }
}

/* 8 Single Wine Page Styles */
.page.single-wine {
  position: relative;
  background-color: #F5EEE4;
}

.page.single-wine .wine-info {
  padding: 20px 0 0;
  background: no-repeat center/cover;
  text-align: center;
  position: relative;
}

.page.single-wine .wine-info:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), #FFFFFF);
}

.page.single-wine .wine-info>* {
  position: relative;
  z-index: 3;
}

.page.single-wine .wine-info>.container {
  position: relative;
}

.page.single-wine .wine-info .container {
  padding: 0;
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 992px;
}

.page.single-wine .wine-info .container .title {
  padding: 0 15px 20px;
  max-width: 375px;
  margin: 0 auto;
}

.page.single-wine .wine-info .container .title h1 {
  font-family: "Libre Baskerville", serif;
  line-height: 50px;
  font-size: 44px;
  color: #000000;
  font-weight: 400;
  margin: 0 0 20px;
  text-align: center;
}

.page.single-wine .wine-info .container .title h5 {
  display: none;
}

.page.single-wine .wine-info .container .wine-image {
  position: relative;
  padding: 0;
  margin: 0 auto 30px;
  max-width: 375px;
}

.page.single-wine .wine-info .container .wine-image img {
  width: 100px;
  display: block;
  z-index: 10;
  position: relative;
  margin: 0 auto;
}

.page.single-wine .wine-info .container .wine-image .circle {
  height: 225px;
  width: 225px;
  border-radius: 225px;
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
  display: block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  overflow: hidden;
}

.page.single-wine .wine-info .container .wine-image .circle .circleOverlay {
  width: 100%;
  height: 100%;
  border-radius: 150px;
  opacity: 0.4;
  background-color: #963435;
}

.page.single-wine .wine-info .container .wine-content {
  padding: 0 15px;
  text-align: left;
  max-width: 375px;
  margin: 0 auto;
}

.page.single-wine .wine-info .container .wine-content .award {
  overflow: hidden;
  margin: 0 auto 20px;
  text-align: center;
}

.page.single-wine .wine-info .container .wine-content .award img {
  width: 20px;
  margin: 0 5px 0 0;
  display: inline-block;
  vertical-align: top;
}

.page.single-wine .wine-info .container .wine-content .award p {
  display: inline-block;
  font-weight: 400;
  font-size: 12px;
  margin: 0;
  max-width: calc(100% - 30px);
  line-height: 16px;
  text-align: left;
  font-family: "PT Sans", sans-serif;
}

.page.single-wine .wine-info .container .wine-content .sweetToDry {
  text-align: center;
  margin: 20px auto;
}

.page.single-wine .wine-info .container .wine-content .sweetToDry p {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  position: relative;
  top: 5px;
}

.page.single-wine .wine-info .container .wine-content .sweetToDry p:first-of-type {
  padding-right: 15px;
}

.page.single-wine .wine-info .container .wine-content .sweetToDry p:last-of-type {
  padding-left: 15px;
}

.page.single-wine .wine-info .container .wine-content .sweetToDry .slider {
  height: 4px;
  border-radius: 3px;
  background-color: #C8C8C8;
  display: inline-block;
  width: calc(100% - 96px);
  position: relative;
  vertical-align: middle;
}

.page.single-wine .wine-info .container .wine-content .sweetToDry .slider .divider {
  position: absolute;
  height: 30px;
  width: 2px;
  top: -15px;
  background-color: #C8C8C8;
}

.page.single-wine .wine-info .container .wine-content .sweetToDry .slider .divider:nth-of-type(1) {
  left: 25%;
}

.page.single-wine .wine-info .container .wine-content .sweetToDry .slider .divider:nth-of-type(2) {
  left: 50%;
}

.page.single-wine .wine-info .container .wine-content .sweetToDry .slider .divider:nth-of-type(3) {
  left: 75%;
}

.page.single-wine .wine-info .container .wine-content .sweetToDry .slider .marker {
  position: absolute;
  top: -10px;
  left: calc(100% - 20px);
  height: 25px;
  width: 25px;
  border-radius: 20px;
  background-color: #963435;
}

.page.single-wine .wine-info .container .wine-content p:not(.available_sizes) {
  font-family: "PT Sans", sans-serif;
  line-height: 26px;
  color: #000;
}

.page.single-wine .wine-info .action-bar {
  position: relative;
  padding: 10px 0;
  margin-top: 20px;
}

@media(max-width: 767px) {
  .page.single-wine .wine-info .action-bar {
    margin-top: 0;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .wine-info .action-bar {
    margin-top: 0;
  }
}

.page.single-wine .wine-info .social,
.page.single-wine .wine-info .links {
  display: block;
  overflow: hidden;
  clear: both;
  text-align: center;
  max-width: 375px;
  padding: 10px 0;
}

@media(max-width: 767px) {
  .page.single-wine .wine-info .social {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 100vw;
    background: #f2f1ef;
    padding: 10px 0 !important;
  }

}

@media all and (min-width: 768px) {

  .page.single-wine .wine-info .social,
  .page.single-wine .wine-info .links {
    padding: 10px 15px 10px 10px;
    text-align: left;
    width: 50%;
    float: right;
  }
}

.page.single-wine .wine-info .social .link,
.page.single-wine .wine-info .links .link {
  height: 20px;
  margin: 0 3px;
  display: inline-block;
}

.page.single-wine .wine-info .social .link:hover,
.page.single-wine .wine-info .links .link:hover {
  text-decoration: none;
}

.page.single-wine .wine-info .social .link img,
.page.single-wine .wine-info .links .link img {
  height: 100%;
  cursor: pointer;
  width: auto;
}

.page.single-wine .wine-info .social a.text,
.page.single-wine .wine-info .links a.text {
  font-family: "PT Sans", sans-serif;
  font-size: 12px;
  width: 125px;
  padding: 10px 0;
  text-align: center;
  margin: 0 3px;
  display: inline-block;
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
}

.page.single-wine .wine-info .social a.text.buy-now,
.page.single-wine .wine-info .links a.text.buy-now {
  border: 1px solid #fff;
  background-color: #fff;
  color: #404040;
  background-image: url("/wp-content/themes/sutterhome/images/varietal-page/shopping_cart.png");
  background-position: 20px center;
  background-repeat: no-repeat;
  background-size: 20px auto;
  padding-left: 30px;
  text-decoration: none;
}

.page.single-wine .wine-info .social a.text.buy-now:hover,
.page.single-wine .wine-info .links a.text.buy-now:hover {
  background-color: transparent;
  color: #fff;
}

.page.single-wine .wine-info .social a.text.nutrition,
.page.single-wine .wine-info .social a.text.awards,
.page.single-wine .wine-info .links a.text.nutrition,
.page.single-wine .wine-info .links a.text.awards {
  border: 1px solid #fff;
  color: #fff;
}

.page.single-wine .wine-info .social a.text.nutrition:hover,
.page.single-wine .wine-info .social a.text.awards:hover,
.page.single-wine .wine-info .links a.text.nutrition:hover,
.page.single-wine .wine-info .links a.text.awards:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.37);
}

@media all and (min-width: 992px) {
  .page.single-wine .wine-info .links {
    width: 55%;
    max-width: 427px;
  }
}

.page.single-wine .wine-info .links .accent-block {
  width: 100vw;
  position: absolute;
  left: 0;
  height: 120px;
  z-index: 0;
  top: 0;
}

@media all and (min-width: 768px) {
  .page.single-wine .wine-info .links .accent-block {
    height: 115px;
  }
}

@media all and (min-width: 992px) {
  .page.single-wine .wine-info .links .accent-block {
    height: 75px;
  }
}

.page.single-wine .wine-info .social {
  float: none;
  padding: 0 0 1em 0;
}

@media all and (min-width: 768px) {
  .page.single-wine .wine-info .container {
    padding: 0 52px;
  }
}

@media all and (min-width: 1024px) {
  .page.single-wine .wine-info .container {
    padding: 0 100px;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .wine-info .container .title {
    width: calc(50%);
    float: right;
    padding: 40px 15px 0;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .wine-info .container .title h1 {
    text-align: left;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .wine-info .container .title span {
    display: block;
    text-align: left;
    font-weight: 600;
    font-family: "PT Sans", sans-serif;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 3px;
    line-height: 12px;
    margin: 40px 0 20px;
    position: relative;
    color: #000;
  }

  .page.single-wine .wine-info .container .title span::before {
    content: '';
    width: 14px;
    height: 3px;
    background-color: #963435;
    display: block;
    position: absolute;
    top: -15px;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .wine-info .container .wine-image {
    width: calc(50%);
    float: left;
    margin: 0 0 -80px;
    display: inline-block;
  }
}

@media all and (min-width: 1024px) {
  .page.single-wine .wine-info .container .wine-image {
    margin: 0 auto 3rem;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .wine-info .container .wine-image img {
    width: 150px;
  }
}

@media all and (min-width: 1024px) {
  .page.single-wine .wine-info .container .wine-image img {
    width: 151px;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .wine-info .container .wine-image .circle {
    height: 255px;
    width: 255px;
    bottom: 130px;
  }
}

@media all and (min-width: 1024px) {
  .page.single-wine .wine-info .container .wine-image .circle {
    height: 345px;
    width: 345px;
    bottom: 150px;
    border-radius: 350px;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .wine-info .container .wine-content {
    width: calc(50%);
    display: inline-block;
    float: right;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .wine-info .container .wine-content .award {
    text-align: left;
  }
}

/* 8.1 Single Wine Page Navigation Arrow Styles */
.page.single-wine .carousel-navigation {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.page.single-wine .carousel-navigation a {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background-color: #ffffff;
  display: block;
  position: absolute;
  top: calc(30% - 32px);
}

.page.single-wine .carousel-navigation a::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 11px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.page.single-wine .carousel-navigation a.prev {
  left: 9px;
}

.page.single-wine .carousel-navigation a.prev::after {
  right: 9px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.page.single-wine .carousel-navigation a.next {
  right: 10px;
}

.page.single-wine .carousel-navigation a.next::after {
  left: 9px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media all and (min-width: 768px) {
  .page.single-wine .carousel-navigation a {
    top: calc(50% - 32px);
  }
}

@media all and (min-width: 1200px) {
  .page.single-wine .carousel-navigation a.prev {
    left: 0;
  }
}

@media all and (min-width: 1200px) {
  .page.single-wine .carousel-navigation a.next {
    right: 0;
  }
}

/* 8.2 Related Content Styles */
.page.single-wine .related-content {
  padding: 70px 0;
}

.page.single-wine .family-of-wines-heading {
  margin-bottom: 30px;
  font-size: 30px;
  line-height: 50px;
  color: #676767;
  font-family: "Libre Baskerville", sans-serif;
  text-align: center;
  /* text-shadow: 0px 3px 6px rgb(0, 0, 0); */
}

/* 8.2 Related Wines Styles */
.page.single-wine .related-wines {
  margin: 0 auto 80px;
}

.page.single-wine .related-wines .container {
  max-width: 675px;
  width: 100%;
  padding: 30px 0 75px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.page.single-wine .related-wines .container a.wine {
  padding: 0;
  float: left;
  width: calc(100%/3);
  text-align: center;
  position: relative;
  vertical-align: top;
  color: black;
  display: flex;
  display: -ms-flexbox;
  -ms-flex-align: flex-end;
  align-items: flex-end;
  justify-content: center;
}

.page.single-wine .related-wines .container a.wine:hover {
  text-decoration: none;
}

.page.single-wine .related-wines .container a.wine:hover .title {
  visibility: visible;
}

.page.single-wine .related-wines .container a.wine:hover .title p {
  color: black;
}

.page.single-wine .related-wines .container a.wine img {
  display: block;
  width: 100%;
  max-width: 70px;
  margin: 0 auto;
  padding: 0 5px;
}

.page.single-wine .related-wines .container a.wine .title {
  margin: 20px auto 0;
  padding: 15px 0 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -65px;
}

.page.single-wine .related-wines .container a.wine .title:before {
  content: '';
  height: 3px;
  width: 14px;
  display: block;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.page.single-wine .related-wines .container a.wine .title h4 {
  text-align: center;
  padding-top: 10px;
  font-size: 12px;
  line-height: 16px;
}

.page.single-wine .related-wines .container .carousel-navigation a {
  width: 22px;
  height: 22px;
  border-radius: 22px;
  top: calc(50% - 22px);
}

.page.single-wine .related-wines .container .carousel-navigation a::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 8px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.page.single-wine .related-wines .container .carousel-navigation a.prev {
  left: 0;
}

.page.single-wine .related-wines .container .carousel-navigation a.prev::after {
  right: 6px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.page.single-wine .related-wines .container .carousel-navigation a.next {
  right: 0;
}

.page.single-wine .related-wines .container .carousel-navigation a.next::after {
  margin-left: 6px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media all and (min-width: 1024px) {
  .page.single-wine .related-wines {
    background: url("/wp-content/themes/sutterhome/images/wines_line2.png") repeat-x left center;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .related-wines .container a.wine {
    padding: 0 20px;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .related-wines .container a.wine img {
    max-width: 75px;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .related-wines .container a.wine .title {
    visibility: hidden;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .related-wines .container a.wine .title h4 {
    font-size: 20px;
    line-height: 24px;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .related-wines .container .carousel-navigation a {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    top: calc(50% - 32px);
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .related-wines .container .carousel-navigation a::after {
    width: 10px;
    height: 10px;
    top: 11px;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .related-wines .container .carousel-navigation a.prev::after {
    right: 8px;
  }
}

@media all and (min-width: 768px) {
  .page.single-wine .related-wines .container .carousel-navigation a.next::after {
    margin-left: 8px;
  }
}

.page.all-wines .wine-container.cocktail .single-wine::before {
  display: block;
  position: absolute;
  top: 8%;
  /*right: 0;*/
  width: 40%;
  height: 20%;
  content: "";
  background: url(../../uploads/2022/03/new.svg) no-repeat top right;
  background-size: contain;
}

/*.page.all-wines .wine-container.fruit .single-wine::before {
  display: block;
  position: absolute;
  top: 8%;
  right: 0;
  width: 40%;
  height: 20%;
  content: "";
  background: url(../../uploads/2021/03/SHW_FamilyOfWines_NewBug-min.png) no-repeat top right;
  background-size: contain;
}*/

/* 9 Recipes and Pairings Page Styles */
.page.recipes-pairings div.fancy, .page.single-post div, .page.blog div.fancy, .page.privacy-policy div.fancy {
  font-size: 13px; }

.page.recipes-pairings input,
.page.single-post input,
.page.blog input,
.page.privacy-policy input {
  font-size: 18px;
  -webkit-box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.05);
  border-width: 1px;
  background-color: #FFFFFF;
  text-align: center;
  border-style: solid;
  border-radius: 70px;
  height: 50px;
  line-height: 18px;
  border-color: #919191;
  color: #000000;
  padding: 15px 0;
  display: block;
  position: relative;
  font-weight: 400;
  font-family: "Libre Baskerville", serif;
  padding: 0 20px;
  margin: 0 auto;
}

.page.privacy-policy .tfelegal p a {
  color: #135A97; /* made links slightly darker blue to fix contrast issue (accessibility page) */
}

.page.privacy-policy p a, .page.privacy-policy a {
  color: #135A97; /* fixed link contrast issue for contact us page*/
}

.page.privacy-policy h2.fancy span, .page.privacy-policy.visit-us div.fancy span {
  font-family: "PT Sans", sans-serif;
}

/* This styling fixed contrast issues for heading elements (Ex. "Visit Us" or "Contact Us") */
.page.privacy-policy h3.contact-heading, .page.privacy-policy.visit-us .post-content h3  {
  font-size: 24px;
  line-height: 50px;
  color: rgba(0, 0, 0, 0.6);
  font-family: "Libre Baskerville", serif;
  text-align: center;
}

.page.recipes-pairings input#av_verify,
.page.single-post input#av_verify,
.page.blog input#av_verify,
.page.privacy-policy input#av_verify {
  font-family: "PT Sans", sans-serif;
  width: auto;
  height: auto;
}

.page.recipes-pairings input::-webkit-input-placeholder,
.page.single-post input::-webkit-input-placeholder,
.page.blog input::-webkit-input-placeholder,
.page.privacy-policy input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #000000;
}

.page.recipes-pairings input::-moz-placeholder,
.page.single-post input::-moz-placeholder,
.page.blog input::-moz-placeholder,
.page.privacy-policy input::-moz-placeholder {
  /* Firefox 19+ */
  color: #000000;
}

.page.recipes-pairings input:-ms-input-placeholder,
.page.single-post input:-ms-input-placeholder,
.page.blog input:-ms-input-placeholder,
.page.privacy-policy input:-ms-input-placeholder {
  /* IE 10+ */
  color: #000000;
}

.page.recipes-pairings input:-moz-placeholder,
.page.single-post input:-moz-placeholder,
.page.blog input:-moz-placeholder,
.page.privacy-policy input:-moz-placeholder {
  /* Firefox 18- */
  color: #000000;
}

.page.recipes-pairings input:focus, .page.single-post input:focus, .page.blog input:focus, .page.privacy-policy input:focus {
  outline: solid black 1px;} /* Added outline to input fields for accessibility */

.page input[type="submit"] {
  width: auto;
  border-radius: unset;
  margin-top: 20px;
  background-color: #000;
  color: #fff;
  text-transform: uppercase;
}

.page input[type="submit"]:hover {
  background-color: #fff;
  color: #000;
}

.page input[type="submit"]:focus {
  outline-offset: 2px;
} /* Added space between outline and submit button for visibility */


.page.recipes-pairings.fancy {
  color: #000;

}

.page.recipes-pairings .overlay,
.page.our-roots .overlay { /* Overlay styling for contrast */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  
}

.page.recipes-pairings .callout, .page.single-post .callout, .page.blog .callout, .page.privacy-policy .callout {
  height: 450px; }

 .darken-bg {
  background-color: rgba(0, 0, 0, 0.08);
  height: 100%;
  width: 100%;
}

.darken-bg h1, .darken-bg span, .darken-bg p {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}

.page.page.privacy-policy .darken-bg, .page.blog .darken-bg{
  display: flex;
  align-items: center;
  justify-content: center;
}

.page.recipes-pairings .callout .text.centered,
.page.single-post .callout .text.centered,
.page.blog .callout .text.centered,
.page.privacy-policy .callout .text.centered {
  height: 130px;

}

@media all and (min-width: 768px) {

  .page.recipes-pairings input:not(#footer input),
  .page.single-post input:not(#footer input),
  .page.blog input:not(#footer input),
  .page.privacy-policy input:not(#footer input) {
    width: 500px;
  }
}

/* 10. Single Post Styles */
.page.single-post {
  padding-top: 0;
}

.page.single-post .post-content {
  padding: 15px 30px 30px;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
  background: linear-gradient(white 0, white 210px, rgba(255, 255, 255, 0) 530px);
}

.page.single-post .post-content.video-active {
  margin-top: 0;
  -webkit-transition: margin-top 2s;
  transition: margin-top 2s;
}

@media all and (min-width: 900px) {
  .page.single-post .post-content {
    margin: -120px auto 60px;
  }
}

.page.single-post h1 {
  color: #736357;
  text-align: left;
  margin-bottom: 30px;
  font-size: 30px;
  line-height: 34px;
  font-family: "Libre Baskerville", serif;
}

.page.single-post h2 {
  font-size: 24px;
  line-height: 30px;
  color: #736357;
  text-align: left;
}

.page.single-post h4.post-category {
  font-size: 12px;
  text-transform: uppercase;
  color: #404040;
  font-family: "PT Sans", sans-serif;
  text-align: center;
  margin: 0 auto 30px;
}

.page.single-post h4.post-category a {
  color: inherit;
  text-decoration: underline;
}

.page.single-post .image-container {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  display: block;
  position: relative;
}

.page.single-post .image-container .image {
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  padding: 0 0 50%;
  z-index: 2;
  position: relative;
}

.page.single-post .image-container .image.video-active {
  opacity: 0;
  padding-bottom: 56.25%;
  z-index: 0;
}

.page.single-post .image-container .image.video-active .video {
  padding-bottom: 56.25%;
  transition: padding-bottom 2s;
}

.page.single-post .image-container .video {
  width: 100%;
  padding-bottom: 50%;
  height: 0;
  top: 0;
  z-index: 1;
  position: absolute;
  background: #000000;
}

.page.single-post .image-container .video video,
.page.single-post .image-container .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page.single-post .image-container .play-button,
section.single .play-button {
  display: block;
  background: url("/wp-content/themes/sutterhome/images/play-button.png") no-repeat 50% 50%;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: pointer;
}

.page.single-post .post-meta {
  text-transform: uppercase;
  text-align: left;
}

.page.single-post .post-meta small {
  font-size: 12px;
  color: #000000;
}

.page.single-post .social {
  text-align: left;
  height: 20px;
  margin-bottom: 50px;
}

.page.single-post .content {
  font-family: "Libre Baskerville", serif;
  padding-bottom: 50px;
}

.page.single-post .content ul li {
  margin-bottom: 0.3rem;
}

.page.single-post .content .square-spacer {
  display: block;
  width: 26px;
  height: 22px;
  background: #000000;
  margin: 50px auto;
}

.page.single-post .content .line-spacer {
  display: block;
  width: 65%;
  height: 1px;
  background: #000000;
  margin: 50px auto;
}

.page.single-post .content blockquote {
  text-align: center;
  margin: 80px 30px;
  clear: both;
}

.page.single-post .content blockquote p {
  font-family: "Libre Baskerville", serif;
  font-size: 34px;
  line-height: 46px;
  font-style: italic;
}

.page.single-post .content blockquote:before,
.page.single-post .content blockquote:after {
  display: block;
  content: '';
  width: 65%;
  height: 1px;
  background: #000000;
  position: relative;
  margin: 0 auto;
}

.page.single-post .content blockquote:before {
  top: -30px;
}

.page.single-post .content blockquote:after {
  bottom: -30px;
}

.page.single-post .content figcaption {
  font-family: "Libre Baskerville", serif;
  font-size: 13px;
  line-height: 28px;
  margin-bottom: 30px;
}

.page.single-post .content p {
  line-height: 30px;
  font-size: 16px;
  margin-bottom: 10px;
  font-family: "Libre Baskerville", serif;
}

.page.single-post .content p strong {
  font-weight: 700;
}

.page.single-post .content p em {
  font-style: italic;
}

.page.single-post .content .aligncenter {
  margin: 30px auto;
  width: 100% !important;
  height: auto;
}

.page.single-post .content .alignleft {
  margin: 30px auto 30px;
  max-width: 100%;
}

.page.single-post .content .aligncenter img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.page.single-post .content .wp-caption-text {
  font-family: "PT Sans", sans-serif;
  color: #000000;
  text-transform: uppercase;
  font-size: 13px;
}

.page.single-post .content .wp-caption-text::before {
  content: '';
  float: left;
  display: block;
  margin: 6px 5px 0 0;
  width: 20px;
  height: 15px;
  background: url("/wp-content/themes/sutterhome/images/icons/camera-caption.png") no-repeat 50% 50%;
  background-size: contain;
}

.page.single-post .content p.prep-info {
  font-size: 18px;
  font-family: "PT Sans", sans-serif;
}

.page.single-post .content .body-content {
  padding-top: 15px;
}

.page.single-post .content h4 {
  margin-top: 30px;
  font-size: 23px;
  line-height: 46px;
  font-weight: 700;
  font-family: "Libre Baskerville", serif;
}

.page.single-post .content ul {
  padding-left: 20px;
  margin-top: 10px;
  margin-bottom: 30px;
}

.page.single-post .content ul li {
  font-size: 16px;
  font-family: "Libre Baskerville", serif;
  line-height: 30px;
  position: relative;
  margin-bottom: 0.5rem;
}

.page.single-post .content ul li:before {
  content: '';
  position: absolute;
  left: -15px;
  top: 10px;
  margin: auto;
  height: 3px;
  width: 3px;
  border-radius: 50%;
  background-color: #000;
}

.page.single-post .content ol {
  list-style: decimal;
  padding-left: 15px;
  margin-top: 10px;
}

.page.single-post .content ol li {
  padding-left: 10px;
  font-size: 16px;
  line-height: 24px;
  position: relative;
  font-family: "Libre Baskerville", serif;
}

.page.single-post .content img {
  width: 100%;
}

.page.single-post h5 {
  color: #736357;
  margin-bottom: 30px;
}

.page.single-post .tile-section {
  margin-bottom: 40px;
  padding: 0;
}

.page.single-post .callout {
  margin-bottom: 0;
}

@media all and (min-width: 768px) {
  .page.single-post h2 {
    margin-bottom: 30px;
    font-size: 30px;
    line-height: 34px;
  }
}

@supports (perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) {
  .page.single-post .image-container {
    background-attachment: fixed;
  }
}

@media all and (min-width: 768px) {
  .page.single-post .content figcaption {
    font-size: 16px;
  }
}

@media all and (min-width: 768px) {
  .page.single-post .content .alignleft {
    margin: 10px 20px 50px 0;
    float: left;
  }
}

@media all and (min-width: 992px) {
  .page.single-post .tile-section .tile {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 235px;
    flex: 0 0 235px;
  }
}

/* 11. Blog Page Styles */
.page.blog .hero {
  margin-bottom: 5px;
}

.page.blog .tile-section {
  margin-bottom: 30px;
}

.page.blog .tile-section .tile .text {
  padding-top: 30px;
}

.page.blog .tile-section.triple .tile {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 265px;
  flex: 0 0 265px;
  width: 265px;
}

.page.blog .tile-section.triple .tile.wide {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 585px;
  flex: 0 0 585px;
  width: 585px;
  height: 466px;
}

.page.blog .section-divider {
  padding-top: 0;
}

.page.blog.search {
  padding-top: 100px;
}

/* 12. Privacy Policy Page Styles */

/* added left right padding to .page >.container */
.page.privacy-policy>.container {
  padding-left: 20px;
  padding-right: 20px;
}

.page.privacy-policy>.container h4 {
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: 800;
}

.page.privacy-policy>.container p,
.page.privacy-policy>.container li {
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: 1.3rem;
}

/* increased left-padding rem */
.page.privacy-policy>.container ul,
.page.privacy-policy>.container ol {
  padding-left: 2.5rem;

}

.page.privacy-policy>.container ul li {
  list-style-type: circle;

}

.page.privacy-policy>.container ol.uppercase {
  list-style: upper-alpha;
}

/* 13. Build a Better Burger Page Styles */
.page .promo-text {
  max-width: 750px;
  text-align: center;
}

.page .promo-text+.tile-section {
  margin-top: 0;
  padding-bottom: 0;
}

@media all and (min-width: 768px) {
  .page .promo-text {
    text-align: left;
    margin-top: 50px;
  }
}

/* 14. Sutter Home for Hope Page Styles */
.page.sutter-home-for-hope h5 {
  text-align: left;
  color: #D4145A;
  font-family: "Libre Baskerville", serif;
  font-size: 24px;
  position: relative;
  margin-bottom: 20px;
  line-height: 34px;
}

.page.sutter-home-for-hope h5.styled {
  margin-bottom: 0;
}

.page.sutter-home-for-hope h5.styled:before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  width: 20px;
  border: 2px solid #D4145A;
}

.page.sutter-home-for-hope .content {
  padding: 0 20px;
}

.page.sutter-home-for-hope .content .blurb {
  margin-bottom: 30px;
}

.page.sutter-home-for-hope .content img {
  margin: 30px auto;
  display: block;
  max-width: 100%;
}

.page.sutter-home-for-hope .section-divider h4.line-accent span {
  color: #D4145A;
}

.page.sutter-home-for-hope .section-divider h4.line-accent:after {
  border-top: 2px solid #D4145A;
}

.page.sutter-home-for-hope .section-divider p {
  color: #D4145A;
}

@media all and (min-width: 768px) {
  .page.sutter-home-for-hope .content .blurb {
    padding: 0 40px;
    margin-bottom: 0;
  }

  .page.sutter-home-for-hope .content .blurb:first-of-type {
    padding-left: 0;
  }

  .page.sutter-home-for-hope .content .blurb:nth-of-type(2n) {
    padding-right: 0;
  }
}

/* 15. Our Roots Page Styles */
.center-title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.page.our-roots .container .timeline-object a:hover {
  color: #135A97;
}

.page.our-roots .container .timeline-object a {
  color: #135A97;
}

.page.our-roots .container {
  max-width: 768px;
  padding: 25px 15px;
}

.page.our-roots .container h2 {
  font-size: 28px;
  line-height: 30px;
  text-align: center;
  margin: 0 0 60px;
  color: #736357;
}

.page.our-roots .container h6.fancy {
  color: #000;
  margin-top: 20px;
  margin-bottom: 0;
}

.page.our-roots .container h6.fancy span {
  font-size: 28px;
}

.page.our-roots .container h6.fancy span:before,
.page.our-roots .container h6.fancy span:after {
  border-color: #a71f28;
}

.page.our-roots .container .our-history .timeline {
  margin: 40px auto;
}

.page.our-roots .container .our-history .timeline .timeline-object {
  clear: both;
  padding: 0 20px;
  margin: 20px auto;
}

.page.our-roots .container .our-history .timeline .timeline-object h3 { /* Changed h4 to h3 */
  margin: 0 0 20px;
  text-align: center;
  font-size: 50px;
  line-height: 56px;
  color: #736357;
  font-family: "Libre Baskerville", serif;
}

.page.our-roots .container .our-history .timeline .timeline-object .image {
  margin: 0 0 20px;
}

.page.our-roots .container .our-history .timeline .timeline-object .image .circle {
  display: none;
}

.page.our-roots .container .our-history .timeline .timeline-object .image img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 300px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.page.our-roots .container .our-history .timeline .timeline-object p {
  font-family: "PT Sans", sans-serif;
  line-height: 26px;
  font-size: 15px;
}

.page.our-roots .container .our-history .timeline .timeline-object:last-of-type .image {
  border: none;
}

@media all and (min-width: 768px) {
  .page.our-roots .container .our-history .timeline .timeline-object {
    padding: 0;
    margin: 0;
  }
}

@media all and (min-width: 768px) {
  .page.our-roots .container .our-history .timeline .timeline-object h3 { /* Changed h4 to h3 */
    display: inline-block;
    width: 50%;
    padding-right: 40px;
    text-align: right;
  }
}

@media all and (min-width: 768px) {
  .page.our-roots .container .our-history .timeline .timeline-object .image {
    margin: 0;
    float: right;
    border-left: 2px solid #a71f28;
    min-height: 300px;
    width: 50%;
    padding: 10px 20px 75px;
    position: relative;
  }
}

@media all and (min-width: 768px) {
  .page.our-roots .container .our-history .timeline .timeline-object .image .circle {
    background-color: #5e4e39;
    display: block;
    position: absolute;
    top: 0;
    left: -11px;
    width: 20px;
    height: 20px;
    border-radius: 50px;
  }
}

@media all and (min-width: 768px) {
  .page.our-roots .container .our-history .timeline .timeline-object p {
    display: inline-block;
    width: 50%;
    margin-bottom: 0;
    padding-right: 40px;
  }
}

/* 16. Find Our Wine Styles */

/* mik mak */

.page.locations {
  padding-top: 100px;
  position: relative;
  min-height: 700px;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.page.locations:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

.page.locations .locator {
  width: 90%;
  min-height: 400px;
  max-width: 1000px;
  position: relative;
  z-index: 1;
}

.page.locations .locator .left,
.page.locations .locator .right {
  height: 670px;
}

.page.locations .locator .left {
  background-image: url("/wp-content/themes/sutterhome_new/images/big-lighter.jpg");
  position: relative;
}

@media all and (min-width: 768px) {
  .page.locations .locator .left:before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    height: 100%;
    border: 1px solid #404040;
  }
}

.page.locations .locator .right {
  background-image: url("/wp-content/themes/sutterhome/images/locations/SHW_FOW_Home_Delivery.png");
  background-size: cover;
  position: relative;
}

.page.locations .locator .right:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.page.locations .locator h1 {
  font-size: 28px;
  line-height: 44px;
  color: #96001E;
  text-align: center;
  max-width: 300px;
  margin: 30px auto 0;
}

.page.locations .locator p {
  font-size: 14px;
  text-align: center;
}

.page.locations .locator .sort {
  padding: 15px 0;
  text-align: left;
  clear: both;
}

.page.locations .locator .sort.half {
  width: 50%;
  float: left;
  padding-right: 10px;
  padding-bottom: 0;
}

.page.locations .locator .sort .select {
  max-width: 100%;
  font-family: "Libre Baskerville", serif;
  background-position: calc(100% - 30px) 25px, calc(100% - 30px) 27px, calc(100% - 25px) 25px, calc(100% - 25px) 27px, calc(100% - 20px) 18px;
  text-align-last: left;
  padding-left: 20px;
  color: #000000;
}

.page.locations .locator input[type="text"] {
  padding: 15px 20px;
  width: 100%;
  font-size: 20px;
  color: #000;
  margin-bottom: 30px;
  font-family: "Libre Baskerville", serif;
  border: 1px solid #D1CDCD;
}

.page.locations .locator input[type="text"]#zip {
  width: calc(50% - 15px);
  float: right;
}

.page.locations .locator input[type="text"]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #000000;
}

.page.locations .locator input[type="text"]::-moz-placeholder {
  /* Firefox 19+ */
  color: #000000;
}

.page.locations .locator input[type="text"]:-ms-input-placeholder {
  /* IE 10+ */
  color: #000000;
}

.page.locations .locator input[type="text"]:-moz-placeholder {
  /* Firefox 18- */
  color: #000000;
}

.page.locations .locator input[type="text"].half {
  width: 50%;
  float: left;
  margin-top: 15px;
}

.page.locations .locator input[type="button"] {
  border: 2px solid #000000;
  background-color: transparent;
  padding: 10px 40px;
  display: block;
  color: #000;
  margin: 20px auto;
}

.page.locations .locator input[type="button"]:hover {
  border-color: transparent;
  background-color: #000000;
  color: #fff;
}

.page.locations .locator .text {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  z-index: 1;
  height: 100%;
  padding: 20px 0;
}

.page.locations .locator .text h1 {
  color: #fff;
  max-width: 325px;
  font-size: 28px;
  margin: 0 auto;
  line-height: 56px;
}

.page.locations .locator .text .bottom {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.page.locations .locator .text p {
  color: #fff;
  max-width: 300px;
  margin: 0 auto 30px;
}

.page.locations .locator .text a {
  border: 2px solid #ffffff;
  padding: 10px 40px 10px 60px;
  display: inline-block;
  color: #ffffff;
  background-image: url("/wp-content/themes/sutterhome/images/locations/SHW_FOW_Shopping_Cart.png");
  background-size: 20px auto;
  background-position: 30px center;
  background-repeat: no-repeat;
}

.page.locations .locator .text a:hover {
  border-color: transparent;
  background-color: #ffffff;
  color: #000;
  text-decoration: none;
}

@media all and (min-width: 768px) {
  .page.locations {
    height: calc(100vh - 270px);
  }
}

@media all and (min-width: 768px) {
  .page.locations .locator {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media all and (min-width: 768px) {

  .page.locations .locator .left,
  .page.locations .locator .right {
    padding: 30px 30px;
    height: auto;
  }
}

.locator #shopForm {
  margin-top: 30px;
}

.locator #shopForm .title,
.locator #shopForm #brand {
  display: none;
}

.locator #shopForm select {
  width: 100%;
  height: 60px;
  margin-bottom: 30px;
  border: 1px solid #ccc;
  font-family: "Libre Baskerville", serif;
  font-size: 20px;
  padding-left: 15px;
}

.locator #shopForm select#state {
  width: calc(50% - 15px);
  float: left;
}

.locator #shopForm #wine-finder {
  max-height: 100% !important;
  overflow-y: inherit !important;
  overflow-x: inherit !important;
}

.locator #shopForm #wine-finder ol {
  height: 215px;
  overflow-y: scroll;
  margin: 20px 0;
}

/* 17. Nutrition Page Styles */
.page.nutrition {
  text-align: center;
}

.page.nutrition small {
  font-size: 14px;
  margin-bottom: 50px;
  display: block;
  font-family: "PT Sans", sans-serif;
}

.page.nutrition .varietal-list {
  display: inline-block;
  padding-bottom: 100px;
}

.page.nutrition .varietal-list .varietal {
  border-bottom: 1px solid #c7b299;
  padding: 20px 20px;
}

.page.nutrition .varietal-list .varietal.header {
  font-weight: bold;
  font-style: italic;
}

.page.nutrition .varietal-list .varietal:last-of-type {
  border: none;
}

.page.nutrition .varietal-list span {
  padding: 0 20px;
  font-family: "PT Sans", sans-serif;
  display: block;
  margin: 20px 0;
}

.page.nutrition .varietal-list span:first-of-type {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  width: 175px;
  display: inline-block;
  font-size: 20px;
}

.page.nutrition .varietal-list .varietal.header span {
  font-size: 14px;
}

.page.nutrition .varietal-list .varietal.header span:first-of-type {
  width: 175px;
}

.page .tile-section.related-posts {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 50px;
  clear: both;
}

@media all and (min-width: 768px) {
  .page.nutrition small {
    font-size: 16px;
  }
}

@media all and (min-width: 768px) {
  .page.nutrition .varietal-list span {
    display: inline;
    width: 25%;
    margin: 0;
  }
}

.tile-section.related-posts h5 {
  display: block;
  width: 100%;
  flex: none;
}

.page .social-feed-container {
  padding-bottom: 100px;
}

.page .social-feed-container.manual {
  padding: 20px;
  margin: 0 auto;
}

.page .social-feed-container.manual .social-image {
  margin-bottom: 30px;
}

.page .social-feed-container.manual .social-image a:hover img {
  -webkit-box-shadow: 0px 0px 20px 0px #ccc;
  -moz-box-shadow: 0px 0px 20px 0px #ccc;
  box-shadow: 0px 0px 20px 0px #ccc;
}

.page .social-feed-container.manual .social-image a img {
  width: 100%;
}

.page.better-burger .social-feed-container.manual {
  padding-top: 0;
}

@media all and (min-width: 768px) {
  .page .social-feed-container.manual .social-image {
    display: inline-block;
    width: calc(33.333% - 20px);
    margin: 0 10px;
  }
}

/* 18. Footer Styles */
footer {
  padding: 20px 0 20px;
  background: #fff url("/wp-content/themes/sutterhome/images/footer/footer-bg.png") no-repeat center;
  background-size: cover;
  position: relative;
  z-index: 200;
}

footer .container {
  max-width: 992px;
}

footer .container .logo {
  padding-bottom: 10px;
}

footer .container .logo img {
  width: 140px;
  display: block;
  margin: 0 auto;
}

footer .container .logo small {
  font-size: 10px;
  clear: both;
  color: #b4b4b4;
  max-width: 150px;
  display: block;
  text-align: left;
  margin: 0 auto;
  text-align: center;
  line-height: 12px;
  font-family: "PT Sans", sans-serif;
}

footer .container .links {
  text-align: center;
  padding-bottom: 10px;
  margin: 30px 0;
}

footer .container .links h3 {
  font-size: 14px;
  font-family: "PT Sans", sans-serif;
}

footer .container .links ul {
  margin-top: 10px;
}

footer .container .links ul li {
  padding: 5px 0;
}

footer .container .links ul li a {
  color: #6F6F6F;/* made links in footer darker to improve contrast */
  font-size: 13px;
  font-family: "PT Sans", sans-serif;
  display: inline-block;
  margin: 0.5em 0;
}

@media all and (min-width: 768px) {
  footer {
    padding: 80px 0 80px;
  }
}

@media all and (min-width: 768px) {
  footer .container .logo small {
    text-align: left;
  }
}

@media all and (min-width: 768px) {
  footer .container .links {
    text-align: left;
    padding-bottom: 0;
    margin: 0;
  }
}

/* 19. Social Widget Styles */
.social {
  text-align: center;
  padding-bottom: 10px;
}

.social-widget {
  text-align: center;
  padding-bottom: 10px;
  padding: 20px 0 40px;
}

@media all and (min-width: 768px) {

  .social,
  .social-widget {
    text-align: left;
    padding-bottom: 0;
  }
}

.social h3 {
  font-family: "PT Sans", sans-serif;
  font-size: 14px;
}

.social ul {
  margin: 10px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  max-width: 250px;
}

.social ul li {
  width: 20px;
  height: 20px;
  text-indent: -999999px;
  display: inline-block;
  background: url("/wp-content/themes/sutterhome/images/footer/footer-social.png") no-repeat;
  background-size: 100px auto;
}

.social ul li.facebook {
  background-position: 7px 0;
}

.social ul li.twitter {
  background-position: -12px 0;
}

.social ul li.youtube {
  height: auto;
  margin-bottom: 0;
  background-position: -35px 0;
}

.social ul li.pinterest {
  background-position: -58px 0;
}

.social ul li.instagram {
  background-position: -81px 0;
}

.social ul li a {
  width: 100%;
  height: 100%;
  display: block;
}

@media all and (min-width: 768px) {
  footer .social ul {
    margin-right: 0;
    margin-left: 0;
  }
}

@media all and (min-width: 768px) {
  .social ul li.facebook {
    margin-left: -10px;
  }
}

/* 20. Age Gate Overlay Styles */
#av-overlay-wrap {
  background: rgba(255, 255, 255, 0.9);
}

#av-overlay {
  background-image: url("/wp-content/uploads/2017/10/Welcome-Mat_Mobile_Final.png");
  background-size: cover;
  text-align: center;
  padding-top: 0px;
  width: calc(100% - 0px);
  overflow: hidden;
  background-position: center;
  background-size: cover;
  height: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

#av-overlay .contain img {
  margin-bottom: 50px;
  width: 132px;
}

#av-overlay p {
  font-family: "PT Sans", sans-serif;
  color: #fff;
  font-size: 14px;
  line-height: 18px;
}

#av-overlay form label {
  display: block;
}

#av-overlay form input[type="submit"] {
  padding: 20px 50px;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  font-size: 20px;
}

#av-overlay small {
  font-size: 11px;
  font-family: "PT Sans", sans-serif;
  display: block;
  color: #fff;
  max-width: 140px;
  margin: 20px auto 0;
}

@media all and (min-width: 768px) {
  #av-overlay {
    background-image: url("/wp-content/uploads/2017/10/SHW_Age_Fate_Final.png");
    box-shadow: none;
    padding-top: 0px;
    background-position: right top;
    background-repeat: no-repeat;
    max-width: 800px;
    padding-right: 15px;
    left: 0;
    right: 0;
  }
}

@media all and (min-width: 768px) {
  #av-overlay .contain {
    width: 220px;
    float: right;
  }
}

/* 21. Very page specific styles*/
.page.privacy-policy h6.fancy span:before,
.page.privacy-policy h6.fancy span:after {
  /*  border-bottom: 2px solid #F195CB; */
}

.page.privacy-policy .container iframe {
  width: 100%;
}

.alm-btn-wrap {
  margin: 0 15px;
}

.alm-listing li {
  padding-left: 0;
}

.archive .page .hero {
  margin-bottom: 100px;
}

.page.attachment-page {
  padding: 100px 0 100px 0;
  text-align: center;
}

.page.attachment-page a {
  display: inline-block;
}

/* 22. 404 Page Styles */
.page.blog.search.fourOhFour {
  padding-top: 0;
  text-align: center;
}

.page.blog.search.fourOhFour .color-hero .container {
  max-width: 800px;
}

@media all and (min-width: 768px) {
  .page.blog.search.fourOhFour .color-hero .container {
    display: flex;
    align-items: center;
  }
}

.page.blog.search.fourOhFour .color-hero .container img {
  width: 100%;
  max-width: 200px;
  margin: 50px 20px;
}

@media all and (min-width: 768px) {
  .page.blog.search.fourOhFour .color-hero .container img {
    float: left;
    margin: 70px 20px;
  }
}

.page.blog.search.fourOhFour .color-hero .container h2 {
  font-family: 'PT Sans', sans-serif;
  font-size: 36px;
  color: #fff;
  margin: 0 0 30px 0;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}

@media all and (min-width: 768px) {
  .page.blog.search.fourOhFour .color-hero .container h2 {
    text-align: left;
    margin: 0;
    font-size: 54px;
  }
}

@media all and (min-width: 992px) {
  .page.blog.search.fourOhFour .color-hero .container h2 {
    font-size: 54px;
  }
}

.page.blog.search.fourOhFour p.extra {
  text-align: center;
  font-size: 19px;
  line-height: 29px;
  font-family: baskerville-urw, serif;
  font-weight: 400;
}

.page.blog.search.fourOhFour h6.fancy span:before,
.page.blog.search.fourOhFour h6.fancy span:after {
  border-color: #F195CB;
}

/* blog pro styles */
.single-post .body-content .listing div {
  display: block;
  clear: both;
  margin-bottom: 30px;
}

.single-post .body-content .listing.artful div div {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

.single-post .body-content .listing.artful div div:first-child {
  width: 240px;
  height: 240px;
  overflow: hidden;
  margin: 0 30px 0 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.single-post .body-content .listing.artful div div:last-child {
  width: calc(100% - 280px);
}

.single-post .body-content .listing.artful div div:last-child p:nth-child(1) {
  font-size: 1em;
  font-style: italic;
  margin-bottom: 0.6em;
  line-height: 1em;
  color: #777777;
}

.single-post .body-content .listing.artful div div:last-child p:nth-child(2) {
  font-size: 1.4em;
  line-height: 1em;
}

.single-post .body-content .listing.artful div div:last-child p:nth-child(3) {
  font-size: 1.2em;
  font-style: italic;
  line-height: 1em;
}

.single-post .body-content .listing.artful div div:last-child p:nth-child(4) {
  font-size: 1.3em;
}

@media (max-width: 600px) {
  .single-post .body-content .listing.artful div div {
    display: block;
  }

  .single-post .body-content .listing.artful div div:first-child {
    height: auto;
    padding-bottom: 56.25%;
    width: 100%;
    margin: 0 0 30px 0;
  }

  .single-post .body-content .listing.artful div div:last-child {
    width: 100%;
  }
}

.wrap-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.img-print {
  display: none;
  height: 0;
  width: 0;
}

.grey-bg {
  background-color: #CCC;
}

/* BBB Overrides */
.page.build-a-better-burger .video-container,
.page.specialty .video-container {
  position: relative;
  height: auto;
  /*620px;*/
  overflow: hidden;
}

.page.build-a-better-burger .video-container .graphic,
.page.specialty .video-container .graphic {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  width: 320px;
  height: 220px;
  margin: auto;
}

.page.build-a-better-burger .video-container .video,
.page.build-a-better-burger .video-container .youtube,
.page.specialty .video-container .video,
.page.specialty .video-container .youtube {
  position: relative;
  clear: both;
  height: 570px;
  overflow: hidden;
  max-width: 100%;
}

.page.build-a-better-burger .video-container .video video,
.page.build-a-better-burger .video-container .youtube video,
.page.specialty .video-container .video video,
.page.specialty .video-container .youtube video {
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {

  .page.build-a-better-burger .video-container .video video,
  .page.build-a-better-burger .video-container .youtube video,
  .page.specialty .video-container .video video,
  .page.specialty .video-container .youtube video {
    height: 100%;
    width: auto;
  }
}

@media (min-width: 992px) {

  .page.build-a-better-burger .video-container .video,
  .page.build-a-better-burger .video-container .youtube,
  .page.specialty .video-container .video,
  .page.specialty .video-container .youtube {
    position: relative;
    padding-bottom: 31.458%;
    padding-top: 0;
    height: 0;
  }
}

.page.build-a-better-burger .video-container .final-countdown {
  position: relative;
  background: url("images/bbb/red_banner.jpg") no-repeat 50%;
  text-align: center;
}

@media (min-width: 1800px) {
  .page.build-a-better-burger .video-container .final-countdown {
    background-size: 100%;
  }
}

.page.build-a-better-burger .video-container .final-countdown .final-counter {
  width: 400px;
  max-width: 90%;
  height: 120px;
}

.page.build-a-better-burger .video-container .final-countdown .titling.lockup {
  display: block;
  max-width: 766px;
  width: 85%;
  position: relative;
  margin: auto;
}

.page.build-a-better-burger .video-container .final-countdown .titling.lockup img {
  width: 100%;
  height: auto;
  padding: 11px 0 0;
}

@media (max-width: 900px) {
  .page.build-a-better-burger .video-container .final-countdown .titling.lockup img {
    padding: 20px 0;
  }
}

.page.build-a-better-burger .video-container .final-countdown .titling h4 {
  color: #FFF;
  line-height: 48px;
  font-size: 26px;
  line-height: 33px;
  margin-right: 12px;
}

.page.privacy-policy .container .vendor-promo {
  display: block;
  width: 100%;
  margin-bottom: 2rem;
}

.page.privacy-policy .container .vendor-promo h3 {}


/* Applied same styling as h3 to h2 for the next 5 rulesets below, fixed header structure issue in find our wine page */
h2.display-border,
h3.display-border {
  display: block;
  position: relative;
  font-size: 1.4rem;
  font-weight: bold;
  font-family: "PT Sans", sans-serif;
  color: #b51f2a;
  text-align: center;
  width: 100%;
  overflow: hidden;
  margin-bottom: 2rem;
}

h2.display-border span, 
h3.display-border span {
  display: inline-block;
  position: relative;
  padding: 1rem 2rem;
}

h2.display-border span::before,
h2.display-border span::after,
h3.display-border span::before,
h3.display-border span::after {
  content: "";
  position: absolute;
  height: 2px;
  border-top: 2px solid black;
  top: 1.6rem;
  width: 600px;
}

h2.display-border span::before,
h3.display-border span::before {
  right: 100%;
}

h2.display-border span::after,
h3.display-border span::after {
  left: 100%;
}

.store-options {
  display: grid;
  grid-template-columns: auto 150px 150px auto;
  grid-column-gap: 4rem;
}

.store-options .store-option {
  display: block;
  width: 100%;
  text-align: center;
}

.store-options .store-option:nth-child(1) {
  grid-column: 2 / 2;
}

.store-options .store-option:nth-child(2) {
  grid-column: 3 / 3;
}

.store-options .store-option a {
  display: block;
  width: 100%;
  color: #000000;
}

.store-options .store-option img.svg {
  height: 100px;
}

@media(max-width: 767px) {
  .store-options {
    grid-gap: 1rem;
  }

  h3.display-border {
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
  }

  h3.display-border span {
    padding: 1rem;
  }
}

.page.build-a-better-burger .promo-text h4 {
  /*
      color: #000000;
      line-height: 32px;
      font-size: 20px;
      text-align: center;
      .larger {
        font-size: 1.3em;
      }
*/
}

.page.better-burger .promo-text a {
  display: block;
  color: #000000;
  border: 2px solid;
  margin: 20px auto;
  padding: 6px 12px;
  width: auto;
  display: inline-block;
  font-family: "PT Sans", sans-serif;
  text-transform: uppercase;
  font-size: 0.9em;
}

.page.better-burger .hero .hero-text {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  /*background: url("/wp-content/uploads/2020/04/bbb_2020_logo_overlay.png") no-repeat center 30px;*/
}

.flag-icon {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}

.flag-icon span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}


.countdown-wrapper {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 165px;
}

@media (max-width: 900px) {
  .countdown-wrapper {
    height: auto;
  }
}

@media (min-width: 570px) {
  .time_circles>div>h4 {
    font-family: 'Arial', sans-serif !important;
    font-size: 10px !important;
    text-transform: lowercase !important;
    color: white !important;
    margin-top: 60px !important;
  }

  .time_circles>div>span {
    font-family: "Open Sans Condensed", sans-serif !important;
    font-size: 40px !important;
    color: white !important;
    margin-top: -56px !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 569px) {
  .time_circles>div>h4 {
    font-family: 'Arial', sans-serif !important;
    font-size: 10px !important;
    text-transform: lowercase !important;
    color: white !important;
    margin-top: 60px !important;
  }

  .time_circles>div>span {
    font-family: "Open Sans Condensed", sans-serif !important;
    font-size: 30px !important;
    color: white !important;
    margin-top: -56px !important;
    font-weight: 700 !important;
  }
}

.constrained-width {
  background: transparent url("/wp-content/uploads/2018/04/BBB_Crunchy_Ramen_Burger_Display.png") no-repeat -25px center;
  width: 100%;
  padding-bottom: 123%;
  background-size: auto 100%;
}

.bbb-contest-art {
  display: block;
  background: transparent url("/wp-content/uploads/2018/04/BBB_Contest_Logo.png") no-repeat center center;
  width: 100%;
  padding-bottom: 60.26%;
  background-size: cover;
}

.callout.bbburger .text a {
  background: rgba(0, 0, 0, 0.3);
}

.callout.bbburger:after {
  background: transparent;
}

.pink-button {
  padding: 0.7em 0.3em;
  background-color: pink;
  font-size: 22px;
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
  font-family: 'PT Sans', sans-serif;
}

.pause {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 999;
  background: transparent;
  border: 0;
  color: #FFF;
}

#av-overlay img {
  max-width: 132px;
}

.wine-content .award {
  text-transform: uppercase;
}

.visit-us>.container {
  background: #FFF;
}

.visit-us .post-content {
  /* padding: 0 36px 36px;*/
}

@media all and (min-width: 1024px) {
  .visit-us>.container {
    max-width: 900px;
  }
}

/* removed padding-left */

.visit-us>.container .visit-content ul,
.visit-us>.container .visit-content ol,
.visit-us>.container .visit-content p {
  /*padding-left:2em;*/
  margin-bottom: 10px;
  font-family: "PT Sans", sans-serif;
  line-height: 26px;
  font-size: 14px;
}

.visit-us>.container .visit-content ul li,
.visit-us>.container .visit-content ol li {
  margin-bottom: 16px;
}

.visit-us>.container p {
  font-family: "PT Sans", sans-serif;
}

.visit-us>.container p {
  padding-left: 0;
}

.visit-us>.container ol {
  list-style: decimal;
}

.visit-us>.container ul {
  list-style: disc;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

/* Image Adjustments */


@media all {

  .image-20956 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-family-480.jpg");
  }

  .wines-hero {
    background-image: url("/wp-content/uploads/2023/01/Hero-winter-2023-Family-of-Wines_768x432.jpg");
  }

  .image-20957 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-rose-480.jpg");
  }

  .image-20958 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-pinot-sweet-red-480.jpg");
  }

  .image-20959 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-pinot-grigio-480.jpg");
  }

  .image-20988 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-pink-moscato-480.jpg");
  }

  .holidays {
    background-image: url("/wp-content/uploads/2018/04/SHW_Honoring_Moms_Program_Art.png");
  }

  .page .callout.holidays .text.centered {
    display: table;
  }

  .page .callout.holidays .text.centered img {
    max-width: 100%;
  }

  .vibe-and-vine {
    /* background-image: url("/wp-content/uploads/2018/11/SHW_VnV_JohnDriskellHopkins-480.jpg"); */
  }

  .page.better-burger .hero {
    background: url("/wp-content/uploads/2020/04/bbb_2020_hero.jpg") no-repeat center bottom;
    background-size: cover;
    /*height: 740px;*/
  }
}

@media only screen and (min-width: 30em) {
  .page.better-burger .hero {
    height: 300px;
  }
}
@media only screen and (min-width: 40em) {
  .page.better-burger .hero {
    height: 400px;
  }
}
@media only screen and (min-width: 50em) {
  .page.better-burger .hero {
    height: 500px;
  }
}
@media only screen and (min-width: 80em) {
  .page.better-burger .hero {
    height: 650px;
  }
}
@media only screen and (min-width: 94em) {
  .page.better-burger .hero {
    height: 840px;
  }
}

@media all and (min-width: 481px) {

  .image-20956 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-family-768.jpg");
  }

  .wines-hero {
    background-image: url("/wp-content/uploads/2023/01/Hero-winter-2023-Family-of-Wines_768x432.jpg");
  }

  .image-20957 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-rose-768.jpg");
  }

  .image-20958 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-pinot-sweet-red-768.jpg");
  }

  .image-20959 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-pinot-grigio-768.jpg");
  }

  .image-20988 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-pink-moscato-768.jpg");
  }

  .vibe-and-vine {
    /* background-image: url("/wp-content/uploads/2018/11/SHW_VnV_JohnDriskellHopkins-768.jpg");*/
  }

}

@media all and (min-width: 769px) {

  .image-20956 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-family-1920.jpg");
  }

  .wines-hero {
    background-image: url("/wp-content/uploads/2023/01/Hero-winter-2023-Family-of-Wines.jpg");
  }

  .image-20957 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-rose-1920.jpg");
  }

  .image-20958 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-pinot-sweet-red-1920.jpg");
  }

  .image-20959 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-pinot-grigio-1920.jpg");
  }

  .image-20988 {
    background-image: url("/wp-content/uploads/2019/06/summer-2019-pink-moscato-1920.jpg");
  }

  .vibe-and-vine {
    /*background-image: url("/wp-content/uploads/2018/11/SHW_VnV_JohnDriskellHopkins.jpg");*/
  }

}

/* 03/20/19 Additions */
.body-content h3 {
  font-size: 1.4em;
  margin-bottom: 0.6em;
  font-weight: normal;
  font-family: "Libre Baskerville", serif;
}

.body-content .columned-list ul {
  column-count: 5;
  column-gap: 20px;
  list-style-type: none !important;
  padding: 0 !important;
}

.body-content .columned-list ul li {
  break-inside: avoid;
  list-style: none !important;
}

.body-content .columned-list ul li:before {
  display: none;
}

/* Build a better burger css */

.burger-callout-container {
  height: 400px;
  background: url('../../uploads/2020/04/bbb_2020_burgerbase_bg.jpg') no-repeat center center;
  background-size: cover;
}



.burger-callout-container span {
  display: table;
  width: 100%;
  height: 100%;
}

.burger-callout-container span span {
  display: table-cell;
  width: auto;
  height: auto;
  text-align: center;
  vertical-align: middle;
}

.burger-callout-container p {
  text-align: left;
  max-width: 90%;
  color: #FFFFFF;
  margin: 0 auto;
}

.burger-callout-container img {
  max-width: 250px;
  margin: 1rem;
}

.page.single-post .content .influencer-row ul {
  padding: 0;
}

.page.single-post .content .influencer-row ul li:before {
  content: none;
}

.influencer-row .influencer-bio {
  margin-top: 1em;
}

.page.single-post .influencer-bio h2 {
  margin-bottom: 0.25em;
  margin-top: 0;
}

.page.single-post .influencer-bio ul {
  margin-bottom: 7.5px;
}

.page.single-post .influencer-bio p {
  font-size: 14px;
}

.postid-21134 .page.single-post .callout {
  display: none;
}

@media all and (min-width: 768px) {

  .burger-callout-container {
    height: 500px;
    background: url('../../uploads/2020/04/bbb_2020_burgerbase_bg.jpg') no-repeat center center;
  }

  .burger-callout-container img {
    max-width: 360px;
    margin: 1rem auto;
  }

  .burger-callout-container p {
    max-width: 40%;
  }

}

@media all and (min-width: 1024px) {

  .burger-callout-container {
    height: 600px;
  }

  .burger-callout-container img {
    max-width: 360px;
  }

  .influencer-row {
    padding-bottom: 6em;
  }

  .influencer-row .influencer-bio {
    margin-top: 0;
  }

}

@media all and (min-width: 1200px) {

  .burger-callout-container {
    height: 640px;
  }

  .burger-callout-container img {
    max-width: 360px;
  }

}

/* 2019 Sutter Home For Hope */

.page-id-10 .blurb h5 {
  height: auto;
}

.pink-btn {
  display: block;
  margin: 0 auto;
  width: 210px;
  height: 57px;
  background: #feb9c4;
  color: #FFF;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 16px;
  padding-top: 18px;
  margin-top: 24px;
}

.pink-btn:hover {
  color: #FFF;
  text-decoration: none;
}

@media all and (min-width: 1024px) {

  .page.sutter-home-for-hope .content.three-columns img {
    padding-top: 0;
    margin-top: 0;
  }

}

/*tinyhome green #87a739*/
#tiny-homes.page.better-burger section {
  max-width: 992px;
  width: 100%;
  margin: 0 auto 4rem;
}

#tiny-homes.page.better-burger .dashed:before {
  display: block;
  content: '';
  width: 16px;
  height: 3px;
  position: relative;
  background-color: #87a739;
  margin: 0 auto 1rem auto;
}

#tiny-homes.page.better-burger .left .dashed:before,
#tiny-homes.page.better-burger .copy .dashed:before {
  margin: 0 0 1rem 0;
}

#tiny-homes.page.better-burger h1,
#tiny-homes.page.better-burger h2,
#tiny-homes.page.better-burger h3,
#tiny-homes.page.better-burger h4,
#tiny-homes.page.better-burger h5,
#tiny-homes.page.better-burger h4.line-accent,
#tiny-homes.page.better-burger h4.line-accent span,
#tiny-homes.page.better-burger h4.line-accent:after,
#tiny-homes.page.better-burger .divider,
#tiny-homes.page.better-burger .item_tag {
  color: #87a739;
}

#tiny-homes.page.better-burger h3 {
  font-family: "Libre Baskerville", serif;
}

#tiny-homes.page.better-burger section.single .center-wrap {
  display: grid;
  position: absolute;
  width: 100%;
  height: 100%;
  justify-items: center;
  align-items: center;
}

#tiny-homes.page.better-burger section.triptych {
  display: grid;
  grid-gap: 2rem;
  grid-column-widths: repeat(3, 1fr);
  grid-template-areas:
    'h1 h1 h1'
    'copy imga imgb';
  margin: 4rem auto;
}

#tiny-homes.page.better-burger section.triptych h1 {
  grid-area: h1;
}

#tiny-homes.page.better-burger section.triptych .copy {
  grid-area: copy;
}

#tiny-homes.page.better-burger section.triptych .imga {
  grid-area: imga;
}

#tiny-homes.page.better-burger section.triptych .imgb {
  grid-area: imgb;
}

#tiny-homes.page.better-burger section.four-by {
  display: grid;
  grid-gap: 3rem 5rem;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  margin: 4rem auto;
}

#tiny-homes.page.better-burger .block-tag {
  background-color: #87a739;
  color: #ffffff;
  font-size: 18px;
  display: inline-block;
  padding: 10px 30px 8px;
  text-transform: uppercase;
  margin-bottom: 2.3rem;
}

#tiny-homes.page.better-burger .center-wrap .teaser {
  text-align: center;
}

#tiny-homes.page.better-burger h1 {
  text-transform: uppercase;
  text-align: center;
  font-family: "Libre Baskerville", serif;
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

#tiny-homes.page.better-burger .hero {
  background: url("/wp-content/uploads/2019/10/SHW_TinyHomes_Main_Main_Image.jpg") no-repeat center center;
  background-size: cover;
  margin-bottom: 22px;
}

#tiny-homes.page.better-burger .hero img.overlay {
  width: 300px;
}

#tiny-homes.page.better-burger .section-tag {
  font-family: "PT Sans", sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  text-align: center;
  margin-bottom: 1rem;
}

#tiny-homes.page.better-burger .tile-section .tile .text .category .divider {}

#tiny-homes.page.better-burger section .cta {
  display: inline-block;
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: #87a739;
  border: 2px solid;
  text-align: center;
  padding: 8px 30px;
  margin-left: 1rem;
}

#tiny-homes.page.better-burger section.intro {
  display: grid;
  grid-template-areas:
    'copy copy copy'
    'blocka blockb blockc';
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}

#tiny-homes.page.better-burger section.intro div:nth-of-type(1) {
  grid-area: copy;
}

#tiny-homes.page.better-burger section.intro div:nth-of-type(2) {
  grid-area: blocka;
}

#tiny-homes.page.better-burger section.intro div:nth-of-type(3) {
  grid-area: blockb;
}

#tiny-homes.page.better-burger section.intro div:nth-of-type(4) {
  grid-area: blockc;
}

#tiny-homes.page.better-burger section.intro div.promo {
  display: block;
  text-align: center;
  max-width: 315px;
}

#tiny-homes.page.better-burger section.intro div.promo h2,
#tiny-homes.page.better-burger section.intro div.promo p,
#tiny-homes.page.better-burger section.triptych .copy p {
  margin-bottom: 1.6rem;
}


#tiny-homes.page.better-burger section.intro div.promo .svg {
  max-height: 134px;
  margin-bottom: 3rem;
}

#tiny-homes.page.better-burger section.single {
  max-width: 100%;
  width: 100%;
  display: block;
  position: relative;
  height: 870px;
  margin-bottom: 0rem;
}

#tiny-homes.page.better-burger section.single h2 {
  font-size: 2.6rem;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 2.6rem;
}

#tiny-homes.page.better-burger section.single h2.dashed:before {
  margin-bottom: 2.6rem;
}

#tiny-homes.page.better-burger section.single.hero {
  background: url("/wp-content/uploads/2019/10/SHW_TinyHomes_Partnership_Main_Image.jpg") no-repeat center center;
  background-size: cover;
}

#tiny-homes.page.better-burger section.single.hero.pth-news {
  background: url("/wp-content/uploads/2020/03/SHW_TinyHomes_InTheNews_Main_Image.jpg") no-repeat center center;
  background-size: cover;
}

#tiny-homes.page.better-burger section.single.feature_a {
  background: url("/wp-content/uploads/2020/04/PTH_sam_feature.jpg") no-repeat center center;
  background-size: cover;
}

#tiny-homes.page.better-burger section.single.feature_b {
  background: url("/wp-content/uploads/2019/10/SHW_TinyHomes_Main_BehindTheScenes_Image.jpg") no-repeat center center;
  background-size: cover;
}

#tiny-homes.page.better-burger .donate-block {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #87a737;
  display: block;
  width: 100%;
  margin-bottom: 4rem;
}

#tiny-homes.page.better-burger .donate-block .donate-grid {
  display: grid;
  width: 100%;
  margin: 0 auto;
  grid-template-columns: 33% 67%;
  color: #FFFFFF;
  align-items: center;
  padding: 2rem 0;
}

#tiny-homes.page.better-burger .donate-block .donate-grid .left-box {
  font-size: 3rem;
  font-family: "PT Sans", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-align: right;
  position: relative;
  padding-right: 1.5rem;
}

#tiny-homes.page.better-burger .donate-block .donate-grid .left-box:after {
  content: '';
  width: 3px;
  height: 80%;
  background: #FFFFFF;
  position: absolute;
  bottom: 10%;
  right: 0;
}

#tiny-homes.page.better-burger .donate-block .donate-grid .right-box {
  font-size: 1rem;
  font-family: "Libre Baskerville", serif;
  ;
  text-align: left;
  padding-left: 1.5rem;
  line-height: 1.6em;
}

#tiny-homes.page.better-burger .donate-block .donate-grid .right-box span {
  font-size: 1.6rem;
  display: block;
}

@media(max-width: 894px) {
  #tiny-homes.page.better-burger .donate-block .donate-grid .left-box {
    font-size: 2.4rem;
  }
}

@media(max-width: 400px) {
  #tiny-homes.page.better-burger .donate-block .donate-grid {
    display: grid;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: 1fr;
    color: #FFFFFF;
    align-items: center;
    padding: 2rem 0;
  }

  #tiny-homes.page.better-burger .donate-block .donate-grid .left-box {
    font-size: 2.4rem;
    text-align: center;
    padding: 0;
    margin: 0;
    padding: 1rem;
    padding-bottom: 1.5rem;
  }

  #tiny-homes.page.better-burger .donate-block .donate-grid .right-box {
    font-size: 1rem;
    font-family: "Libre Baskerville", serif;
    ;
    text-align: left;
    padding: 1rem;
    padding-top: 1.5rem;
    line-height: 1.6em;
  }

  #tiny-homes.page.better-burger .donate-block .donate-grid .left-box:after {
    content: '';
    width: 80%;
    height: 3px;
    background: #FFFFFF;
    position: absolute;
    bottom: 0;
    right: 10%;
  }

  #tiny-homes.page.better-burger .donate-block .donate-grid .right-box span {
    font-size: 1.3rem;
    display: inline;
  }
}


#tiny-homes.page.better-burger section.single.feature_c {
  background: url("/wp-content/uploads/2019/10/SHW_TinyHomes_Partnership_BehindTheScenes_Image.jpg") no-repeat center center;
  background-size: cover;
}

#tiny-homes.page.better-burger section.four-by .promo.left,
#tiny-homes.page.better-burger section.triptych .copy {
  text-align: left;
  position: relative;
}

#tiny-homes.page.better-burger .promo.left .section-tag {
  text-align: left;
  padding-left: 1rem;
}

#tiny-homes.page.better-burger section.triptych .copy .section-tag {
  text-align: left;
  padding-left: 0;
}


#tiny-homes.page.better-burger section.four-by .promo.left .item_tag {
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: uppercase;
  padding-left: 1rem;
  margin-bottom: 1rem;
}

#tiny-homes.page.better-burger section.triptych .copy .item_tag {
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: uppercase;
  padding-left: 0;
  margin-bottom: 1rem;
}

#tiny-homes.page.better-burger section.four-by .promo.left .image-wrap {
  position: relative;
  max-width: 100%;
  width: 100%;
  margin-bottom: 1rem;
}

#tiny-homes.page.better-burger section.four-by .promo.left .image-wrap img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

#tiny-homes.page.better-burger section.four-by img {

  max-width: 100%;
}

#tiny-homes.page.better-burger section.four-by .promo.left .image-wrap .link-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  justify-items: center;
  align-items: center;
}

#tiny-homes.page.better-burger section.four-by .promo.left p,
#tiny-homes.page.better-burger section.four-by .promo.left h3 {
  padding: 0 1rem;
  margin-bottom: 1rem;
}

#tiny-homes.page.better-burger section.triptych .copy h3 {
  padding: 0;
  margin-bottom: 1rem;
}

#tiny-homes.page.better-burger section.triptych img {
  width: 100%;
  max-width: 100%;
}

a.cta.dead:hover {
  text-decoration: none;
}

#tiny-homes.page.better-burger section.triptych h1 {
  padding: 0 1rem;
}

#modal {
  display: grid;
  position: fixed;
  /* absolute; */
  width: 100vw;
  height: 100vh;
  justify-items: center;
  align-items: center;
  left: 0;
  top: 0;
  z-index: 290;
  background: rgba(0, 0, 0, 0.85);
}

#modal .stage {
  display: block;
  width: 100%;
  height: 0;
  /* 	max-width: 1300px; */
  padding-bottom: 56.25%;
  /* 	border: 1px solid red; */
  position: relative;
}

#modal .video {
  width: 100%;
  z-index: 1;
  position: absolute;
  max-width: 50%;
}

#modal .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#modal .video #closer {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  cursor: pointer;
  position: absolute;
  z-index: 22;
  top: -3rem;
  right: 0;
  background: #000 url("images/closer.png") no-repeat center center;
  background-size: 50%;
}

.play-button-solo {
  display: block;
  height: 85px;
  width: 85px;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
}

#digital h2,
#digital h3,
#digital h4,
#digital .page-color,
#digital .cta,
#digital .enumerated {
  color: #005B7f;
}

.page.specialty .hero {
  /* height: 540px;
  margin-bottom: 2rem; */
}

.page.specialty h2 {
  font-size: 1.75rem;
  line-height: 1.3;
}

.page.specialty h2.narrow {
  width: 35rem;
  text-align: center;
  margin: 2rem auto;
}

.page.specialty .intro h2 {
  max-width: 900px;
  margin: 2rem auto;
}

.page.specialty .center-wrap {
  text-align: center;
}

.page.specialty .steps {
  margin-bottom: 2rem;
}

.page.specialty .steps h2 {
  margin: 2rem auto;
}

.page.specialty .stepped {
  display: flex;
  max-width: 900px;
  margin: 0 auto 1rem;
}

.page.specialty .stepped .promo {
  flex: 1;
}

.page.specialty .stepped .promo .enumerated {
  font-size: 3rem;
  font-family: "Libre Baskerville", serif;
  margin-bottom: 1rem;
}

.page.specialty .stepped .promo .svg {
  max-width: 120px;
  margin: 0 auto;
}

.page.specialty .stepped .promo h3 {
  font-size: 1.2rem;
  font-family: "Libre Baskerville", serif;
  margin-bottom: 1rem;
}

.page.specialty .tile-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.page.specialty .tile-section.x2 .tile {
  width: calc(50% - 2rem);
  margin: 1rem;
}

.page.specialty .tile-section a.cta {
  border-color: #005B7f;
  text-transform: uppercase;
}

.page.specialty .tile-section.x2 .tile .text .category .divider,
.page.specialty .tile-section.doubles .promo .text .category .divider,
.page.specialty .tile-section.x2 .tile .text a.cta.solid {
  background-color: #005B7f;
  border: none;
}

.page.specialty .tile-section.x2 .tile .text a.cta.solid {
  color: #FFFFFF !important;
}

.page.specialty .tile-section.x2 .tile .tile-image {
  height: 0;
  padding-bottom: 100%;
}

.page.specialty .tile-section.doubles .promo .image-wrap img {
  width: 100%;
  display: block;
}

.banner {
  display: block;
  width: 100%;
  padding: 1rem;
  color: #FFFFFF;
  text-align: center;
  position: relative;
}

.banner.inline .inner {
  text-align: center;
}

.banner.bordered .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* border: 1px solid rgba(255, 255, 255, 0.4); */
  padding: 1rem;
}

.banner h3 {
  font-size: 1.4rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.banner.inline h3 {
  display: inline-block;
}

.banner.inline .inner h3 {
  font-size: 1rem;
  margin-right: 1rem;
  line-height: 1.4;
}

.banner.serif h3 {
  text-transform: none;
  font-family: "Libre Baskerville", serif;
  font-size: 1rem;
  font-weight: normal;
}

.banner .cta {
  display: inline-block;
  padding: 0.6rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: white;
  text-decoration: none;
  border: 1px solid white;
}

.banner.inline .inner .cta {
  font-size: 1rem;
}

@media all and (min-width: 768px) {
  #tiny-homes.page.better-burger .hero {
    height: 560px;
  }

  #tiny-homes.page.better-burger section.single {
    height: 870px;
  }

  #tiny-homes.page.better-burger section.triptych .copy {
    padding: 0 0 0 1rem;
  }

  #modal .video {
    margin-top: 70px;
  }

  .page.specialty .hero {
    height: 540px;
    margin-bottom: 2rem;
  }

  .banner.inline .inner {
    text-align: center;
    padding-left: 152px
  }
}

@media all and (min-width: 1024px) {
  #tiny-homes.page.better-burger .hero {
    height: 800px;
  }

  #tiny-homes.page.better-burger section.single {
    height: 800px;
  }

  #tiny-homes.page.better-burger section.triptych .copy {
    padding: 0;
  }

  .banner.inline .inner {
    padding-left: calc(152px + 2rem);
  }
}

@media all and (min-width: 1200px) {
  .banner.inline .inner {
    padding-left: calc(152px + 2rem);
    width: calc(100% - 400px - 2rem);
  }
}

@media all and (max-width: 767px) {
  #tiny-homes.page.better-burger section.intro {
    grid-template-areas:
      'copy'
      'blocka'
      'blockb'
      'blockc';
    grid-template-columns: 100%;
    grid-gap: 2rem;
  }

  #tiny-homes.page.better-burger .hero {
    height: 540px;
    background-position: left;
  }

  #tiny-homes.page.better-burger section.single {
    height: 540px;
  }

  #tiny-homes.page.better-burger section.single.feature_a {
    background-position: 65%;
  }

  #tiny-homes.page.better-burger section.donate-block {
    grid-template-columns: 100%;
  }

  #tiny-homes.page.better-burger section.four-by {
    grid-template-columns: 100%;
  }

  #tiny-homes.page.better-burger section.triptych {
    grid-template-areas:
      'h1 h1'
      'imga imgb'
      'copy copy';
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem;
  }

  #tiny-homes.page.better-burger section.triptych .copy {
    padding: 0 1rem;
  }

  #tiny-homes.page.better-burger section.triptych a.cta {
    position: relative;
  }

  #modal .video {
    max-width: 100%;
  }

  #modal .video #closer {
    right: 1rem;
  }

  .page.specialty h2.narrow {
    width: 100%;
    padding: 0 1rem;
  }

  .page.specialty .stepped .promo h3 {
    margin-bottom: 0rem;
    height: 2rem;
  }

  .page.specialty .tile-section.x2 .tile {
    width: 100%;
    margin: 1rem;
  }

  .page.specialty .tile-section.x2 .tile .tile-image {
    padding-bottom: 50%;
  }
}


.tile-section .tile .text>a {
  border: 2px solid #900;
  color: #900;
}

.tile-section .tile.project-tiny-home .text>a {
  border: 2px solid #88a444;
  color: #88a444;
}

.btn.filled.red {
  color: #FFFFFF !important;
  text-transform: uppercase;
  border-radius: 0;
  border: none !important;
  background: #be1e2d;
}

.btn-wht {
  padding: 8px 30px;
  margin: 30px 0;
  color: #FFFFFF;
  display: inline-block;
  border: 2px solid;
  text-transform: uppercase;
}

.cta-shfh {
  display: block;
  margin: 0 auto;
  font-size: 1.2rem;
  color: #FFFFFF;
  background: #ffb8c6;
  padding: 1rem;
  text-align: center;
  width: 260px;
}

.cta-shfh:hover {
  color: white;
}

.cta-inline-styled {
  position: relative;
  bottom: 0;
  margin: 0;
  padding: 8px 30px;
  display: inline-block;
  border: 2px solid #900;
  color: #900;
  font-family: "PT Sans", sans-serif;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ------------------------------------------------------------ *\
    Wine Filter Feature
\* ------------------------------------------------------------ */

.shell {
  margin: 0 auto;
  padding: 0 15px;
  max-width: 100%;
}

.ico-select {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #7a6a56;
  border-radius: 50%;
}

.ico-select span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 6px;
  height: 6px;
  border-width: 0 0 1px 1px;
  border-color: transparent transparent #fff #fff;
  border-style: solid;
  margin-top: -1px;
}

.filter-title, .page.all-wines h2.filter-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .1em;
  font-family: 'PT Sans', sans-serif;
  color: #7a6a56;
  line-height: 1.1;
  text-align: center;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.page .container-wine-filter .sort {
  height: auto;
  margin: 0 auto 50px;
  padding: 0;
  max-width: 100%;
}

.page>.container.container-wine-filter {
  max-width: 100%;
  width: 100%;
  background: #fdedd8;
  padding: 32px 0;
}

.container.container-wine-filter .shell {
  max-width: 866px;
}

.page .sort .select-wines {
  position: relative;
  background: transparent;
  color: #7a6a56;
  font-size: 18px;
  letter-spacing: .1em;
  font-weight: 700;
  font-family: 'PT Sans', sans-serif;
  border: 3px solid #7a6a56;
  border-radius: 8px;
  text-transform: uppercase;
  margin: 0 auto 34px;
  float: none;
  max-width: 325px;
  width: 100%;
  height: 61px;
}

.page .sort .select-wines .ico-select {
  position: absolute;
  top: 50%;
  left: 27px;
  transform: translate(-50%, -50%);
}

.page .container-wine-filter .sort .toggle-holder {
  max-width: 428px;
  margin: 0 auto 34px;
}

.page .container-wine-filter .sort .toggle-holder .toggle {
  color: #7a6a56;
  font-size: 18px;
  letter-spacing: .1em;
  font-weight: 700;
  font-family: 'PT Sans', sans-serif;
  background: transparent;
  text-transform: uppercase;
  border: 3px solid #7a6a56;
  text-align: center;
  transition: background .4s, color .4s;
  width: calc(50% - 13px);
  box-sizing: border-box;
  height: 52px;
  padding: 10px 0;
}

.page .container-wine-filter .sort .toggle-holder .toggle:first-child {
  margin-right: 13px;
}

.page .container-wine-filter .sort .toggle-holder .toggle:last-child {
  margin-left: 13px;
}

.page .container-wine-filter .sort .toggle-holder .toggle.grey-bg {
  background: #7a6a56;
  color: #fff;
}

.nav-filter>ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  list-style: none;
  margin: -20px;
}

.nav-filter>ul>li {
  padding: 20px;
  width: 20%;
}

.nav-filter>ul>li>.nav__item {
  display: block;
  text-decoration: none;
}

.nav-filter .nav__icon {
  width: 134px;
  height: 134px;
  background: #fff;
  border-radius: 50%;
  border: 3px solid transparent;
  display: block;
  margin: 0 auto 10px;
  position: relative;
  transition: background .4s;
}

.nav-filter li.is-active .nav__icon {
  background-color: #7a6a56;
}

.nav-filter [data-size="1.5l"] .nav__icon {
  padding: 10px 0;
}

.nav-filter [data-size="3l"] .nav__icon {
  padding: 10px 0;
}

.nav-filter .nav__icon img {
  max-height: 100%;
}

.nav-filter .nav__text {
  font-weight: 700;
  font-size: 14px;
  font-family: 'PT Sans', sans-serif;
  color: #615342; /* Made font color darker on family of wines page to fix contrast issue */
  display: block;
  text-align: center;
  text-transform: uppercase;
}

.nav-filter .available_sizes {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  font-family: 'PT Sans', sans-serif;
  color: #7a6a56;
  line-height: 1.1;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.page.all-wines .wine-container .single-wine.is-hidden {
  display: none;
}

.nav-filter--small>ul {
  margin: -5px;
}

.nav-filter--small>ul>li {
  padding: 5px;
}

.nav-filter--small [data-size="1.5l"] .nav__icon {
  padding: 2px 0;
}

.nav-filter--small [data-size="3l"] .nav__icon {
  padding: 2px 0;
}

.nav-filter--small .nav__icon {
  width: 50px;
  height: 50px;
}

.nav-filter--small .nav__text {
  font-size: 10px;
}

.wine-content .nav-filter {
  margin: 30px 0 20px;
}

/* ~~~~~~ Ruleset for text in link-block div within footer ~~~~~~~ */
footer div.be-ix-link-block .be-related-link-container ul.be-list li.be-list-item a {
  color: #6F6F6F !important;
}

@media(max-width: 1024px) {
  .nav-filter>ul>li {
    width: 33%;
  }

  .nav-filter--small>ul>li {
    width: 20%;
  }
}

@media(max-width: 767px) {
  .nav-filter>ul>li {
    width: 50%;
  }

  .nav-filter--small>ul>li {
    width: 20%;
  }
}

@media(max-width: 374px) {
  .nav-filter--small>ul>li {
    width: 33%;
  }
}

/* THEMES  -- home page */
.page .carousel.theme-transparent-yellow .carousel-item .carousel-text p,
.page .callout.theme-transparent-yellow h6 {
  color: #FFFFFF;
  font-size: 20px;
}

.page .carousel.theme-transparent-yellow .carousel-item .carousel-text p::after,
.page .callout.theme-transparent-yellow h6::after {
  display: block;
  position: relative;
  content: "";
  width: 30px;
  height: 10px;
  background: #FBC000;
  margin: 1rem auto;
}

.page .carousel.theme-transparent-yellow .carousel-item .carousel-text h2,
.page .callout.theme-transparent-yellow h2 {
  font-size: 45px;
  color: #FFFFFF;
  border: unset;
  display: block;
  line-height: 1.2;
}

.page .carousel.theme-transparent-yellow .carousel-item .carousel-text h2,
.page .carousel.theme-transparent-yellow .carousel-item .carousel-text p {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}

.page .carousel.theme-transparent-yellow .carousel-item .carousel-text a,
.page .callout.theme-transparent-yellow a {
  font-family: "PT Sans", sans-serif;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.8);
  border: 3px solid #FFFFFF;
  padding: 1rem 2rem;
  /* changed text color in footer column links text to darker gray */
  color: #555555;
  position: relative;
  margin: 2rem auto;
  left: unset;
  bottom: unset;
  max-width: unset;
  font-weight: 700;
}

.section-divider.theme-transparent-yellow h2.line-accent:after,
.section-divider.theme-transparent-yellow h4.line-accent:after {
  border-top: 2px solid #FBC000;
}

.section-divider.theme-transparent-yellow h4.line-accent span {
  color: #FBC000;
}

@media(max-width: 600px) {

  .page .carousel.theme-transparent-yellow,
  .page .callout.theme-transparent-yellow {
    min-height: 300px;
    height: unset;
  }

  .page .carousel.theme-transparent-yellow .carousel-item .carousel-text p,
  .page .callout.theme-transparent-yellow h6 {
    font-size: 16px;
  }

  .page .carousel.theme-transparent-yellow .carousel-item .carousel-text p::after,
  .page .callout.theme-transparent-yellow h6::after {
    margin: .5rem auto;
  }

  .page .carousel.theme-transparent-yellow .carousel-item .carousel-text h2,
  .page .callout.theme-transparent-yellow h2 {
    font-size: 32px;
  }

  .page .carousel.theme-transparent-yellow .carousel-item .carousel-text a,
  .page .callout.theme-transparent-yellow a {
    font-size: 18px;
  }
}

.page.blog .callout a.wrap-link {
  background: rgba(0, 0, 0, 0.3);
}

.page.blog .callout .text {
  z-index: 3;
}

.page.blog .callout .text a {
  max-width: 25em;
  padding: 0 1em;
  line-height: 1.3;
}

h4.term-description {
  color: #333;
  position: relative;
  z-index: 5;
}

.page.better-burger .promo-text h4 {
  font-family: "Block";
  text-align: center;
  font-size: 55px;
}

.page.better-burger .promo-text h4 span:nth-child(1) {
  display: block;
  font-size: 0.46em;
  width: 259px;
  margin: 0 auto;
  line-height: 1.2;
}

.page.better-burger .promo-text h4 span:nth-child(2) {
  display: block;
  font-size: .57em;
}

@media(min-width: 769px) {
  .page.better-burger .promo-text h4 {
    text-align: right;
  }

  .page.better-burger .promo-text h4 span:nth-child(1) {
    margin: 0 0 auto auto;
    width: 50%;
  }
}

@media(max-width: 400px) {
  .page.single-wine .wine-info .container .wine-content .award {
    text-align: left;
  }
}

/* Varietal Nav Indicator */
.current-menu-item a,
.current-page-ancestor a,
.current-post-ancestor a {
  border-bottom: 1px solid #000;
  font-weight: bold;
  color: #000 !important;
}

/* Promo banner */
.promo-banner {
  padding: 1em;
  text-align: center;
  color: var(--promo-text-color);
  font-family: "PT Sans", sans-serif;
  background: var(--promo-bg-color);
}

.promo-banner p {
  font-family: "PT Sans", sans-serif;
  font-size: 1.125em;
  text-transform: uppercase;
  margin: 0 auto;
}

.promo-banner p+p {
  margin-top: 0.25em;
}

.promo-buy-link {
  display: inline-block;
  margin-top: 0.5em;
  color: var(--promo-text-color);
  text-transform: uppercase;
  border: 1px solid;
  padding: 0.5em 1em;
  transition: all .3s ease-in-out;
}

.promo-buy-link:active,
.promo-buy-link:focus,
.promo-buy-link:hover {
  color: var(--promo-bg-color);
  background: var(--promo-text-color);
  border-color: var(--promo-text-color);
  text-decoration: none;
}

@media (min-width: 768px) {
  .promo-banner>* {
    max-width: 384px;
    max-width: calc(100% - 320px);
  }
}

@media (min-width: 1200px) {
  .promo-banner>* {
    max-width: calc(100% - 34em);
  }

  .promo-banner {
    padding: 1.25em 1em;
  }

  .promo-banner p+p {
    margin-top: 0.5em;
  }

  .promo-buy-link {
    margin-top: 0.75em;
  }
}

.single-wine-arrow-overlay {
  background-color: rgb(0,0,0,0.02);
}

/* BEGIN styles for Custom Stickers landing page */

.custom-stickers {
  width: 100%;
}

.hero-stickers {
  width: 100%;
  background-position: center 85%;
  background-size: cover;
  min-height: 20.625rem;
  display: table;
  position: relative;
  background-repeat: no-repeat;
  background-color: #69aad9;
}

.stickers-hero-text {
  margin-top: 6.25rem;
  margin-left: 5rem;
}

@media (max-width: 1250px) {
  .white-overlay {
    background-color: rgba(255, 255, 255, 0.62);
    width: 100%;
    height: 100%;
    position: absolute;
  }
}

@media (max-width: 768px) {
  .stickers-hero-text {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    margin: 5rem; 
  }
}

.stickers-title {
  font-family: "Libre Baskerville", Arial;
  /* font-size: 2.75rem; */
  font-weight: 400;
  color: #98242e;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 1.7857rem + 1.0714vw, 2.75rem);
}

.sticker-subtitle {
  font-family: "PT Sans", Arial;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 32px;
  color: #fff;
  font-size: clamp(1.25rem, 1.1786rem + 0.3571vw, 1.5rem);
}

.sticker-subtitle-blurb {
  font-family: "PT Sans", Arial;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 32px;
  color: #fff;
  font-size: clamp(1.25rem, 1.1786rem + 0.3571vw, 1.5rem);
}

@media (max-width: 1250px) {
  .sticker-subtitle {
    color: #428079;
    display: none;
  }
}

.steps-container {
  font-family: Arial, Arial;
  font-size: 15px;
  font-weight: 400;
  color: #000000;
  background-color: #98242e;
  border: 0.833333px solid #000000;
  min-height: 15.5625rem;
  /* padding: 0rem 14.5rem; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 1024px) {
  .steps-container {
    padding: 0rem 4.5rem;
  }
}

.steps-container ul {
  margin-top: 1rem;
}

.steps-container li {
  width: 2.1875rem;
  height: 2.1875rem;
  text-align: center;
  line-height: 2em;
  border-radius: 50%;
  border: white solid 2px;
  background-color: #98242e;
  margin: 0 6rem;
  display: inline-block;
  color: white;
  position: relative;
}

.steps-container li::before {
  content: '';
  position: absolute;
  top: .9em;
  left: -12.4rem;
  width: 12.4rem;
  height: .2em;
  background: white;
  /* z-index: -1; */
}

.steps-container li:first-child::before {
  display: none;
}

.steps-container .active {
  background-color: white;
  color: #98242e;
}

.steps-container .active ~ .steps-container li {
  background-color: white;
}

.steps-container .active ~ .steps-container li::before {
  background-color: white;
}

.steps-text {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  max-width: 57.5rem;
  margin-top: 1rem;
}

.steps-text p {
  max-width: 11.1875rem;
  text-align: center;
  margin-right: 3rem;
  font-family: "PT Sans", Arial;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #ffffff;
}

.steps-title, .shop-container h1 {
  font-family: "Libre Baskerville", Arial;
  font-size: 36px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: .6rem;
  max-width: 53.5rem;
}

.steps-text, .shop-container p{
  text-align: center;
  font-family: "PT Sans", Arial;
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  color: #ffffff;
  max-width: 55.875rem;
}

section.examples {
  margin: 0 auto;
  padding: 0rem 1rem;
}

.stickers-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.sticker {
  width: 100%;
  height: auto;
  max-width: 17.75rem;
  height: auto;
  border: 1.66667px solid #666666 ;
}

.stickers-container .image-card {
  box-sizing: border-box;
}

.stickers-container .image-card p {
  color: #ffffff;
  font-family: "Libre Baskerville", Arial;
  font-size: 16px;
  font-weight: 400;
  background-color: #428079;
  width: 100%;
  height: 2.625rem;
  margin-top: .4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container {
  color: #000000;
  background-color: rgba(204, 204, 204, 0.6);
  border: 1.66667px solid #666666;
  margin: 0rem 1rem;
  min-height: 39.25rem;
  width: auto;
  /* Temp styling for 'FORM HERE' text */
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  /* align-items: center; */
}

.form-container .title-column h1 {
  font-family: "PT Sans", Arial;
  font-size: 26px;
  font-weight: 700;
  color: #000000;
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
  text-align: center;
}

.form-container .title-column p {
  font-family: "PT Sans", Arial;
  margin-top: 3rem;
  margin-bottom: 3rem;
  text-align: center;
  color: #666;
}

.form-container .title-column p a {
  text-decoration: underline;
  color: #666;
  font-weight: 700;
}

.title-column {
  width: 100%;
  /* height: 100%; */
  padding: 0rem 1.25rem;
  display: block;
}

.form-column {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-self: center;
}

.form-image {
  border: 0.833333px solid #000000;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: flex;
}

.sticker-image {
  width: auto;
  max-height: 5.9375rem;
}

.sticker-box {
  background-color: #999999;
  border: 3.33333px solid #ffffff;
  min-width: 9.5625rem;
  height: 7.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop-container {
  background-color: #428079;
  border: 0.833333px solid #000000;
  width: 100%;
  min-height: 12.125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem .5rem;
}

.shop-container a {
  font-family: "PT Sans", Arial;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  border: 0.833333px solid #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 45px;
  margin-top: 1.5rem;
  text-decoration: none;
}

.sticker-hero-text {
  position: relative;
}

.hero-text-box {
  position: absolute;
  top: 3.8125rem;
  left: 2.625rem;
}

.sticker-title {
  font-family: "Libre Baskerville", Arial ;
  font-size: 44px ;
  font-weight: 400 ;
  color: #FFF ;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.sticker-blub-title {
  font-family: "Libre Baskerville", Arial ;
  font-size: 50px ;
  font-weight: 400 ;
  color: #FFF ;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1250px) {
  .sticker-title {
    color: #428079;
    display: none;
    }
  }

@media (min-width: 375px) {
  .hero-text-box {
    position: absolute;
    top: 5.8125rem;
    left: 4.625rem;
  }
}

.progress-container {
  font-family: Arial, Arial ;
  font-size: 15px ;
  font-weight: 400 ;
  color: #FFF ;
  background-color: #428079 ;
  border: 0.833333px solid #000000 ;
  min-width: 100%;
  height: auto;
  padding: 1.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-container h1 {
  font-family: "Libre Baskerville", Arial ;
  font-size: 2.8125rem ;
  font-weight: 400 ;
  color: #ffffff ;
  margin-bottom: 1rem;
}

@media (max-width: 704px) {
  .progress-container h1  {
font-size:2.5rem;
    }
  }

.progress-container h2 {
  font-family: "Libre Baskerville", Arial ;
  font-size: 1.875rem ;
  font-weight: 400 ;
  color: #ffffff ;
  margin-bottom: 1.5rem;
}

@media (max-width: 704px) {
  .progress-container h2  {
font-size:1.5rem;
    }
  }


.progress-container p {
  font-family: "PT Sans", Arial ;
  font-size: 16px ;
  font-weight: 400 ;
  line-height: 23px ;
  color: #ffffff ;
  max-width: 55.875rem;
}

.progress-container .progress-row .progress-column p {
  font-family: "PT Sans", Arial ;
  font-size: 14px ;
  font-weight: 400 ;
  line-height: 19px ;
  color: #ffffff ;
}

.progress-row {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  padding-top: .2rem;
}

.progress-row::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 10%;
  right: 10%;
  height: 2px;
  background-color: white;
  z-index: 0;
}

.progress-column, .label-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  text-align: center;
}

.progress-column p {
  margin-top: .6rem;
}

.progress-container .circle {
  border: white 2px solid;
  border-radius: 50%;
  min-width: 2.1875rem;
  height: auto;
  line-height: 1.9rem;
  text-align: center;
  position: relative;
  background-color: #98242e;
}

.progress-container .white-circle {
  border: white 2px solid;
  border-radius: 50%;
  min-width: 2.1875rem;
  height: auto;
  line-height: 1.9rem;
  text-align: center;
  position: relative;
  background-color: white;
  color: #98242e;
}

/* Media queries below maintains white line centred behind circles in progress-row */

@media (max-width: 558px) {
  .progress-row::before {
    top: 18%;
  }
}

@media (max-width: 550px) {
  .progress-row {
      flex-direction: column;
      align-items: center;
  }

  /* Adjust the white connecting line to vertical */
  .progress-row::before {
      top: 10%;
      left: 16%;
      right: unset;
      width: 2px;
      height: calc(100% - 20%);
      transform: translateX(-50%);
  }

  /* place text to the right of the circle */
  .progress-column {
      flex-direction: row;
      align-items: center;
      width: 80%;
      margin-bottom: 1rem;  /* space between each progress step */
  }

  .progress-column p {
      margin-left: 1rem;
      margin-top: 0;
      margin-bottom: 0;
  }
}

@media (max-width: 320px){
  .progress-row::before {
    top: 10%;
    left: 17%;
    right: unset;
    width: 2px;
    height: calc(100% - 20%);
    transform: translateX(-50%);
}
}

@media (max-width: 280px) {
  .progress-row::before {
    top: 10%;
    left: 18%;
    right: unset;
    width: 2px;
    height: calc(100% - 20%);
    transform: translateX(-50%);
}
}

/* End white line Media queries */

section.examples h1 {
  font-family: "Libre Baskerville", Arial ;
  font-size: 2rem;
  font-weight: 400 ;
  color: #428079;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: .6rem;
  margin-left: .5rem;
  margin-right: .5rem;
  line-height: 1.2;
}

.custom-sticker-form {
  margin: .8rem;
  font-family: "PT Sans", Arial !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 19px !important;
  color: #666666 ;
}

.inst-container {
  width: 100%;
  height: auto;
  margin-top: 1rem;
  border-top: solid 2px #428079;
  display: flex;
  /* flex-direction: column; */
  /* flex-wrap: wrap; */
  font-family: Arial, Arial ;
  font-size: 15px ;
  font-weight: 400 ;
  color: #000000 ;
  background-color: #efefef ;
}

.left-column {
  /* width: calc(45% - 1rem); */
  min-width: 45%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-self: center;
  align-items: center;
}

.inst-container .left-column h1 {
  font-family: "Libre Baskerville", Arial ;
  font-size: 36px ;
  font-weight: 400 ;
  color: #428079 ;
  margin-bottom: 1rem;
  text-align: center;
  line-height: 1.5;
}

.left-row {
  display: flex;
  /* flex-direction: column; */
  justify-content: start;
  align-items: center;
  margin-bottom: 1rem;
  /* text-align: start; */
  gap: 2rem;
  width: 85%;
}

.left-row p {
  font-family: "PT Sans", Arial;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #666666;
  max-width: 19.625rem;
}

.right-column {
  /* width: calc(55% - 1rem); */
  min-width: 55%;
  min-height: 100%;
  display: flex;
}

.column-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top;
}

.no-wrap {
  white-space: nowrap;
}

/* BEGIN Gravity Form styles */

body .gform_wrapper .gform_body input,
body .gform_wrapper .gform_body select {
  height: 64px;
  border: none;
  border-radius: 0%;
}

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex {
  color: #666666;
  font-weight: 400;
  font-family: "PT Sans", Arial;
}

body .gform_wrapper .gform_footer input[type=submit] {
  font-family: "PT Sans", Arial ;
  font-size: 15px ;
  font-weight: 700 ;
  color: #ffffff ;
  background-color: #666666 ;
  width: 11.5625rem;
  height: 2.6875rem;
  border: none;
  text-align: center;
  margin: 0 auto;
}

.gform_wrapper.gravity-theme .gform_validation_errors {
  margin: 0 auto !important;
  margin-top: 1rem !important;
  width: 90% !important;
  border-radius: 0% !important;
}

/* END Gravity Form Styles */

/* Custom Sticker Page MEDIA QUERIES */

@media (min-width: 768px) {
  .form-container {
    flex-direction: row;
  }
  .title-column {
    width: 50%;
  }

  .form-column {
    width: 50%;
  }
  .custom-sticker-form {
    margin: 2rem;
  }
  .column-image {
    object-fit: cover;
  }
  
}

@media (max-width: 768px) {
  .inst-container {
    display: flex;
    flex-direction: column;
  }
}

@media (min-width: 769px) {
  .left-row {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .left-row {
    flex-direction: row;
  }
}

@media (max-width: 425px) {
  .left-row {
    flex-direction: column;
  }
}

/* END styles for Custom Stickers landing page */

/* BEGIN Commerce7 Version 2 Style Updates */

:root {
  /* --c7-page-width: ; */
  /* --c7-page-width-checkout: ; */
  --c7-font-family: 'PT Sans', sans-serif;
  /* --c7-body-text-color: ; */
  /* --c7-alt-text-color: ; */
  /* --c7-font-size: ; */
  /* --c7-font-size-sub: ; */
  --c7-heading-font-family: "Homemade Apple", cursive;
  --c7-heading-text-color: #333;
  --c7-heading-font-weight: 400;

  /* --c7-primary-color: ; */
  --c7-primary-color-text: #333;
  /* --c7-primary-color-dark: ; */
  /* --c7-primary-color-focus: ; */
  
  --c7-link-color: #000;
  --c7-blue-link: #337ab7;
  --c7-blue-link-hover: #23527c;
  /* --c7-bg: ; */
  /* --c7-bg-alt: ; */
  --c7-border-color: #666;
  --c7-border-color-hover: #000;
  --c7-border-radius: 0;
  
  /* --c7-loading-bg: ; */
  --c7-modal-border-radius: 0;
  /* --c7-modal-shadow: ; */
  /* --c7-overlay-bg: ; */
  /* --c7-progress-bar: ; */
  /* --c7-pill-bg: ; */
  /* --c7-pill-text-color: ; */

  /* --c7-field-bg: ; */
  --c7-field-border-radius: 0;
  /* --c7-field-border-color: ; */
  --c7-field-focus-color: #c73a34;
  --c7-field-option-selected-color: #b51f2a;
  --c7-field-option-focus-color: #c73a34;
  /* --c7-field-placeholder: ; */

  --c7-primary-button-bg: #333;
  --c7-primary-button-bg-hover: #000;
  --c7-primary-button-text-color: #fff;
  --c7-alt-button-bg: #fff;
  --c7-alt-button-bg-hover: #fff;
  --c7-alt-button-text-color: #666;
  --c7-alt-button-text-color-hover: #000;
  --c7-button-border-radius: 0;
  
  /* --c7-info-bg: ; */
  /* --c7-error: ; */
  /* --c7-error-bg: ; */
  /* --c7-warning: ; */
  /* --c7-warning-bg: ; */
  /* --c7-success: ; */
  /* --c7-success-bg: ; */

  /* --c7-header-text-color: ; */
  /* --c7-notification: ; */
  --c7-cart-count-bg: #b51f2a;
  --c7-cart-count-bg-focus: #c73a34;
  --c7-cart-count-text-color: #fff;
  /* --c7-side-cart-shadow: ; */
  /* --c7-dropdown-border-radius: ; */
  /* --c7-dropdown-shadow: ; */
  /* --c7-dropdown-hover: ; */

  /* --c7-block-bg: ; */
  /* --c7-block-border-color: ; */
  /* --c7-block-border-radius: ; */
  /* --c7-block-shadow: ; */

}

/* Global Styles */

.c7-order-item__description {
  font-style: italic;
}

#c7-content {
  flex: 1;
}

.c7-btn--primary:hover,
.c7-btn--primary:visited {
  color: var(--c7-primary-button-text-color);
}

.c7-btn--alt,
.c7-btn--alt--small {
  background-color: var(--c7-alt-button-bg);
  color: var(--c7-alt-button-text-color);
  /* border: 1px solid var(--c7-border-color); */
}

.c7-btn--alt:hover,
.c7-btn--alt--small:hover {
  background-color: var(--c7-alt-button-bg-hover);
  color: var(--c7-alt-button-text-color-hover);
  /* border: 1px solid var(--c7-border-color-hover); */
}

a.c7-btn.c7-btn--alt,
.c7-account-details__header .c7-btn--alt,
.c7-account-details .c7-btn--alt--small,
.c7-account-details .c7-btn--alt,
#c7-modal .c7-btn--alt {
  background-color: var(--c7-alt-button-bg);
  color: var(--c7-alt-button-text-color);
  border: 1px solid var(--c7-border-color);
}

a.c7-btn.c7-btn--alt:hover,
.c7-account-details__header .c7-btn--alt:hover,
.c7-account-details .c7-btn--alt--small:hover,
.c7-account-details .c7-btn--alt:hover,
#c7-modal .c7-btn--alt:hover {
  background-color: var(--c7-alt-button-bg-hover);
  color: var(--c7-alt-button-text-color-hover);
  border: 1px solid var(--c7-border-color-hover);
}

.c7-form--card-number .c7-card-type--default {
  top: 31px;
}

.c7-content.c7-error-page {
  margin: 0 auto;
}

section.c7-content.c7-error-page {
    text-align: center;
}

.c7-form .c7-checkbox, .c7-form .c7-radio {
    align-items: center;
}

/* Side Cart Styles */

#c7-side-cart > div.c7-side-cart__content-container > div.c7-order-items.c7-order-items--cart > ul > li {
  display: flex;
}

#c7-side-cart .c7-order-item__details {
  text-align: start;
}

#c7-side-cart .c7-order-item__details .c7-link {
  color: var(--c7-blue-link);
}

#c7-side-cart .c7-order-item__details .c7-link:hover {
  color: var(--c7-blue-link-hover);
}

#c7-side-cart .c7-order-item__details .c7-order-item__title a {
  font-family: "PT Sans", sans-serif;
  letter-spacing: 0;
  text-transform: capitalize;
  color: var(--c7-link-color);
  font-size: inherit;
  font-weight: bold;
}

#c7-side-cart .c7-order-item__pricing {
  align-items: baseline;
}

#c7-side-cart ul {
  background-color: transparent;
}

/*  END Side Cart Styles */

/* Cart Page Styles */

.c7-cart a:not(.c7-btn),
.c7-account-dashboard a:not(.c7-address__location a, .c7-link, .c7-btn--alt, .c7-btn--primary),
.c7-account-order-detail a:not(.c7-address__location a, .c7-link, .c7-btn--alt, .c7-btn--primary) {
 color: var(--c7-link-color);
 font-weight: bold;
}

.c7-link > span:not(.c7-user-nav__cart__count) {
  color: var(--c7-blue-link);
}

.c7-link > span:hover:not(.c7-user-nav__cart__count) {
  color: var(--c7-blue-link-hover);
}

.c7-form--coupon-code-container .c7-form {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.c7-form--coupon-code-container button[class="c7-link"] {
  pointer-events: none;
}

.c7-form--coupon-code-container button[class="c7-link"] > svg {
  display: none;
}

.c7-form--coupon-code-container .c7-form__group button {
  background-color: var(--c7-primary-button-bg);
  color: var(--c7-primary-button-text-color);
}

.c7-form--coupon-code-container .c7-form__group button:hover {
  background-color: var(--c7-primary-button-bg-hover);
  color: var(--c7-primary-button-text-color);
}

.c7-notice--empty p {
  font-size: large;
}

/* END Cart Page Styles */

/* Header Styles */

 /* Will hide old cart link to cart page (replaced with new v2) no longer need this link*/
header .shop {
  display: none;
}

.c7-cart-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .5rem;
}

#custom-c7-nav-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: var(--c7-font-family);
}

.c7-user-nav__account > a {
  text-transform: uppercase;
  font-size: 14px;
}

.c7-user-nav__account > a:hover {
  text-decoration: underline;
}

.c7-user-nav__cart .c7-user-nav__cart__count {
  background: var(--c7-cart-count-bg) !important;
}

.mobileMenu.open #c7-account a {
  font-family: "PT Sans", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000000;
  font-size: 1.125em;/* changed font unit to em to make text responsive */
  font-weight: 400;
}

.c7-user-nav__account__dropdown {
  top: 2rem;
}

.c7-user-nav__account__dropdown ul li {
  padding-bottom: .5rem;
}

/* END Header Styles */

/* Collection Styles */

.collection-header #menu-shop-menu li.menu-item {
  font-family: var(--c7-font-family);
}

.c7-product__photo img {
  max-height: 22.5rem;
}

.c7-product-collection,
.c7-product__photo a {
  margin: 0 auto;
}

.c7-product__add-to-cart__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

/* END Collection Styles */

.c7-product-spec {
  display: flex;
  margin-bottom: 1rem;
}

.c7-product-spec > div {
  padding-right: .5rem;
}

/* removes empty div with class of .c7-product-spec */
.c7-product-specs > .c7-product-spec:nth-child(4) {
  display: none;
}


/* Profile Styles */

#c7-content .c7-account .c7-link {
  color: var(--c7-link-color);
}


.c7-back::before {
  content: url('data:image/svg+xml; utf8, <svg aria-hidden="true" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 24 24" stroke="%23b51f2a" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 19L3 12M3 12L10 5M3 12L21 12" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

/* END Profile Styles */

/* Checkout Page Styles */

.c7-checkout__header {
  padding: 40px 20px 60px;
  text-align: center;
  position: static;
  height: auto;
}

#c7-checkout .c7-link {
  font-weight: normal;
}

#c7-checkout .c7-checkout__content {
  margin-top: 2rem;
}

/* END Checkout Page Styles */

/* Order Receipt Page Styles */

#c7-content .c7-account-order-detail .c7-h1 {
  margin-bottom: 1.5rem;
}

.c7-callout:not(.c7-callout--club)::before {
  top: 0;
}

/* END Order Receipt Page Styles */

/* Clubs Page */

.content-block__club__content p a.c7-button {
  background-color: white;
  border: 1px solid #b71219;
  color: #b71219;
  padding: .8rem;
  transition: 0.2s;
}

.content-block__club__content p a.c7-button:hover {
  text-decoration: none;
  background-color: #b71219;
  color: white;;
}

.content-block__club__content p a.c7-button:visited,
.content-block__club__content p a.c7-button:focus,
.content-block__club__content p a.c7-button:active,
.content-block__club__content p a.c7-button:active:focus {
  text-decoration: none;
}

/* END Clubs Page */

/*  Create Account Page */

.c7-account-login__options p {
    text-wrap: nowrap;
}

/* END Create Accound Page */

/* E-Gift Card Page */

.c7-product-collection__product-list.single-column {
  display: grid;
  grid-template-columns: 1fr;
}

/* End E-Gift Card page */

/* Subscribe Form */

.subscribe-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
}

.subscribe-form h1 {
  margin-bottom: 1rem;
}

.subscribe-form .c7-subscribe {
  min-width: 100%;
}

#footer .container .subscribe-form .c7-subscribe .c7-form__group button.c7-btn--primary {
  margin: 0;
  align-self: center;
}

#footer .container .subscribe-form .c7-subscribe .c7-form {
  margin: 0 auto;
}

#footer #c7-\:r0\:-email-error {
  padding: 0;
  position: absolute;
}

.page.recipes-pairings #footer input,
.page.privacy-policy #footer input,
.page.single-post #footer input,
.page.blog #footer input {
  border-radius: 0;
}

/* END Subscribe Form */

/* ---------------------- Media Queries ------------------------------- */

@media screen and (min-width: 280px) {

  /* Will show v2 of c7-cart */
  #shopping-cart {
    display: block;
  }

  header .menu {
    padding-left: 16px;
  }

  header .shop-wines {
    display: none;
  }

  #c7-content section.c7-content.c7-cart {
    margin: 0rem auto 2rem;
    max-width: 64rem;
    padding-top: 0;
  }

  #c7-content .c7-account .c7-wrapper {
    padding: 0;
  }

  .c7-product-collection__product-list {
    grid-template-columns: 1fr;
    row-gap: 80px;
  }

  .c7-product-collection__product-list, .c7-product-allocation__product-list {
    padding: 0rem 2rem;
  }

  #c7-content .c7-product-collection__product-list .c7-product__title,
  #c7-content .c7-product-allocation-list .c7-product__title {
    text-align: center;
  }

  #c7-content .c7-product-detail {          
    max-width: 64rem;
  }

  .c7-product-detail .c7-product__add-to-cart {
    margin: 0;
  }
  
}

@media screen and (max-width: 319px) {
  .c7-callout:not(.c7-callout--club) {
    padding-left: 0;
      text-align: center;
      text-wrap: balance;
      min-width: 100%;
  }
  
  .c7-callout:not(.c7-callout--club)::before {
    content: '';
  }

  .c7-account__header .c7-link {
    display: block;
  }

}

@media screen and (max-width: 375px) {
  #c7-content .c7-account-order-detail .c7-h1 {
    font-size: x-large;
  }
}

@media screen and (min-width: 375px) {
  header .menu {
    padding-left: 32px;
  }
  header .shop-wines {
    display: block;
  }
}

@media screen and (min-width: 425px) {
  #c7-content section.c7-content.c7-cart {
    margin: 0rem auto 2rem;
    max-width: 64rem;
    padding: 0rem 1rem;
  }
  
}

@media screen and (max-width: 425px) {
  .c7-account-block__details {
    flex-direction: column-reverse;
    gap: .5rem;
  }

  #c7-checkout .c7-radio--box .c7-link {
    position: static;
    margin-top: .5rem;
  }

}

@media screen and (max-width: 480px) {
  .c7-account-details__header {
    display: flex;
    flex-direction: column;
  }

  #footer .container .subscribe-form .c7-subscribe .c7-form__group button.c7-btn--primary {
    margin-top: .5rem;
    align-self: center;
    min-width: 100%;
  }

}

@media screen and (min-width: 768px) {
  #c7-content section.c7-content.c7-cart {
    margin: 5rem auto 2rem;
    max-width: 64rem;
    padding: 0rem 2rem;
  }

  #c7-content .c7-account .c7-wrapper {
    padding: 0 60px;
  }

  #c7-content .c7-product-collection__product-list .c7-product__title,
  #c7-content .c7-product-allocation-list .c7-product__title {
    text-align: start;
  }

  #c7-content .c7-product-detail {
    padding: 0rem 4rem;
  }

  .c7-product-collection__product-list {
    grid-template-columns: 1fr;
    row-gap: 80px;
  }

  .c7-product__add-to-cart__price {
    justify-content: start;
  }

}

@media screen and (max-width: 768px) {
  #c7-content .c7-product__info {
    align-items: center;
  }
}


@media screen and (max-width: 1000px) {
  #c7-checkout .c7-wrapper {
    align-items: center;
  }
}

@media screen and (min-width: 1024px) {
  .c7-product-collection__product-list {
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 80px;
    column-gap: 30px;
    row-gap: 80px;
  }

  #c7-content .c7-product__info {
    align-items: start;
  }

  .c7-product-collection__product-list,
  .c7-product-allocation__product-list {
    /* padding: 0; */
  }

  .c7-product--e-gifts {
    padding: 2rem;
  }
}

@media screen and (min-width: 1200px) {
  /* Will show on screens 1200px or larger */
  #c7-account {
    display: block;
  }

  #custom-c7-nav {
    top: -11px;
  }
  #custom-c7-nav-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--c7-font-family);
  }
  /* Will hide injection site of v2 c7-cart */
  #shopping-cart {
    display: none;
  }

  header .shop-wines {
    display: none;
  }

  #c7-side-cart ul {
    gap: 5rem;
  }
  
}

@media screen and (min-width: 1440px) {
  #c7-content .c7-account .c7-wrapper {
    padding: 0 20px;
  }

  #custom-c7-nav {
    top: 7px;
  }
}

/* END Media Queries */

/* END Commerce7 Version 2 Style Updates */