:root {
  --niku-blue: #2D3E5D;
  --niku-blue-text: rgba(44, 61, 93, 0.62);
  --niku-blue-subtle: rgba(44, 61, 93, 0.14);
  --niku-black: #191717;
  --niku-cream: #F4F1D9;
  --niku-yellow: #D1B12C;
  --niku-brown: #B7732C;
  --niku-green: #564D22;
}

body {
  background-color: var(--niku-cream);
  font-family: 'Roboto', sans-serif;
  height: 100%;
  display: flex;
  flex-direction: column;
}

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

h5 {
  font-weight: 500 !important;
  font-size: 22px !important;
  padding: 25px !important;
  padding-bottom: 10px !important;
  line-height: 1.35em !important;
  letter-spacing: -.08rem !important;
}

h6 {
  font-weight: 400 !important;
  font-size: 18px !important;
  padding: 25px !important;
  padding-bottom: 10px !important;
  color: #706868;
}

#loading_shop {
  width: 100%;
  min-height: 100%;
}

/* New shop */
.container.container--wide {
  width: auto;
  max-width: 1140px
}

.title--big {
  font-size: 32px;
  font-weight: 500;
  color: var(--niku-blue);
}

#header_bar {
  text-align: center;
  background: var(--niku-blue);
  color: var(--niku-cream);
  font-size: 11px;
  padding: 10px 0;
  font-weight: 300;
}

#header_bar .container>span {
  display: flex;
  align-items: center;
  justify-content: center
}

#header_bar b {
  font-weight: 700;
}

.drop_shaddow {
  -moz-box-shadow: 3px 8px 40px 0px #D4D4D4;
  -webkit-box-shadow: 3px 8px 40px 0px #D4D4D4;
  box-shadow: 3px 8px 40px 0px #D4D4D4;
}

.card {
  background-color: #FFFFFF;
  overflow-y: hidden;
}

.new_btn {
  display: flex;
  justify-self: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 26px;
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  transition: .2s;
  border-radius: 8px;
  text-transform: uppercase;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  height: 51px;
  letter-spacing: 0.8px;
  cursor: pointer;
}

.blue_btn,
.blue_btn:hover,
.blue_btn:active {
  color: var(--niku-cream);
  background-color: var(--niku-blue);
  border-color: var(--niku-blue);
}

.blue_btn:disabled,
.blue_btn.disabled {
  background-color: var(--niku-blue-subtle);
  color: var(--niku-blue-text);
  border-color: var(--niku-blue-text);
}

.blue_btn:disabled {
  cursor: not-allowed !important;
}

.white_btn,
.white_btn:hover,
.white_btn:active {
  background-color: white;
  color: var(--niku-blue);
  border-color: var(--niku-blue);
}

.transparent_btn,
.transparent_btn:hover,
.transparent_btn:active {
  background-color: transparent;
  color: white;
  border-color: white;
}

.item_button {
  display: inline-block;
  background-color: var(--niku-blue);
  padding: 14px 26px;
  color: var(--niku-cream);
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 10px;
  transition: .2s;
  border-radius: 8px;
}

.item_button-nohover {
  cursor: default
}

.item_button:active {
  background-color: #230C0C;
}

.more_info_button {
  background-color: #FFF;
  font-weight: 400;
  font-size: 14px;
  padding: 0 0 5px;
  display: inline-block;
}

.item_button:active {
  background-color: #230C0C;
}

.menu_item {
  margin-bottom: 35px;
  padding-bottom: 15px;
  border-radius: 4px;
  text-align: center;
  position: relative;
  overflow: initial;
}

.menu_item::after {
  content: '';
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.21);
  transition: opacity 200ms
}

.menu_item:hover::after {
  opacity: 1
}

.menu_row {
  margin-bottom: 30px;
}

.menu_item .image {
  width: 80%;
  text-align: center;
  display: inline-block;
  margin: 35px 10% 0;
  cursor: pointer;
}

.menu_item .title {
  font-weight: 600;
  font-size: 17px;
  padding: 25px 25px 5px;
  margin: 0;
  cursor: pointer;
}

.menu_item .title_container {
  text-align: center;
  display: block;
}

.menu_item .add_cart+span:not([class]) {
  display: block;
  font-size: 13px;
  height: 20px;
  line-height: 1;
  margin: 0 0 6px
}

/* The container */
.checkmark_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 0;
  cursor: pointer;
  font-size: 30px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkmark_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.custom_checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: var(--niku-blue-subtle);
}

/* On mouse-over, add a grey background color */
.checkmark_container:hover input~.custom_checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkmark_container input:checked~.custom_checkmark {
  background-color: var(--niku-blue);
}

/* Create the custom_checkmark/indicator (hidden when not checked) */
.custom_checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the custom_checkmark when checked */
.checkmark_container input:checked~.custom_checkmark:after {
  display: block;
}

/* Style the custom_checkmark/indicator */
.checkmark_container .custom_checkmark:after {
  left: 10px;
  top: 5px;
  width: 5px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media only screen and (min-width: 700px) {
  #header_bar {
    font-size: 13px
  }

  #header_bar .container>span::before {
    content: '';
    width: 30px;
    flex-basis: 30px;
    flex-shrink: 0;
    height: 15px;
    margin-right: 10px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="15px"><path fill="%23F4F1D9" d="M20.648,-0.007 L8.849,-0.007 C8.449,-0.007 8.099,0.362 8.099,0.783 L8.099,11.993 C8.099,12.414 8.449,12.782 8.849,12.782 L10.649,12.782 C10.999,14.045 12.049,14.940 13.349,14.940 C14.649,14.940 15.699,14.045 16.048,12.782 L20.648,12.782 C21.049,12.782 21.399,12.414 21.399,11.993 L21.399,0.783 C21.399,0.362 21.049,-0.007 20.648,-0.007 ZM13.349,13.361 C12.649,13.361 12.049,12.730 12.049,11.993 C12.049,11.256 12.649,10.624 13.349,10.624 C14.048,10.624 14.649,11.256 14.649,11.993 C14.649,12.730 14.048,13.361 13.349,13.361 ZM19.899,11.203 L15.999,11.203 C15.649,9.940 14.598,9.046 13.299,9.046 C11.999,9.046 10.949,9.940 10.599,11.203 L9.549,11.203 L9.549,1.572 L19.849,1.572 L19.849,11.203 L19.899,11.203 ZM3.449,3.046 L0.749,3.046 C0.349,3.046 -0.001,2.677 -0.001,2.256 C-0.001,1.836 0.349,1.467 0.749,1.467 L3.449,1.467 C3.848,1.467 4.199,1.836 4.199,2.256 C4.199,2.677 3.899,3.046 3.449,3.046 ZM5.099,6.361 L2.399,6.361 C1.998,6.361 1.649,5.993 1.649,5.572 C1.649,5.151 1.998,4.783 2.399,4.783 L5.099,4.783 C5.499,4.783 5.849,5.151 5.849,5.572 C5.849,5.993 5.499,6.361 5.099,6.361 ZM7.449,8.888 C7.449,9.309 7.099,9.677 6.699,9.677 L3.999,9.677 C3.599,9.677 3.249,9.309 3.249,8.888 C3.249,8.466 3.599,8.098 3.999,8.098 L6.699,8.098 C7.099,8.098 7.449,8.466 7.449,8.888 ZM29.898,7.572 L26.799,2.520 C26.649,2.309 26.399,2.151 26.149,2.151 L22.399,2.151 L22.399,3.730 L25.749,3.730 L28.499,8.256 L28.499,11.256 L27.899,11.256 C27.549,9.993 26.498,9.098 25.199,9.098 C23.649,9.098 22.399,10.414 22.399,12.045 C22.399,13.677 23.649,14.993 25.199,14.993 C26.498,14.993 27.549,14.098 27.899,12.835 L29.249,12.835 C29.649,12.835 29.999,12.466 29.999,12.045 L29.999,7.993 C29.999,7.835 29.948,7.677 29.898,7.572 ZM25.199,13.361 C24.499,13.361 23.899,12.730 23.899,11.993 C23.899,11.256 24.499,10.624 25.199,10.624 C25.899,10.624 26.498,11.256 26.498,11.993 C26.498,12.730 25.899,13.361 25.199,13.361 Z"/></svg>')
  }

  #header_bar .container>.no-icon::before {
    content: none;
  }

}

.add_cart {
  cursor: pointer;
}

.section_sub_title {
  font-size: 15px;
  padding: 25px;
  text-align: center !important;
  display: inline-block;
  color: #230C0C;
  line-height: 30px;
  background-color: #FFFFFF;
  width: 100%;
}

#mission_container {
  display: inline-block;
  width: 100%;
  margin-top: 350px;
  background-image: url('');
  background-position: bottom;
  height: 400px;
  background-size: cover;
  margin-bottom: 80px;
}

#reviews_container {
  display: inline-block;
  width: 100%;
  margin-top: 35px;
  background-image: url('');
  background-position: bottom;
  background-size: cover;
  margin-bottom: 150px
}

.review_body_text {
  font-weight: 300;
  font-size: 13px;
}

.review_name {
  color: #230C0C;
  margin-top: -5px;
}

.buy_option_tile {
  cursor: pointer;
}

.buy_option_tile:hover {
  margin-top: -3px;
  transition: all .3s;
  -moz-box-shadow: 3px 8px 40px 0px #C9C9C9;
  -webkit-box-shadow: 3px 8px 40px 0px #C9C9C9;
  box-shadow: 3px 8px 40px 0px #C9C9C9;
}

/* breadcrumb */
.breadcrumb .link {
  display: block;
  font-size: 20px;
  text-decoration: none;
  color: #636363;
  margin-bottom: 30px;
}

.breadcrumb .link::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  position: relative;
  content: "\f054";
  font-size: 15px;
  margin: 0 15px;
}

.referral_field {
  box-sizing: border-box !important;
  height: 50px !important;
  border-radius: 0px !important;
  font-weight: 300 !important;
  margin-left: 25px !important;
  margin-right: 25px !important;
  width: 80% !important;
  padding-left: 20px !important;
}

.referral_field:focus {
  border-color: #230C0C !important;
}

.gift_card_tile {
  margin-bottom: 50px;
}


/* Browser Width Adjustments */
@media only screen and (max-width: 1060px) {
  .online_farmers_market_index_title {
    font-size: 18px;
  }
}

@media only screen and (max-width: 790px) {
  #cart_icon_and_count {
    margin-right: 55px;
  }
}

/* iOS Vertical */
@media only screen and (max-width: 1200px) {
  body {
    overflow-x: hidden
  }

  .online_farmers_market_index_title {
    font-size: 22px;
  }

  .index_card {
    margin-bottom: 50px;
  }

  #mission_container {
    height: auto;
    margin-top: 80px;
  }

  #reviews_container {
    height: auto;
    margin-top: 80px;
  }

  .mission_card {
    margin-bottom: 50px;
  }

  .menu_item {
    width: 100%;
    margin-bottom: 40px;
    display: inline-block;
  }

  .menu_section {
    height: auto;
  }

  #checkout {
    padding-bottom: 14px;
    display: inline-block;
    text-align: center;
    width: 100%;
  }

}

/* unused css? could not find in the codebase */
.referal_field_container {
  margin-top: 100px !important;
}

/* This happens when skeleton swaps 3 wide boxes to 1 per row */
@media only screen and (max-width: 700px) {
  .more_info_button {
    /* hidden unless on mobile*/
    display: inline-block;
  }

  .title--big {
    font-size: 22px;
    margin-bottom: 10px
  }

  .referal_field_container {
    margin-top: 70px !important;
  }

  .refer_a_friend {
    padding-top: 70px !important;
  }
}

.alert-container {
  display: none;
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 500;
  width: 100%;
  height: 100%;
  background-color: rgba(50, 50, 50, 0.8);
}

.alert-body {
  background-color: #ffffff;
  width: 90%;
  margin-top: 3%;
  height: auto;
  position: relative;
  padding: 30px;
}

.close_popup {
  color: #D4D4D4;
  background-color: white;
  border-color: #D4D4D4;
  cursor: pointer;
}

.close_popup:hover {
  background-color: #D4D4D4;
}

.close_popup_x {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #FFFFFF;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #230C0C;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  font-weight: 300;
}

.alert-body p {
  font-size: 13px;
}

.alert-body .alert-action {
  width: 100%;
}

.close_popup_x:hover {
  background-color: #EBEBEB
}

@media only screen and (min-width: 1200px) {
  .alert-body {
    width: 40%;
    padding: 50px;
  }

  .alert-body p {
    font-size: 16px;
  }
}

.offer-timer {
  display: none;
}

.timer-text {
  font-weight: bold;
}

.mcforms-wrapper {
  height: 0;
}