/**
 * @file
 * Styles for Bootstrap Barrio page.
 */

/* Hack for .placeholder issue https://www.drupal.org/project/drupal/issues/3233533 */

:root {
  --primaryColor: #fad309;
  --secondaryColor: #111211;
  --greyColor: #f5f5f5;
  --veganColor: #e6e9d8;
}

.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 200,
    "GRAD" -25,
    "opsz" 20;
}
body {
  color: var(--secondaryColor);
}
em.placeholder {
  vertical-align: unset !important;
  cursor: unset !important;
  background-color: unset !important;
  opacity: unset !important;
}
section.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  /* margin-top: 66px; */
  z-index: 20;
  height: 75px;
  background-color: var(--secondaryColor);
}
nav#navbar-main img {
  width: 17%;
  z-index: 20;
  transition: all ease-in-out 0.3s;
}
nav#navbar-main .navbar-brand img {
  width: 95.5%;
  z-index: 100;
  position: relative;
}
a.navbar-brand {
  width: 223px;
  top: 50px;
  position: relative;
  z-index: 100;
  /* background: rebeccapurple; */
  height: 179px;
  text-align: center;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: var(--primaryColor) !important;
}
nav#navbar-main {
  height: 85px;
  background: var(--secondaryColor) !important;
}
.nav-item a.is-active,
.nav-item a.active,
.nav-item a:hover {
  color: var(--primaryColor) !important;
  position: relative;
  transition: color ease-in-out 0.3s;
}
.nav-item a.is-active::after,
.nav-item a.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 15%;
  width: 60%;
  height: 2px;
  background-color: var(--primaryColor);
  transition: all ease-in-out 0.3s;
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
  color: var(--primaryColor);
}
.navbar-dark .nav-link {
  color: #fff;
}

li.tb-grid a {
  text-decoration: none;
  font-weight: 600;
  color: var(--secondaryColor);
  opacity: 0.7;
  transition: all ease-in-out 0.3s;
  position: relative;
}
li.tb-grid a::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 39%;
  width: 22%;
  height: 2px;
  background-color: var(--primaryColor);
  transition: all ease-in-out 0.3s;
  display: none;
}

li.tb-grid a:hover {
  opacity: 1;
  /* color: var(--primaryColor); */
}
:is(li.tb-grid a:hover)::after {
  display: block;
}

.slide .container {
  align-self: flex-end;
  justify-self: flex-end;
  z-index: 1;
}

.slide {
  display: grid;
}
.slide > * {
  grid-area: 1/1;
}

.slide a.btn {
  background-color: var(--primaryColor);
  font-weight: 600;
  border-radius: 2px;
}
.slide h2 {
  font-weight: bolder;
  font-size: 44px;
  line-height: 1.1;
  position: relative;
  margin-bottom: 25px;
}

.slide h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--primaryColor);
}
.slide p {
  font-size: 18px;
  font-weight: 500;
  /* line-height: 1.3; */
}

.cat img {
  width: 22%;
  height: auto;
}
.cat a {
  color: var(--secondaryColor);
}

.cat-row {
  margin-bottom: 20px;
}

.cat a {
  padding: 20px;
  /* border: 1px solid; */
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  text-decoration: none;
}
.cat a:hover {
  background-color: var(--primaryColor);
  transition: all ease-in-out 0.3s;
}

.cat a span {
  background: var(--primaryColor);
  height: 1px;
  width: 15%;
}
.cat a:hover span {
  background: var(--secondaryColor);
  transition: all ease-in-out 0.3s;
}

.taxo_bnr {
  position: relative;
  width: 100%;
  height: clamp(220px, 40vw, 550px);
  display: block;
  overflow: hidden;
}
.taxo_bnr img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

div#CollapsingNavbar {
  z-index: 30;
  color: #fff;
}

.tb-megamenu-submenu.mega-drop.dropdown-menu.mega-dropdown-menu.nav-child {
  width: 100vw;
  /* min-width: 1920px; */
  left: -100%;
}

.mega-menu-block-drop-wrap {
  top: 84px;
  box-shadow: 0 2px 6px #00000020;
  opacity: 0;
  visibility: hidden;
  height: 0;
  right: 0;
  width: 100%;
  background: #fff;
  z-index: 5;
  position: absolute;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.mega-menu-block-drop-wrap.show {
  opacity: 1;
  visibility: visible;
  height: auto;
}

/* .tb-meme-menu ul li {
    display: inline-block;
} */
.tb-meme-menu ul {
  display: flex;
  align-items: center;
  justify-content: center;
}
._meme_img img {
  width: 20%;
  height: auto;
}
.tb_meme {
  text-align: center;
  padding: 15px 0;
}

.nav-link {
  cursor: pointer;
  text-transform: capitalize;
}

.path-frontpage #main-wrapper {
  background-color: var(--greyColor);
}

.block.block-layout-builder.block-field-blocknodeproductstitle {
  font-weight: bold;
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.view-product-adons
  .view-content.row
  div
  :is(
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default,
    .ui-button,
    html .ui-button.ui-state-disabled:hover,
    html .ui-button.ui-state-disabled:active
  ) {
  border: 1px solid transparent;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: transparent;
  font-weight: normal;
  color: #454545;
}
.view-product-adons
  .view-content.row
  div:nth-child(even)
  :is(
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default,
    .ui-button,
    html .ui-button.ui-state-disabled:hover,
    html .ui-button.ui-state-disabled:active
  ) {
  border-top: none;
}

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0.6em 0.5em 0.6em 0;
  font-size: 100%;
  text-transform: uppercase;
  font-weight: 800 !important;
}
.ui-accordion .ui-accordion-header::after {
  content: "+";
  position: absolute;
  top: 15%;
  right: 0;
  width: 20px;
  height: 20px;
}
.ui-accordion .ui-accordion-header.ui-accordion-header-active::after {
  content: "\2015";
}
.ui-accordion .ui-accordion-content {
  padding: 1em 0;
  border-top: 0;
  overflow: auto;
  font-size: 16px;
}
.ui-accordion .ui-accordion-content li {
  padding: 5px 0;
}
.ui-widget-content {
  border: none;
  border-bottom: 1px solid #000;
  border-radius: 0;
  background: #ffffff /*{bgColorContent}*/ /*{bgImgUrlContent}*/
    /*{bgContentXPos}*/ /*{bgContentYPos}*/ /*{bgContentRepeat}*/;
  color: #333333 /*{fcContent}*/;
}
.block.block-layout-builder.block-field-blocknodeproductsfield-category a {
  text-decoration: none;
  font-weight: 600;
  /* font-size: 14px; */
  color: #00000050;
}

.block-field-blocknodeproductsfield-category .field--type-entity-reference {
  margin: 0;
}

.views-field.views-field-field-slideshow-image img {
  width: 100%;
  height: auto;
}

.intro_sect {
  background-color: var(--secondaryColor);
  color: #fff;
}
.m-con {
  font-size: 49px !important;
  color: var(--primaryColor);
  margin-right: 10px;
}
.prod img {
  width: 50% !important;
  height: auto;
  margin: auto;
}
.prod .img_ {
  background-color: var(--greyColor);
}

.prod {
  text-align: center;
  border: 1px solid #00000020;
  margin: 4%;
  border-radius: 5px;
}
.prod .btn {
  background: var(--primaryColor) !important;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  padding: 8px 12px;
}

.prod-wrap a {
  color: var(--secondaryColor);
  text-decoration: none;
}
.prod-wrap {
  position: relative;
}

.prod-wrap .owl-nav {
  position: absolute;
  top: -78px;
  right: 32px;
  display: flex;
  align-items: center;
}
.prod-wrap .owl-carousel .owl-nav button.owl-prev,
.prod-wrap .owl-carousel .owl-nav button.owl-next {
  background: #11121169 !important;
  color: white;
  padding: 0 !important;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}
.prod-wrap .owl-carousel .owl-nav button.owl-prev:hover,
.prod-wrap .owl-carousel .owl-nav button.owl-next:hover {
  background: var(--secondaryColor) !important ;
}
.owl-theme .owl-dots .owl-dot span {
  width: 11px;
  height: 11px;
  margin: 5px 7px;
  background: #d6d6d6;
  display: block;
  border-radius: 30px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--secondaryColor);
}

.uline {
  position: relative;
  margin-bottom: 35px;
}

.uline::after {
  content: "";
  position: absolute;
  left: 47.5%;
  right: 0;
  width: 5%;
  height: 2px;
  background-color: var(--primaryColor);
}

header#header {
  position: fixed;
  z-index: 20;
  width: 100%;
  height: 54px;
}

.navbar-brand img {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.5)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
}

.navbar-brand img.glass-premium {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.05)
  );

  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow:
    0 8px 32px rgba(31, 38, 135, 0.25),
    inset 0 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px rgba(255, 255, 255, 0.05);

  border-radius: 5px;
}

.page-vocabulary-product-category div#main-wrapper {
  padding-top: 20px;
  padding-bottom: 100px;
}
.node--type-products div#main-wrapper {
  padding-top: 200px;
  padding-bottom: 100px;
}

.cta_h {
  font-size: 35px;
  font-weight: 800;
}
a.btn_cta.btn {
  background-color: var(--secondaryColor);
  color: #fff;
  padding: 10px 20px;
}

#flw i {
  font-size: 25px;
}

ul#cd i {
  font-size: 24px;
}

ul#cd li {
  margin-bottom: 13px;
  font-size: 16px;
}
ul#cd i {
  font-size: 20px;
  color: var(--primaryColor);
}

ul#f-menu a {
  text-decoration: none;
  text-transform: capitalize;
  font-size: 15px;
  /* margin-bottom: 14px; */
}
ul#f-menu li {
  margin-bottom: 13px;
  display: block;
}
div#ab p {
  font-size: 16px;
}

.category-wrapper {
  background-color: var(--greyColor);
  padding: 20px 0;
}

.site-footer h5 {
  margin-bottom: 20px;
  /* color: var(--primaryColor); */
}

.site-footer .content ol:not(.menu),
.site-footer .content ul:not(.menu) {
  padding-left: 0 !important;
}

.site-footer {
  padding: 35px 0 30px;
  background: var(--secondaryColor) !important;
}

.highlighted {
  position: relative;
}

a.btn.btn-main {
  background-color: var(--secondaryColor);
  color: #fff;
  padding: 0.65rem 3.45rem;
  border-radius: 3px;
}
a.btn.btn-main:hover {
  background-color: var(--primaryColor);
  color: var(--secondaryColor);
}

.filler_img {
  background: url(../../images/farm_pic.png) no-repeat scroll center / cover;
  object-fit: cover;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.tm_ .filler_img {
  background: url(https://img.magnific.com/free-photo/portrait-cheerful-young-doctor-listening-with-stethoscope_1262-12390.jpg)
    no-repeat scroll top center / cover;
}

.filler_img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #11121135;
}

.fillerstrip {
  background-color: var(--secondaryColor);
  color: #f5f5f5;
}
.fillerstrip a {
  border-color: #fff;
  color: #f5f5f5;
  border-radius: 3px;
}
.ptl {
  font-weight: bold;
  font-size: 30px;
}
small._fsb {
  text-transform: uppercase;
  font-weight: 700;
  color: var(--primaryColor);
}

.bg-grey {
  background-color: var(--greyColor);
}

.page-banner {
  max-height: 65dvh;
  overflow: hidden;
  position: relative;
  height: auto;
  display: grid;
  width: 100%;
}
.page-banner img {
  object-fit: fill;
  /* position: absolute; */
  grid-area: 1/1;
  width: 100%;
  height: auto;
}

._cn {
  border-radius: 50%;
  background: var(--veganColor);
  display: grid;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 7px;
  width: 65px;
  height: 65px;
}
#imp img {
  width: 80%;
  height: auto;
  margin: auto;
}
._imp_t {
  font-weight: 600;
  font-size: 22px;
}

.outs {
  background-color: var(--greyColor);
}

.idx_1 {
  background-color: var(--veganColor);
  padding: 0 40px;
}
.idx_0 .idx_inner {
  padding-right: 80px;
}

.subt {
  text-transform: uppercase;
  font-weight: 600;
}

.out_l {
  font-size: 24px;
  padding: 20px 0;
  font-weight: 700;
}
.dtcont_ {
  width: 50px;
  height: 50px;
  background: var(--veganColor);
  display: grid;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* padding: 9px; */
}

.wh_bg {
  height: 100%;
}

a.poc {
  color: var(--secondaryColor);
  text-decoration: none;
}

a.poc img {
  width: 100%;
  height: auto;
}
a.poc:hover {
  background-color: var(--greyColor);
  display: block;
}
a.poc:hover span {
  background-color: var(--secondaryColor);
  color: #f5f5f5;
  transition: all ease-in-out 0.3s;
}

.poc-list ul {
  margin: 0;
  padding: 0;
}
.poc-list li {
  display: block;
}

.block-views-blockproduct-categories-block-4 {
  background-color: var(--greyColor);
  padding: 20px 0;
}

.poc-cat .view-content.row {
  align-items: center;
  justify-content: center;
}

.poc-cat .col a {
  color: var(--secondaryColor);
  text-decoration: none;
  transition: color ease-in-out 0.3s;
}

.poc-cat .col a:hover {
  color: var(--primaryColor);
}
.map {
  height: 600px;
  width: 100%;
}

.blog {
  img {
    width: 100%;
    height: auto;
  }
  a {
    color: var(--secondaryColor);
    text-decoration: none;
    .btn {
      border-color: var(--secondaryColor);
    }
    :hover {
      text-decoration: underline;
      .btn {
        background-color: var(--secondaryColor);
        color: white;
      }
    }
  }
}

.node--type-products img {
  width: 100%;
  height: auto;
}

.site-footer__bottom {
  letter-spacing: 0.2px;
  margin-top: 0 !important;
  border-top: 0 !important;
  border-color: rgba(255, 255, 255, 0.15);
}

@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
    gap: 52px;
  }
}

@media (max-width: 1199px) {
  nav#navbar-main {
    height: auto;
    background: var(--secondaryColor) !important;
  }

  header#header {
    position: relative;
    z-index: 20;
    width: 100%;
    height: auto;
  }

  a.navbar-brand {
    width: 223px;
    top: 0;
    position: relative;
    height: auto;
    text-align: center;
  }
  nav#navbar-main .navbar-brand img {
    width: 67.5%;
    background: linear-gradient(135deg, rgb(255 255 255), rgb(255 255 255));
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
      0 8px 32px rgba(31, 38, 135, 0.25),
      inset 0 1px rgba(255, 255, 255, 0.25),
      inset 0 -1px rgba(255, 255, 255, 0.05);
    border-radius: 5px;
  }
  .idx_1 {
    padding: 0 20px;
  }
  .idx_0 .idx_inner {
    padding-right: 20px;
  }
  .filler_img {
    height: 350px;
  }
  .views-field.views-field-field-slideshow-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    bottom: 0;
  }
  .slide p {
    font-size: 13px;
  }
  .slide h2 {
    font-size: 28px;
  }
  .m-con {
    font-size: 40px !important;
  }
  .hm .w-75 {
    width: 100% !important;
  }
  .uline {
    margin-bottom: 22px;
  }
  button.navbar-toggler.collapsed {
    background-color: #fff;
  }

  .node--type-products div#main-wrapper,
  .page-vocabulary-product-category div#main-wrapper {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .vocabulary-product-category .w-75 {
    width: 100% !important;
  }
  .site-footer__bottom .col {
    border-bottom: 1px solid #ffffff20;
  }
  .mega-menu-block-drop-wrap.show {
    opacity: 1;
    height: 100%;
    position: fixed;
    overflow: scroll;
    top: 0;
    padding-top: 40px;
  }
  .tb-meme-menu ul {
    display: block;
    align-items: left;
    justify-content: left;
  }

  .tb-meme-menu ul li {
    border-bottom: 1px solid #11121130;
  }
  /* .tb_meme {
    text-align: left;
    padding: 15px 0;
  } */
  ._meme_img img {
    width: 10% !important;
  }
  a.navbar-brand {
    z-index: 5;
  }
}