/* CSS Variables */
:root {
  
  /* Colors */
  --main-color: #2b3a2c;
  --secondary-color: #e2e3e9;
  --third-color: #CFCEB2;
  --fourth-color: #EBE9E3;
  --white-color: #fff;
  
  /* Typography */
  --font-main: 'Polymath', 'Arial', sans-serif;
  --font-secondary: 'ITC Garamond Std Book Narrow', sans-serif; 

  /* Layout */
  --container-max-width: 132rem; /* 1320px */
  --container-padding: 1.5em; /* 80px */
  
  /* Border Radius */
  --radius-sm: 0.875em; /* 14px */
  --radius-md: 1.25em; /* 20px */
  --radius-lg: 3.125em; /* 50px */
  --radius-full: 50%;

  --logo-max-width: 14em;
}


.absolute { position: absolute;}
.relative { position: relative; }

.large--show {display:block !important}
.large--hide {display:none !important}
.flex {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
.flex-wrap {-webkit-box-wrap: wrap; -moz-box-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.flex-1 {-webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1;}
.flex-1-0 {-webkit-box-flex: 1 0; -moz-box-flex: 1 0; -ms-flex: 1 0; -webkit-flex: 1 0; flex: 1 0;}
.direction-row {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}
.direction-column {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
.row-reverse {-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
.column-reverse {-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}
.justify-content-start {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
.justify-content-center {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.justify-content-end {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
.justify-content-around {-ms-flex-pack: distribute;justify-content: space-around;}
.justify-content-evenly {-ms-flex-pack: space-evenly;justify-content: space-evenly;}
.justify-content-between {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.align-items-start {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
.align-items-center {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.align-items-end {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
.align-content-start {-webkit-align-content: flex-start; align-content: flex-start;}
.align-content-center {-webkit-align-content: center; align-content: center;}
.align-content-end {-webkit-align-content: flex-end; align-content: flex-end;}

@media all and (min-width: 33.001em) and (max-width: 66em) {
  .medium--show{display:block !important}
  .medium--hide{display:none !important}
  .medium--flex {display: -webkit-box !important; display: -moz-box !important; display: -ms-flexbox !important; display: -webkit-flex !important; display: flex !important;}
  .medium--flex-wrap {-ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
  .medium--flex-1 {-webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;}
  .medium--flex-1-0 {-webkit-box-flex: 1 0; -moz-box-flex: 1 0; -ms-flex: 1 0; -webkit-flex: 1 0; flex: 1 0;}
  .medium--direction-row {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}
  .medium--direction-column {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
  .medium--row-reverse {-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
  .medium--column-reverse {-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}
  .medium--justify-content-start {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
  .medium--justify-content-center {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
  .medium--justify-content-end {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
  .medium--justify-content-around {-ms-flex-pack: distribute;justify-content: space-around;}
  .medium--justify-content-evenly {-ms-flex-pack: space-evenly;justify-content: space-evenly;}
  .medium--justify-content-between {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
  .medium--align-items-start {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
  .medium--align-items-center {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
  .medium--align-items-end {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
  .medium--align-content-start {-webkit-align-content: flex-start; align-content: flex-start;}
  .medium--align-content-center {-webkit-align-content: center; align-content: center;}
  .medium--align-content-end {-webkit-align-content: flex-end; align-content: flex-end;}
}

@media all and (max-width: 33em) {
  .small--show{display:block !important}
  .small--hide{display:none !important}
  .small--flex {display: -webkit-box !important; display: -moz-box !important; display: -ms-flexbox !important; display: -webkit-flex !important; display: flex !important;}
  .small--flex-wrap {-ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
  .small--flex-1 {-webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1;}
  .small--flex-1-0 {-webkit-box-flex: 1 0; -moz-box-flex: 1 0; -ms-flex: 1 0; -webkit-flex: 1 0; flex: 1 0;}
  .small--direction-row {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}
  .small--direction-column {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
  .small--row-reverse {-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
  .small--column-reverse {-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}
  .small--justify-content-start {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
  .small--justify-content-center {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
  .small--justify-content-end {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
  .small--justify-content-around {-ms-flex-pack: distribute;justify-content: space-around;}
  .small--justify-content-evenly {-ms-flex-pack: space-evenly;justify-content: space-evenly;}
  .small--justify-content-between {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
  .small--align-items-start {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
  .small--align-items-center {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
  .small--align-items-end {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
  .small--align-content-start {-webkit-align-content: flex-start; align-content: flex-start;}
  .small--align-content-center {-webkit-align-content: center; align-content: center;}
  .small--align-content-end {-webkit-align-content: flex-end; align-content: flex-end;}
}

.bg-main { background-color: var(--main-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-third { background-color: var(--third-color); }
.bg-white { background-color: var(--white-color); }
.text-main { color: var(--main-color); }
.text-secondary { color: var(--secondary-color); }
.text-third { color: var(--third-color); }
.text-white { color: var(--white-color); }

.container { max-width: var(--container-max-width); padding-left: var(--container-padding); padding-right: var(--container-padding); margin: auto; -moz-box-sizing: initial; -webkit-box-sizing: initial; box-sizing: border-box; }

.btn {
  text-align: center;
  font-size: 1.55rem;
  font-style: normal;
  font-weight: 800;
  line-height: 2rem;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  border-radius: var(--radius-lg);
  padding: .75em 1.5em;
  text-decoration: none;
  display: inline-block;
  transition: all .5s;
  font-weight: 600;
}
.btn:hover { opacity: .8; }
.btn.v1 { color: var(--main-color); background: var(--third-color); }

h1, h2, h3, h4, h5, h6 {
  text-transform: none;
}
h1 { font-family: var(--font-secondary); font-size: 9.6rem; line-height: 80%; font-weight: 700;}
h2 { font-family: var(--font-secondary); font-size: 6.4rem; font-weight: 700; line-height: 90%; }
.search-heading,
.pet-profile-heading {
  font-family: inherit!important;
}
h1 { font-family: var(--font-secondary); font-size: 9.6rem; line-height: 80%; font-weight: 700;}
h2 { font-family: var(--font-secondary); font-size: 6.4rem; font-weight: 700; line-height: 90%; }
h3 { font-family: var(--font-secondary); font-size: 4.8rem; font-weight: 700; line-height: 90%; }
h4 { font-family: var(--font-secondary); font-size: 1.9rem; font-weight: 700; line-height: 110%;}
.h1 { font-family: var(--font-secondary); font-size: 9.6rem; line-height: 80%; font-weight: 700;}
.h2 { font-family: var(--font-secondary); font-size: 6.4rem; font-weight: 700; line-height: 90%; }
.h3 { font-family: var(--font-secondary); font-size: 4.8rem; font-weight: 700; line-height: 90%; }
.h4 { font-family: var(--font-secondary); font-size: 1.9rem; font-weight: 700; line-height: 110%;}
@media all and (max-width: 33em) {
h1 { font-family: var(--font-secondary); font-size: 8rem; line-height: 80%; font-weight: 700;}
h2 { font-family: var(--font-secondary); font-size: 3.2rem; font-weight: 700; line-height: 90%; }
h3 { font-family: var(--font-secondary); font-size: 3.2rem; font-weight: 700; line-height: 90%; }
h4 { font-family: var(--font-secondary); font-size: 1.6rem; font-weight: 700; line-height: 110%;}
.h1 { font-family: var(--font-secondary); font-size: 8rem; line-height: 80%; font-weight: 700;}
.h2 { font-family: var(--font-secondary); font-size: 4.8rem; font-weight: 700; line-height: 90%; }
.h3 { font-family: var(--font-secondary); font-size: 3.2rem; font-weight: 700; line-height: 90%; }
.h4 { font-family: var(--font-secondary); font-size: 1.6rem; font-weight: 700; line-height: 110%;}
}
img { width: 100%; }


.image-text {
  background-color: var(--bg-color);
}
.image-text .image-content { 
  width: var(--width-image);
}
.image-text .image-content img {
  width: 100%;
  height: 100%;
}
@media (min-width: 33em) {
  .frm-bowl img {
    object-fit: cover;
    object-position: right;
  }
}
.image-text .text-content { 
  width: var(--width-text); 
  color: var(--text-color);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding-top: var(--text-padding);
  padding-bottom: var(--text-padding);
}
.image-text .text-content h2 {
  color: inherit;
}

.image-text.container-right .text-content {
  padding-left: var(--text-padding);
  padding-right: var(--container-padding);
}
.image-text.container-full .text-content {
  padding-left: var(--text-padding);
  padding-right: var(--container-padding);
}
.image-text.container-full .image-content {
  padding-right: var(--container-padding);
}

.image-text.capped > div:not(.heading) { max-width: calc(var(--container-max-width) + 30em); margin: 0 auto; }

@media all and (max-width: 33em) {
  .image-text.container-full .image-content {
    padding-left: var(--container-padding);
  }
}




#hero {
  --hero-captions-width: 40%;
}
#cta-1 {
  --width-image: 50%;
  --width-text: 50%;
  --bg-color: var(--main-color);
  --text-color: var(--secondary-color);
  --text-padding: 4em;
}
#ingredients {
  --width-image: 50%;
  --width-text: 50%;
  --bg-color: var(--third-color);
  --text-color: var(--main-color);
  --text-padding: 12.8rem;
}
#instructions {
  --width-image: 40%;
  --width-text: 60%;
  --bg-color: var(--fourth-color);
  --text-color: var(--main-color);
  --text-padding: 8em;
}
#cta-2 {
  --width-image: 50%;
  --width-text: 50%;
  --bg-color: var(--main-color);
  --text-color: var(--secondary-color);
  --text-padding: 4em;
}
#cta-2 .video-container {
  position: relative;
  height: 600px;     /* or any height you want */
  overflow: hidden;
}
#cta-2 .video-container video { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* cover container while preserving aspect ratio */
}
#cta-3 {
  --width-image: 50%;
  --width-text: 50%;
  --bg-color: var(--main-color);
  --text-color: var(--secondary-color);
  --text-padding: 4em;
}
#cta-3 .image-content {
  height: 600px;     
  overflow: hidden;
}
@media all and (max-width: 66em) {
  #hero {
    --hero-captions-width: 70%;
  }    
  #ingredients {
    --width-image: 100%;
    --width-text: 100%;
    --text-padding: var(--container-padding);
  }
}
@media all and (max-width: 33em) {
  #hero {
    --hero-captions-width: 100%;
  }
  #cta-1 {
    --width-image: 100%;
    --width-text: 100%;
    --text-padding: 2em;
  }
  #instructions {
    --width-image: 100%;
    --width-text: 100%;
    --text-padding: var(--container-padding);
  }
  #cta-2 {
    --width-image: 100%;
    --width-text: 100%;
    --text-padding: 2em;
  }
  #cta-2 .video-container {
    height: 300px;
  }
  #cta-3 {
    --width-image: 100%;
    --width-text: 100%;
    --text-padding: 2em;
  }
}
.hero .hero-subtitle {
  font-weight: 500;
}
.cta-button {
  font-weight: 700;
}
section#products {
  margin: 0;
}
.benefits .grid-row {
  color: var(--main-color);
}
.benefits .grid-row .grid-caption {
  font-weight: 400;
}
#spinner {
  color: var(--main-color); 
}
.accordion .accordion-item {
  border: none!important;
  background: transparent;
}
.accordion {
  padding-left: 0;
}
.video-container {
  padding-top: 0;
}
footer {
  padding: 0;
}
.product-card .product-availability {
    font-size: 1.36rem;
  }
  .benefits .grid-header .no span {font-size: 1.4rem;}
  .benefits .grid-row {
    gap: .55rem;
  }
  .hero .hero-subtitle sup {top: -.5em;}
@media (min-width: 66em) {
  
  .hero {}
  .hero .hero-subtitle {
    font-size: 3rem;
  }
  .cta-button {
    font-size: 1.34rem;
    line-height: 2rem;
  }
  .benefits .grid-row .grid-caption {
    font-size: 2.2rem;
    padding: .6em;
  }
  .ingredients .text-content p {font-size: 2rem; max-width: 44.8em}
  .ingredients .text-content {
    padding-top: 24rem;
    padding-bottom: 24rem;
  }
  .spin-wrap .spin-image {
    width: 35.2rem;
    height: 35.2rem;
  }
  .spinner {font-size: 4rem;}
  .instructions .text-content h3 {font-size: 3.2rem;}
  .instructions .text-content p {font-size: 2rem;}
  .instructions .image-content img {
    max-width: 46.6rem;
  }
  .scrolling-text-group .text {font-size: 2rem;}
  .social p {
    font-size: 2rem;
  }
  .social .social-icon {
    width: 4.9rem;
    height: 4.9rem;
  }
}
.scarcity-signal {
  margin-top: 2rem;
  font-size: 1.8rem
}
.spin-wrap {
  overflow: hidden;
}
.spinner {
  top: -14%;
}
@media (max-width: 66em) and (min-width: 33em) {
  .benefits .grid-row .grid-caption {
    font-size: 1.6rem;
  }
  .ingredients .text-content p {margin-left: auto; margin-right: auto;}
  .instructions .text-content h3 {font-size: 3.2rem};
  .instructions .text-content p {font-size: 2rem;}
  .scrolling-text-group .text {
    font-size: 2rem;
  }
}
@media (max-width: 33em) {
  .scarcity-signal { 
    text-align: center;
    width: 100%;
  }
  .hero .captions {
    justify-content: flex-start!important;
    flex-direction: column;
    padding: 2rem 0;
  }
  .hero .captions .hero-content {
    align-items: flex-start;
  }
  .hero h1 {
    font-size: 4rem;
  }
  .hero .hero-subtitle {
    font-size: 2rem;
  }
  .cta-button,
  .store-button {
    margin-left: auto;
    margin-right: auto;
  }
  .benefits .grid-row .grid-caption {
    font-size: 1.6rem;
  }
  .ingredients .text-content .h3 {
    font-size: 3.6rem;
  }
  .ingredients .text-content p {
    font-size: 1.6rem;
  }
  .instructions .text-content > h3 {
    font-size: 2.6rem;
  }
  .instructions .text-content p {
    font-size: 1.4rem;
    font-weight: 500;
  }
  .instructions .text-content .accordion-header h3 {
    font-size: 2.6rem;
  }
  .scrolling-text-group .text {
    font-size: 2rem;
  }
  .social p {
    font-size: 1.6rem;
  }
  footer {
    padding-bottom: 6rem;
  }
}