/* Do typography */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');


/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "Editor";
  src: url("/assets/fonts/editor/EditorLight.eot"); /* IE9 Compat Modes */
  src: url("/assets/fonts/editor/EditorLight.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/assets/fonts/editor/EditorLight.svg") format("svg"), /* Legacy iOS */
    url("/assets/fonts/editor/EditorLight.ttf") format("truetype"), /* Safari, Android, iOS */
    url("/assets/fonts/editor/EditorLight.woff") format("woff"), /* Modern Browsers */
    url("/assets/fonts/editor/EditorLight.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 100;
  font-style: light;
}


/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "Editor";
  src: url("/assets/fonts/editor/Editor.eot"); /* IE9 Compat Modes */
  src: url("/assets/fonts/editor/Editor.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/assets/fonts/editor/Editor.svg") format("svg"), /* Legacy iOS */
    url("/assets/fonts/editor/Editor.ttf") format("truetype"), /* Safari, Android, iOS */
    url("/assets/fonts/editor/Editor.woff") format("woff"), /* Modern Browsers */
    url("/assets/fonts/editor/Editor.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 300;
  font-style: normal;
}


/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "Editor";
  src: url("/assets/fonts/editor/EditorMedium.eot"); /* IE9 Compat Modes */
  src: url("/assets/fonts/editor/EditorMedium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/assets/fonts/editor/EditorMedium.svg") format("svg"), /* Legacy iOS */
    url("/assets/fonts/editor/EditorMedium.ttf") format("truetype"), /* Safari, Android, iOS */
    url("/assets/fonts/editor/EditorMedium.woff") format("woff"), /* Modern Browsers */
    url("/assets/fonts/editor/EditorMedium.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 500;
  font-style: medium;
}


/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "Editor";
  src: url("/assets/fonts/editor/EditorBold.eot"); /* IE9 Compat Modes */
  src: url("/assets/fonts/editor/EditorBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/assets/fonts/editor/EditorBold.svg") format("svg"), /* Legacy iOS */
    url("/assets/fonts/editor/EditorBold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("/assets/fonts/editor/EditorBold.woff") format("woff"), /* Modern Browsers */
    url("/assets/fonts/editor/EditorBold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 700
  font-style: bold;
}


/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "Editor";
  src: url("/assets/fonts/editor/EditorExtrabold.eot"); /* IE9 Compat Modes */
  src: url("/assets/fonts/editor/EditorExtrabold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/assets/fonts/editor/EditorExtrabold.svg") format("svg"), /* Legacy iOS */
    url("/assets/fonts/editor/EditorExtrabold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("/assets/fonts/editor/EditorExtrabold.woff") format("woff"), /* Modern Browsers */
    url("/assets/fonts/editor/EditorExtrabold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 900;
  font-style: Extrabold;
}



/* custom properties */
:root {

  --color-utility-white:white;
  --color-utility-black:#111;
  --color-utility-error:red;
  --color-utility-warn:orange;

  --color-brand-gold: #af9c66;
  --color-brand-gold-light: #fbcc1e;

  --color-brand-green:#00b473;
  --color-brand-green-lt:rgb(147, 232, 205);

  --color-brand-green-light:#67785c;

  --color-brand-brown-drk:#504e48; /* rgb(80, 78, 72) */
  --color-brand-brown:#56544d;  /* rgb(86, 84, 77) */
  --color-brand-brown-lt:rgb(147, 142, 137);
  --color-brand-tan:#67655e;/* 103,101,94 */
  --color-brand-tan-lt:rgb(191, 184, 167);

  --color-brand-red:#F0301D;

  --color-ltgrey:rgb(240, 239, 238);
  --color-ltltgrey:rgb(244, 244, 243);

  --color-brand-orange:rgb(251,101,27);

  --color-brand-pink:rgb(166, 32, 84);

  --font-brand: 'Editor';
  --font-sans: 'Open Sans';

  --swiper-theme-color: #56544d;

  --display-size:5.3125rem;
  --h1-size:3.5rem;
  --h2-size:3rem;
  --h3-size:2.25rem;
  --h4-size:1.75rem;
  --h5-size:1.5rem;
  --h6-size:1.25rem;


  --container-width:calc(100vw - (var(--mobile-margin)*2));;
  --mobile-margin:2rem;
  --mobile-spacer:3rem;

}



@media screen and (max-width:50em){
  :root {
    --display-size:5.3125em;
    --h1-size:2.5em;
    --h2-size:2.25em;
    --h3-size:1.75em;
    --h4-size:1.5em;
    --h5-size:1.5em;
    --h6-size:1.25em;


    --container-width:1fr;

  }
}


@media screen and (max-width:23.25em){
  :root {
    --mobile-margin:1.5rem;

  }
}

h1, h2, h3, h4, h5, h6, p {
  display: inline-block;
  justify-content: space-between;
  align-content: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.0625em;
  line-height: 1.2;
}
h4 {
  letter-spacing: -.0125em;
}
p {
  display:block;
}
p.caption {
  font-size: .75em;
}
/* typography */
h1.display {
  font-size:var(--display-size);
  line-height: 1.1;
  color:white;
}
h1 {
  font-family: var(--font-brand);
  font-size:var(--h1-size);
  font-weight:500;
  color:var(--color-brand-brown);
}
h1.always-push {
  width: 100%;
  display: flex;
}
@media screen and (max-width:50em) {
  h1.push {
    width: 100%;
    display: flex;
  }
}



h2 {
  font-family: var(--font-brand);
  font-size: var(--h2-size);
  font-weight: 500;
}
h3 {
  font-family:var(--font-brand);
  font-size:var(--h3-size);
  font-weight: 500;
  color:var(--color-brand-brown);
}
h4 {
  font-family:var(--font-sans);
  font-size:var(--h4-size);
  font-weight:300;
}
h5 {
  font-family:var(--font-brand);
  font-size:var(--h5-size);
  font-weight:500;
  color:var(--color-brand-brown);
}
h6 {
  font-family:var(--font-brand);
  font-size:var(--h6-size);
  font-weight:500;
}
.font-brand {
  font-family: var(--font-brand);
}
@media screen and (min-width:50em) {
h1{font-size: min(max(1em, 4vw), var(--h1-size));}

}


.text li {
  color:var(--color-brand-brown-lt);
}
.text ul {
  padding-left:18px;
}




.grid, .container {
  display: grid;
}
.grid .span-4{
  grid-column: span 4;
}
.container.block {
  display:block;
  max-width:var(--container-width);
  margin:0 auto;
}
.container {
  grid-template-columns: 3rem 1fr 3rem;
}
.container > * {
  grid-column: 2 / 3;
}
.grid {
  grid-template-columns: repeat(12, [col] 1fr);
}


/* split-layout grid */
.half-grid {
  display: grid;
  grid-template-columns: auto repeat(4,[col] calc((var(--container-width) / 2)/ 7)) calc(((var(--container-width) / 2)/ 7) - 0.5rem) auto;
  grid-column-gap: 1em;
}

.half-grid.right{
  grid-template-columns: auto repeat(4,[col] calc((var(--container-width) / 2)/ 7)) calc(((var(--container-width) / 2)/ 7) - 0.5rem) auto;
}


.split {
  position:relative;
}
.split .featured-image {
  position:absolute;
  width:50%;
  height:100%;
  background-size:cover;
  background-position:50% 50%;
  top:0;
  right:0;
  background-repeat:no-repeat;
}
.split.right {
  background-position: 0% 50%;
}
.split.right .featured-image {
  top:0;
  left:0;
  right:auto;
}
.split .text {
  padding:160px 0;
  width:50%;
  padding-right:8%;
}
.split.right > .container .text {
  justify-self:end;
}
.split.right .text {
  padding-left:5%;
}
.split h2 {
  display:flex;
  justify-content: space-between;
  color:#56544C;
  font-weight:400;
}
.split.dark hr {
  background:white;
}
.split.dark, .split.dark h2, .split.dark p {
  color:white;
}

.swiper-pagination-bullet{
  padding: 15px;
  /* margin: 10px !important; */
  /* border: 10px solid transparent; */
  pointer-events: all;
  background: radial-gradient(white 0px, white 3px, transparent 3px);
  background-color: transparent !important;
}

.swiper-pagination-bullet:hover{
  opacity: 1;
  cursor: pointer;
}

@media screen and (max-width:50em) {
  .container {
    grid-template-columns: var(--mobile-margin) 1fr var(--mobile-margin);
  }
  .grid {
    grid-template-columns: repeat(4, [col] 1fr);
  }

  .half-grid {
    grid-template-columns: var(--mobile-margin) repeat(4, 1fr) var(--mobile-margin);
  }

  .half-grid.right{
    grid-template-columns: var(--mobile-margin) repeat(4, 1fr) var(--mobile-margin);
    width: 100%;
  }

  .split {
    display: flex;
    flex-direction: column-reverse;
    padding:var(--mobile-spacer) 0;

  }
  .split > .featured-image, .split.right .featured-image {
    position: relative;
    display:block;
    width:calc(100% - var(--mobile-margin) * 2);   /* thanks, PEMDAS */
    padding-bottom:100%;
    margin:auto;
  }
  .split .text {
    width:100%;
    padding:0;
  }


}




/* biggg */
@media screen and (min-width: 1248px) {
  :root {
    --container-width:75rem;
  }
  .container {
    grid-template-columns: auto var(--container-width) auto;
  }
}
















 /* Document Setup */
 body > * {
   width:100%;
 }
 *, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
}
img {
  max-width:100%
}
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
}
input {
  font-family: 'Open Sans', sans-serif;
}


p {
  font-family:'Open Sans', sans-serif;
  font-size:.9375rem;
  line-height: 1.5rem;
  margin-bottom: 1.5em;
  color:var(--color-brand-brown-lt);
  letter-spacing: -.0125em;
}
a {
  font-family:var(--font-brand);
  font-weight:100;
  display:flex;
  text-decoration: none;
  font-weight: 300;
}
hr {
  margin: .5rem 0;
  background:var(--color-brand-brown-lt);
  border:none;
  height:1px;
}
@media screen and (max-width:50em){
  h1.display{
    font-size:3em;
  }
  hr {
    margin:.5rem 0;
  }
  .logo {
    width:3rem;
  }
}







/* this is for the icons next to headers */
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img,p img {
  height:.75em;
  align-self: center;
}

#link-arrow path {
  fill:inherit;
}
.arrow {
  display:inline-flex;
}
.arrow.underline {
  border-bottom: 1px solid;
}
.arrow svg {
  height: 100%;
  width: 0.4em;
  display: inline-block;
  align-self: center;
  margin-left: 12px;
}
/*a.arrow::after{
    content: '';
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="link-arrow" viewBox="0 0 5.85 10.02"><path d="M5.75 4.78a.37.37 0 01.1.23.33.33 0 01-.1.23L1.06 9.92a.29.29 0 01-.23.1.32.32 0 01-.23-.1l-.5-.5A.31.31 0 01.1 9l4-4-4-3.94A.29.29 0 010 .83.32.32 0 01.1.6L.6.1A.32.32 0 01.83 0a.29.29 0 01.23.1l4.69 4.68z"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    width: .5rem;
    margin-left: 1rem;
}*/

button{
  font-family:var(--font-sans);
  background: transparent;
  border: solid 1px white;
  color: white;
  text-transform: uppercase;
  font-size: .75em;
  padding: .75rem 2rem;
  font-weight: 600;
  letter-spacing: .0125em;

}
input:focus {
    outline: none;
}


svg {
  fill:currentColor;
}




/* GLOBAL LAYOUT STYLES */
#menu {
  position:relative;
  flex-basis: 2.25rem;
}
#header{
  position: fixed;
  padding: 1.5rem 0;
  z-index: 5;
  background-color:transparent;
  transition: background-color 0.2s ease-out;
}
#header .logo svg {
  width: 80px;
  height: auto;
  transition: width 0.2s ease-out;
}
#header.scrolled {
  background-color:#56544C;
}
#header.scrolled .logo svg {
  width:60px;
}
@media screen and (max-width:768px){
  #header.scrolled {
    padding:0.5em 0;
  }
}
.menu-controls {
  grid-column: 8 / -1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.menu-controls .delivery {
  border: 1px solid white;
  color: white;
  font-family: var(--font-sans);
  padding: 6px 12px;
  margin-right: 17px;
  font-size: 12px;
  text-transform: uppercase;
}
.burger {
  z-index: 3;
  position: relative;
  cursor:pointer;
  padding:3px;
}
.burger.burger--close svg #Close {
  opacity:1;
}
.burger.burger--close svg #Hamburger {
  opacity:0;
}
.menu-overlay.menu--active, .search-form.search--active {
  opacity:1;
  pointer-events:all;
}
.menu-overlay {
  z-index: 2;
  opacity:0;
  position:fixed;
  transition: opacity 0.3s ease-out;
  display: flex;
  pointer-events:none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-brand-brown);
  width:100%;
  height:100%;
}
@media screen and (max-width:50rem) {
  .menu-overlay > div:first-child img {
    align-self: flex-start;
    margin-left: 3rem;
  }

.menu-overlay > div:first-child img {
  align-self: flex-start;
  margin-left: 3rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
}




.navigation-grid {
  display: grid;
  grid-template-areas:  "a b"
                        "c d";
  margin: 4rem 0;
}
.navigation-grid h3 {
  font-size: 1.75em;
  color:var(--color-brand-gold-light);
  margin: 1em 0 .25em;
}
.navigation-grid ul {
  list-style: none;
  padding-left: unset;

}
.navigation-grid li.menu__item {
  padding: .25rem 0;
}
.navigation-grid a, .navigation-grid a:visited, .navigation-grid a span.fab {
color:var(--color-brand-tan-lt);
font-family: 'Open Sans';
}
.navigation-grid a:hover {
  text-decoration:underline;
}




.split-layout {
  display:grid;
}
@media screen and (min-width:50rem) {
  .split-layout {
    grid-template-columns: repeat(2, 50%);
  }

  .menu-overlay > div:nth-child(2) {
    background-color: #67655e;
  }
}
.split-layout > div {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }






/* SNIPPETS */

/* search */
.search-container {
  display: flex;
  flex-direction: column;
  padding:calc(var(--mobile-spacer) * 2) var(--mobile-margin);
  align-items: center;
  justify-content: center;
  background:var(--color-utility-white);
}
.search-container p {
  text-align: center;
  color:var(--color-brand-brown);
  padding-top:2rem;
  max-width: 50rem;
}
.search.search-page .search-form input,.search.search-page .search-form input::placeholder{
  color:var(--color-brand-brown);
  font-size: 1em;
  font-weight:300;

}

.search.search-page {
    border-bottom: 1px solid var(--color-brand-brown);
    padding-top:3rem;
    width:min(75%, 50rem);
    margin-right:0;
}
.search.search-page form.search-form {
  visibility: visible;
}

.lazy-boi {
  grid-column: span 6;
  padding:3rem;
  display: flex;
  justify-content: center;
  background:white;
}
.lazy-boi button {
  color:var(--color-brand-pink);
  border-color:var(--color-brand-pink);
  grid-column: 4 / span 4;
  cursor:pointer;
}
.lazy-boi button i {
  padding-left: .5rem;
}

@media screen and (min-width:50rem) {
  .search-container {
    padding:7rem;
  }
  .search.search-page .search-form input,.search.search-page .search-form input::placeholder{
    font-size: 1.25em;
    padding: .75rem;
  }

  .lazy-boi {
    grid-column: span 12;
    padding:7rem;
  }

}

@media screen and (max-width:50rem) {
  .search.search-page {
    width:100%;
    margin-bottom:0;
    padding-top:0;
  }
}



/* menu */
#menu .search form input {
  opacity:0.6;
  font-size:1em;
}
#menu .search .search-toggle {
  opacity:0.6;
}
#menu .search form input::placeholder {  color: var(--color-brand-brown-lt);}

/* "contact-info" */
.contact-info span {
  font-size: .75rem;
  color: var(--color-brand-tan-lt);
  letter-spacing: .25px;
}

/* "social-icons" */
.social-icons {
  margin-bottom: 1em;
}
.social-icons a {
  display:inline-block;
  margin-right:0.6em;
}
span.fab {
  color:var(--color-brand-tan-lt);
}
span.fab::before {
  font-size: 1.25em;
}


@media screen and (max-width:768px){
  .menu-controls .delivery {
    overflow: hidden;
    width: 30px;
    height: 30px;
    color: transparent;
    border: none;
    background-size: 75%;
    background-repeat: no-repeat;
    background-image: url("/assets/images/interactive/cart.svg");
    background-position: 50% 50%;
  }
  .menu-controls .burger {
    height:30px;
  }
}



/* search */
.search {
  display: flex;
  align-items: center;
  flex-grow:2;
  margin-right: 1rem;
}
.search .search-toggle img,.search .search-toggle svg {
  height: 1.5rem;
  padding: .125rem;
}
.search form {
  align-self: stretch;
  flex-grow: 2;
}
.search form input {
  border: 0;
  border-bottom: 1px solid white;
  background: transparent;
  color: white;
  padding: .25rem;
  width:100%;
  padding-left:0;
}
.search form input:focus {

}
.search form input::placeholder {
  color: white;
  opacity:.8;
}


@media screen and (max-width:50em) {
  .search form:not(.search--active) {
    visibility: hidden;
  }
}





    /* fresh-finds-deals */

    .deals > div{
      grid-column: span 4;
    }
    .deals h1, .deals h5 {
      color:var(--color-utility-white);
    }
    .deals hr {
      background:var(--color-utility-white);
    }
    .deals h4, .deals a, .deals p {
      color:var(--color-brand-gold-light);
    }

    #fresh-finds-deals {
      background: linear-gradient(0deg,
        var(--color-utility-white) 0%,
        var(--color-utility-white) 50%,
        rgba(0,0,0,0) 50%,
        rgba(0,0,0,0) 100%
        );
    }
    #fresh-finds-deals .fresh-finds .half-block > div{
      grid-column:1 / span 6;
    }
    #fresh-finds-deals .deals .half-block > div{
      grid-column:1 / span 6;
    }
    #fresh-finds-deals .deals-swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets,
    #fresh-finds-deals .fresh-finds-swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
      padding-bottom: 3rem;
      display: flex;
      justify-content: flex-end;
      padding-right:3rem;
    }
    #fresh-finds-deals .fresh-finds .swiper-pagination-bullet {
      width:.25rem;
      height:.25rem;
      margin: 0 .5rem;
      background:radial-gradient(var(--color-brand-brown) 0px, var(--color-brand-brown) 3px, transparent 3px);
    }
    .fresh-finds, .deals {
      grid-column: span 4;
    }
    .fresh-finds > .half-block, .deals > .half-block {
      grid-column: span 4;
      padding-bottom:0;
    }
    .fresh-finds h4, .fresh-finds a, .fresh-finds p {
      color:var(--color-brand-green);
    }
    .fresh-finds a {
      display: block;
    }
    .header-block {
      margin-bottom:1rem;
    }
    .fresh-product {
      grid-column: span 6;
    }
    .fresh-product div:first-child {
      padding-top: 60%;
    }
    .fresh-product h5 {
      margin:.5em 0;
    }
    .fresh-product p {
      margin:0;

    }
    @media screen and (min-width:50em){
      .fresh-finds, .deals{
        grid-column: span 6;
        padding-top: 5rem;
      }
      #fresh-finds-deals {
        background: linear-gradient(90deg,
          rgba(0,0,0,0) 0%,
          rgba(0,0,0,0) 50%,
          var(--color-utility-white) 50%,
          var(--color-utility-white) 100%
          );
      }
      #fresh-finds-deals .fresh-finds .half-grid > div{
        grid-column:2 / span 6;
      }
      #fresh-finds-deals .deals .half-grid > div{
        grid-column:1 / span 6;
      }
    }


/* slider-favorites */
.swiper-button-prev , .swiper-button-next {
  transform: scale(.5);
  z-index: 1;
}



.favorites {
  padding: 4rem 2rem;
  color: var(--color-utility-white);
}
.swiper-container.favorites-swiper-container {
    --swiper-theme-color: var(--color-brand-brown-lt);
}
.swiper-button-prev:after,.swiper-button-next:after {
  display: none;
}
.favorites .favorites-header {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-brand-brown-lt);
  margin-bottom:22px;
}
.favorites .favorites-header h4 {
  font-size: 1.375em;
  font-weight: 500;
  margin-bottom: .75rem;
  letter-spacing: -.0125em;
}
.favorites .favorites-header a {
  color:var(--color-brand-green);
  align-self: baseline;
}
.favorites > div {
  grid-column: span 12;
}
/*.favorites > div:first-child {
  grid-column: span 8;
  padding-right: 3rem;
}*/
/*.favorites > div:last-child {
  grid-column: span 4;
}*/

#food-slider .container.swiper-nav {
  margin: auto;
  display: block;
  max-width: calc(var(--container-width) + 3em);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  right: 0;
  left: 0;
}

.favorites > div > div:last-child {
  display: grid;
  grid-template-areas:  "1 2 3"
                        "4 5 6";
  grid-row-gap: 2rem;
}

.favorites > div.hot-bar > div:last-child {
  display:flex;
  flex-direction: column;
}
.hot-bar .num-card:first-child {
  margin-bottom: 2rem;
}
.num-card {
    display: grid;
    grid-template-areas:
        "a b"
        "a c";
    grid-template-columns: 2.5rem 1fr;
    grid-template-rows: auto 1fr;
    grid-column-gap:0.75rem;
}
.num-card div {
    grid-area: a;
    align-self: start;
    background: var(--color-brand-green);
    color:var(--color-brand-brown);
    font-family:var(--font-brand);
    font-weight:500;
    width: 100%;
    padding-top: 100%;
    position:relative;
}
.num-card div span {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size: 1.25rem;
  font-weight: 300;
}
.num-card p {
    grid-area: c;
    margin:0;
    color:var(--color-brand-brown-lt);
    font-size: .75em;
    line-height: 1.25rem;
    letter-spacing: -.0125em;
}
@media screen and (min-width:50em){
  .favorites > div > div:last-child {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen (max-width:50em) {
  .favorites > div:first-child {
    padding-right: 0;
  }
}

/* temp fix for demo */
@media screen and (max-width:50em) {
  .favorites > div > div:last-child {
    grid-template-areas: "1""2";
  }
  .favorites > div:first-child {
    padding-right: 0;
}
}




/* internal-hero */
section#hero {
  width:100vw;
  position:relative;
}
@media screen and (min-width:50rem) {
  .container.slide > .grid > .slide-content {
    grid-column: 1 / span 5;
  }
  .slide-content {
    padding-top: 8rem 0;
  }
}

.slider,.slider .slide {
  width:100%;
  height:100%;
  background-color:#111;
}

#hero .slide {
  background-position:50% 50%;
  background-size: cover;
}
#hero .slide:before {
  content:' ';
  position:absolute;
  display:block;
  height:100%;
  width:100%;
  left:0;
  top:0;
  background:linear-gradient(to right, #0000009e 0%, transparent 60%);
  z-index:1;
}
.slide-content{
  position:relative;
  z-index:2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16rem 0 4rem;
  color:white;
}
.slide-content p {
  color:white;
}
.slide-content span, .slide-content a {
  color:var(--color-brand-gold-light);
}
#hero h1.display {
  margin-bottom:8px;
}
@media screen and (max-width:50rem) {
  .container.slide > .grid > .slide-content {
    grid-column: 1 / span 3;
  }
}





/* footer */

/* newsletter-signup */
@media screen and (min-width:50em) {
  .newsletter-signup{
    padding: 3rem 0;
  }
  .newsletter-signup form > input:nth-child(2){
    border-left:none;
  }
  .newsletter-signup form button {
    border-left:none;
  }
}

#mc-embedded-subscribe-form.success input, #mc-embedded-subscribe-form.success button {
  display:none;
}
#mc-embedded-subscribe-form .success-message {
  display:none;
  grid-column: span 12;
  border: none;
  opacity: 1;
  color: black;
}
#mc-embedded-subscribe-form.success .success-message {
  display:block;
}
.newsletter-signup {
  background-color: var(--color-ltltgrey);
  text-align: center;
  padding: 3rem 0;
}
.newsletter-signup > div {
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.newsletter-signup > div > * {
  margin-bottom: 1rem;
}
.newsletter-signup img {
  max-width: 7rem;
}
.newsletter-signup h6 {
  color:var(--color-brand-brown-lt);
}
.newsletter-signup form {
  padding:3rem 0;
  grid-column-gap:0;
  grid-row-gap:1rem;
  width:70%;
}
.newsletter-signup form > * {
  padding:1rem .75rem;
  font-family: var(--font-sans);
  font-size: .75em;
  text-transform: uppercase;
  background-color: inherit;
  border:1px solid var(--color-brand-brown);
}
.newsletter-signup form input {
  padding-left:3rem;
}
.newsletter-signup form > input:first-child{
  grid-column: 1 / span 4;
}
.newsletter-signup form > input:nth-child(2){
  grid-column: span 6;
}
.newsletter-signup form button {
  font-size: .75em;
  color: var(--color-brand-brown-lt);
  font-weight: 700;
  background-color:inherit;
  text-transform: uppercase;
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  transition: background-color 300ms;
  cursor:pointer;
  outline:none;
}
.newsletter-signup form button:hover {
  background-color:var(--color-brand-brown);
  color:var(--color-utility-white);
}
.newsletter-signup form button:hover::after  {
  transform:translateX(100%);
}
@media screen and (max-width:50em){
    .newsletter-signup form {
      width: 100%;
    }
    .newsletter-signup form button {
      margin: auto;
      grid-column:span 4;
      padding: 1rem 2rem;
    }
  }






  footer {
    padding: 3rem 0 0;
  }
  footer .container {
    margin-bottom:3rem;
  }
  footer h4 {
    color:white;
    font-family: editor;
    font-weight: 300;
    margin: 0 0 1rem;
  }
  footer ul {
    list-style: none;
    font-size:.75em;
    columns:2;
    padding-left:0;
    color:var(--color-brand-gold-light)
  }
  footer ul li {
    padding: .25rem 0;
  }
  footer p {
    font-size: .75rem;
  }
  footer a {
    color:var(--color-brand-gold-light);
    letter-spacing: .05em;
  }
  footer a:not(.arrow) {
    font-family:var(--font-sans);
  }

  footer .social-icons {

  }
  footer .misc-button {
    color: white;
    border: 1px solid var(--color-brand-brown-lt);
    display: inline-block;
    padding: 8px 16px;
    font-size: 12px;
    text-transform: uppercase;
    float: left;
    margin-top: -5px;
    margin-right: 15px;
  }
  footer .social-icons a span {
    color:var(--color-brand-yellow);
    font-size:0.8em;
  }

  footer::after{
    content: '';
    width: 100%;
    display: block;
    background-size: 50%;
    padding-top:6rem;
}
@media screen and (max-width:50rem) {
  footer .grid {
    grid-gap:1rem;
  }
  footer .grid > div ~ div {
    grid-column: 2 / 5;
  }
  footer::after {
    background-size:unset;
  }
    footer .social-icons {text-align: left;}
}
@media screen and (min-width:50rem) {
  footer .grid > div:nth-child(1){

  }
  footer .grid > div:nth-child(2){
    grid-column: 3 / 7;
  }
  footer .grid > div:nth-child(3){
    grid-column: 8 / 11;
  }
}






/* events */
/* events */
#events-section {
  display: grid;
  grid-template-areas: "a b""a c";
  grid-template-columns: 50% 50%;
  grid-template-rows:minmax(auto, 60%) auto;
  background: var(--color-utility-white);
}
#events-section a {
  color:var(--color-brand-orange);
}
#events-section .half-block {
  grid-area:a;
  padding:7rem 0;
}
.half-block > div {
  grid-column:2 / span 5;
}

#events-section .half-block .header-block h4 {
  color:var(--color-brand-orange);
}

.half-block p {
  margin:2rem 0;
}


.events-upcoming {
  grid-area:c;
  background-color: var(--color-brand-brown-lt);
  padding:2rem;
  color:white;
  display: flex;
  font-family:var(--font-brand);
  font-weight: 300;
}
.events-upcoming hr {
  background:var(--color-utility-white);
  margin: .5rem 0;
}
.events-upcoming > div {
  padding:1rem;
}

.events-upcoming > div:first-child {
  background-color: var(--color-brand-brown);
  text-align:center;
  align-self: center;
  min-width: min(200px, 30%);
}
.events-upcoming .event-date span:first-child {

}



.events-upcoming > div:nth-child(2){
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.events-upcoming .event-title {
  font-size: 1.75em;
}

.events-upcoming .event-date span:first-child {
  font-size:1.25em;
}
.events-upcoming .event-date span:last-child {
  font-size: 2.5em;
}




.events-upcoming .event-local {
  font-family:var(--font-sans);
  font-size: 1.25em;
}

@media screen and (max-width:50rem) {
  #events-section {
    grid-template-areas:
                        "a a"
                        "b b"
                        "c c";

  }
  .half-block {
    padding:4rem 0;
  }
  .half-block > div {
    grid-column:2 / span 4;
  }
  #events-section > div:nth-child(2) {
    grid-column: span 2;
    padding-top: 56%;
  }

  .events-upcoming .event-title {
    font-size: 1.25em;
  }
  .events-upcoming .event-local {
    font-size: 1em;
  }
  .half-block > div > a {
    display: none;
  }


  .newsletter-signup form input {
    padding-left:1rem;
  }
}





/* community */
.community{
  background-color: var(--color-utility-white);
  padding: 4rem 0 6rem;
}
.community .header-block {
  grid-column:span 12;
}
.community .header-block h4 {
  color: var(--color-brand-red);
}
.community-header{
  padding-left:0;
  padding-right:0;
}
.community .grid {
  grid-column-gap:2rem;
}

.community .grid div:not(.header-block) {
  width: 100%;
}
.community .grid a:not(.header-block){
  grid-column: span 4;
  margin: .75rem 0;
}
.community .featured-image {
  padding-bottom:100%;
  background-position:50% 50%;
  margin-bottom:2em;
  background-size:cover;
}
.community a.arrow {
  color: var(--color-brand-red);
}

.community p.arrow {
  color: var(--color-brand-red);
}

@media screen and (max-width:50em){
  .community .header-block {
    grid-column: span 4;
  }
}





/* join-us */

  section.benefits {
    background-image:
      linear-gradient(
        to bottom,
        var(--color-brand-brown),
        var(--color-brand-brown) 33.3333%,
        transparent 33.3333%,
        transparent 66.6666%,
        var(--color-utility-white) 66.666%,
        var(--color-utility-white) 100%
        );

    padding: 7rem 0;
  }
  .recipe-slider-outer {
    padding:0 4rem;
    position:relative;
  }
  .benefits-content a.arrow {
    color: var(--color-brand-pink);
  }
  .benefits .header-block {
    padding:2rem;
  }
  .benefits .header-block > div{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items:flex-end;
  }

  .benefits .header-block h1 img {
    padding-left: 2rem;
  }
  .benefits .header-block h4 {
    color:var(--color-brand-pink)
  }
  .benefits-content {
    background-color: var(--color-utility-white);
    color: var(--color-brand-brown);
  }
  .benefits-content .swiper-slide > div{
    padding:1.5rem;
  }
  .benefits-content .featured-image {
    padding-bottom: 100%;
    background-size: cover;
    background-position: 50% 50%;
    margin-bottom:1em;
  }

  .benefits-content > div:not(:last-child) * + * {
    padding: .25rem 1rem;
    margin: 0;
  }

  .recipes-slide {
    padding: 2rem 0.8rem;
  }
  .benefits-content .swiper-slide.recipes-slide > div > * {
    padding-bottom: .5rem;
}

.benefits-content .swiper-slide.recipes-slide > div > div {
  padding-bottom: 60%;
  background-size:cover;
  margin-bottom: 1rem;
}


@media screen and (max-width:50em) {
  section.recipes {
    padding: var(--mobile-spacer) 0;
  }
  .header-block h1 img {
    padding-left: 1rem;
  }

  .recipes-slide {
    grid-template-columns: 1fr;
  }
  /* .recipes-slide > div ~ div {
    display:none;
  } */
}





/* kitchen-menu */
/* kitchen-menu */
.new-layout {
  display:grid;
  grid-template-columns: var(--mobile-margin) 1fr var(--mobile-margin);
  grid-row-gap: 2rem;
  padding: 4rem 0 0;
  background-color:var(--color-utility-white);
  color:var(--color-brand-brown);
  position:relative;
  min-height:38vmax;
}
.new-layout > * {
  grid-column: 2 / 3;
}
.new-layout > div:first-child {
  padding-top: calc(100% - var(--mobile-spacer)/2);
  background-size: cover;
}
.kitchen-nav {
  grid-column: 1 / -1;
}

.kitchen-menu .food-menu-images {
  position:relative;
}
.kitchen-menu .food-menu-images div {
  display:none;
  position:absolute;
  z-index:1;
  height:100%;
  width:100%;
  top:0;
  left:0;
  background-position:50% 50%;
  background-size:cover;
}
.kitchen-menu .food-menu-images div.active {
  display:block;
}



.kitchen-content {
  position: relative;
  display:none;
}
.kitchen-content.active {
  display:grid;
}
.kitchen-content h4 {
  color:var(--color-brand-green);
  font-weight:100;
}
.new-layout h1 {
  width:100%;
  display: flex;
  margin-bottom:1rem;
}
.new-layout p {
  color:#938e89;
}
.kitchen-content a {
  color:var(--color-brand-green);
  cursor:pointer;
}

.kitchen-nav {
  background-color: var(--color-brand-tan);
  color:var(--color-utility-white);
}

.kitchen-nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
}

.kitchen-nav ul li {
  font-size:1rem;
  cursor:pointer;
}
.kitchen-menu-full {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  grid-column: 1 / span 3;
  z-index:10;
  pointer-events:none;
  overflow:hidden;
}
.kitchen-menu-slideout {
  background:var(--color-brand-green);
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
  opacity:0;
  transform:translateX(100vw);
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  color:white;
}
.kitchen-menu-slideout > .container {
  height:100%;
}
.kitchen-menu-slideout .full-menu-slider {
  height:calc(100% - 86px);
  display: flex;
  align-items: center;
  padding: 0 var(--mobile-margin);
}
.full-menu-slider h3 {
  color:white;
  font-size:var(--h6-size);
}
.full-menu-slider p {
  color:var(--color-brand-green-lt);
  opacity:0.8;
  line-height: 1;
}
.full-menu-slider > div {
  height:100%;
  display: flex;
  align-items: center;
}
.full-menu-slider .menu-wrapper {
  overflow-x: scroll;
      white-space: nowrap;
      vertical-align: revert;
}
.full-menu-slider .menu-wrapper::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 2px;
  height:2px;
}
.full-menu-slider .menu-wrapper::-webkit-scrollbar-track {
  background:rgba(255,255,255,0.3);
}

.full-menu-slider .menu-wrapper::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: white;
}
.full-menu-slider .menu-wrapper .menu-group {
  padding: 0 4px;
  width: 25%;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
@media screen and (max-width:768px) {
  .full-menu-slider .menu-wrapper .menu-group {
    width:100%;
  }
  .kitchen-menu-slideout .full-menu-slider {
    box-sizing:border-box;
  }
  .full-menu-slider > div {
    width:100%;
  }
  .kitchen-menu-slideout {
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100%;
  }
}

.kitchen-menu-slideout.active {
  pointer-events:all;
  opacity:1;
  transform:translateX(0vw);
}
.close-kitchen-menu {
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  background:rgba(0,0,0,0.3);
  font-family:var(--font-brand);
  font-weight:200;
  z-index:10;
}
.close-kitchen-menu span {
  cursor:pointer;
}
.close-kitchen-menu span:hover {
  text-decoration:underline;
}
.close-kitchen-menu .container {
  padding:2em var(--mobile-margin);
}
.kitchen-nav {
  padding: 2rem var(--mobile-margin);
}




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

  .new-layout {
    display: grid;
    grid-template-areas:
        "a b"
        "a c";
    grid-template-columns: 50% 50%;
    grid-template-rows: 1fr auto;
    padding:0;
  }
  .new-layout > div:first-child{
    grid-area:a;
    padding-top: unset;
  }
  .new-layout > div:nth-child(2){
    padding: 5rem;
    max-width: calc(var(--container-width)/2);
    padding-right: 0;
    /* grid-area:b; */
  }
  .new-layout > div:nth-child(3){
    grid-area:c;
  }

  .kitchen-nav {
    padding: 2rem 5rem;
  }

  .kitchen-content h1 {
    margin-bottom:2rem;
    display:flex;
    justify-content: space-between;
  }
}
.kitchen-nav ul li {
  font-size: 1em;
  color:var(--color-brand-brown-lt);
  font-weight:200;
}
.kitchen-nav ul li.active {
  color:var(--color-utility-white);
  border-bottom: 1px solid;
}