#hero {
    height: 50vh;
    min-height: 330px;
    background-image: url(../jpg/home-hero-mobile-2.jpg);
    background-color: transparent;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  
  #hero .hero-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;
  }

body.page-template-blog #hero .hero-cont {
    display: flex;
	justify-content: start;
	align-items: flex-start;
	height:100%;
  }

  #hero .hero-copy h1 {
    color:#fff;
    font-size: 2.5rem;
    line-height: 2.6rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 30px;
  }
    #hero .hero-copy h1 sup {
      font-size: 40%;
      top:-22px;
    }

@media only screen and (min-width:576px) {
  #hero .hero-copy {
    width:90%;
  }
    #hero .hero-copy h1 {
      font-size: 2.8rem;
      line-height: 2.9rem;
    }
}
  
  #hero .hero-copy a:hover,
  a.btn-default:hover {
    background-color:#ffffff;
    color: #283745;
  }

  a.btn-default.white {
    background-color: #fff;

  }

  #bowl{}

  #bowl .hero-bowl-cont{
    margin: -120px 0 50px;
  }

  #bowl .hero-bowl{ 
    background-image: url(../png/bowl-sm.png);
    background-color: transparent;
    background-position: center center;
    background-size: 250px auto;
    background-repeat: no-repeat;
    width: 100%;
    height: 270px;
    z-index: 1;
  }

  #bowl .hero-bowl-cont svg {
    fill: #fbdfca;
    width: 240px;
    height: 240px;
    position: absolute;
    top: 40px;
    left:50%;
    transform: translateX(-50%);
    z-index: 0;
  }

  .hero-bene {
    margin-bottom: 50px;
  }

  .hero-bene h2 {
    text-align: center;
    margin-bottom: 15px;
  }


#raw-continuum{
  margin:50px 0;
}

.sec-title {
  margin-bottom: 25px;
}
.sec-title h2{
  margin-bottom: 20px;
}

@media (min-width: 1600px) {
  .col-xxl {
    flex: 1 0 0%;
    max-width: none;
  }
}

.rc-single .rc-bowl {
  display:flex;
  background-color: #fbdfca;
  text-align: center;
  flex-direction: column;
  justify-content:space-between;
  transition: all .25s;
}

.rc-single .rc-bowl h6 {
  color:#283745;
  padding: 20px 0 10px;
  margin:0;
  display: none;
}
.rc-single .rc-bowl h5 {
  padding: 10px 0 20px;
  margin:0;
  display: none;
}

.rc-single .rc-bowl img {
  padding: 30px;
  max-height:300px;
  align-self:center;
}

.rc-single .rc-copy {
  width:100%;
  background-color: #253746;
  text-align: center;
  padding: 50px 30px;
  transition: all .25s;
}

.rc-single .rc-copy p {
  color:#fff;
  margin-bottom: 30px;
}

.rc-single .rc-copy h5,
.rc-single .rc-copy h6 {
  margin-bottom: 15px;
}

#petsfav {
  margin: 50px 0;
  overflow: hidden;
}

#petsfav h2 {
  max-width: 380px;
  margin: 0 auto 20px;
}

#petsfav .pf-select-cont .bkg-color-band {
  position: absolute;
  height: 215px;
  width: 100%;
  bottom: 25px;
  background: linear-gradient(90deg, #fbdfca 50%, #ebeff3 50%);
}

.pf-cta-cont {
  height: 44px;
}

a.btn-ps-dog{
  display: block;
  width: 88%;
  max-width: 200px;
  background-color:#fbdfca;
  color: #606060;
  text-align: center;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration:none;
  transition: all .75s;
  float:right;
  border: 2px solid #fbdfca;
}
a.btn-ps-cat{
  display: block;
  width: 88%;
  max-width: 200px;
  background-color:#ebeff3;
  color: #606060;
  text-align: center;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration:none;
  transition: all .75s;
  border: 2px solid #ebeff3;
}

.dog-side,
.cat-side {
  height: 260px;
}

.dog-side .doggo-1{
  position: absolute;
  bottom: 30px;
  right: 10%;
  max-height:100%;
}
.cat-side .catta-1{
  position: absolute;
  bottom: 26px;
  left: -6%;
  max-height:125%;
}
.cat-side .catta-2,
.cat-side .catta-3,
.dog-side .doggo-2 {
  display:none;
}

#testimonals{
  margin: 50px 0;
  overflow: hidden;
}

.testa-quotes {
  padding: 40px 40px 130px;
  background-color: #fbdfca;
}
.quote-cont {
  display:flex;
  margin: 30px 0;
  height: 225px;
  overflow:hidden;
}

blockquote {
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  background-color: #fbdfca;
  opacity:0;
}

blockquote.active {
  opacity:1;
}

blockquote p {
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 2.8rem;
}

blockquote p.author {
  font-weight: 600;
  font-size: 1.6rem;
  text-transform: uppercase;
}
.testa-pics{
  height: 350px;
  overflow:hidden;
}

.testa-pics .testa-img-cont {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 350px;
  opacity:0;
  background-color: transparent;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -o-transition:all 0.5s ease;
  transition:all 0.5s ease;
}

.testa-pics .testa-img-cont.active {
  opacity:1;
}

.pag-arrow {
  height: 80px;
  width: 80px;
  position: absolute;
  bottom: 310px;
  left: 50%;
  z-index:50;
  padding:0;  
  margin-left:-40px;
  cursor: pointer;
  overflow: hidden;
}

.pag-arrow svg {
  fill: #fbdfca;
  transition: all .25s;
}

.pag-arrow:hover svg{
  fill: #fff;
}



.pag-arrow .arrow-grey {
  height:25px;
  width:25px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  transition: all .25s;
}



.pag-cont {
  position: absolute;
  bottom: 400px;
}

.pag-incicator {
  text-align: center;
}

.pag-incicator svg {
  height: 20px;
  width: 20px;
  display: inline-block;
  fill:none;
  stroke: #6e6e6e;
  stroke-width: 2px;
  cursor:pointer;
}
  .pag-incicator svg:hover {
    stroke:#ff6100;
  }
  .pag-incicator svg.active {
    fill:#ff6100;
    stroke:#ff6100;
    fill-opacity: 1;
  }

#our-favs {
  margin: 50px 0;
}

.of-single {
  border-left: 2px solid #fff;
}

.of-single:first-child {
  border-left: none;
}

.of-single a {
  color:unset;
  text-decoration:none;
}

.of-single .ofs-prod-img{
  background-color: #fbdfca;
  padding: 15px;
  margin-bottom: 20px;
  text-align: center;
}

.of-single .ofs-cta {
  padding: 15px;
}
.of-single .ofs-cta h5 {
  color:#283745;
}

.of-single .ofs-cta h5:after {
  display: inline-block;
  content: url(../svg/blue-arrow.svg);
  width: 9px;
  margin-left:15px;
  position: relative;
  top: 1px;
} 


#social-media {
  margin: 50px 0;
}

.sm-single{
  margin-left:1px;
}
.sm-single:first-child{
  margin-left:0;
}
.sm-cta-links{
  text-align: center;
  margin-top: 20px
}

a.btn-social{
  position: relative;
  display:inline-block;
  background-color: #fbdfca;
  border: 2px solid #fbdfca;
  width:58px;
  height:58px;
  border-radius: 30px;
  margin: 0 2px;
  transition: all .25s;
}
a.btn-social svg {
  fill: #6e6e6e;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

a.btn-social.cta-facebook svg{
  height: 30px;
}
a.btn-social.cta-instagram svg{
  height: 30px;
}

a.btn-social.cta-tiktok svg{
  height: 30px;
}

a.btn-social:hover {
  background-color: #fff;
  border: 2px solid #6e6e6e;
}

#what-is-raw {
  margin-bottom: 100px;
}

.wir-copy {
  padding: 50px 25px;
}

.wir-copy h2 {
  margin-bottom: 15px;
}

.wir-image{
  display: block;
  width: 100%;
  height: 250px;
  opacity:1;
  background-color: transparent;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 395px) {
  #petsfav .pf-select-cont {
    margin-top:60px;
  }
}

@media (min-width: 576px) {
  #petsfav .pf-select-cont {
    margin-top:90px;
  }
}
@media (min-width: 768px) {
  #hero {
    height: 60vh;
    background-image: url(../jpg/home-hero-md-2.jpg);
  }
  #hero .hero-copy {
    width:80%;
  }
  #hero .hero-copy h1 {
    font-size: 3.5rem;
    line-height: 3.6rem;
  }

  #bowl {
    height:150vh;
    max-height: 1350px;
  }


  #bowl .hero-bowl-cont{
    position: sticky;
    margin:  0 0;
    z-index: 201;
    top: 53%;
    left: 50%;
    right: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 284px;
    width: 100%;
    max-width:450px;
  }

  #bowl .hero-bowl{ 
    background-image: url(../png/bowl-lg.png);
    background-size: 450px auto;
    height: 470px;
  }
  #bowl .hero-bowl-cont svg {
    width: 450px;
    height: 450px;
  }

  #bowl .hero-bene {
    position: sticky;
    height:60vh;
    top: 48%;
    left: 0;
    transform: translateY(-50%);
    z-index: 200;
  }

  .bene-copy {
    opacity: 0;
    transition: all .5s;
  }

  .bene-copy.inview {
    opacity: 1;
  }

  

  .bene-icon-cont {
    width: 100%;
    height: 600px;
    display: block; 
    overflow:hidden;
  }
  .bene-single {
    position:absolute;
    width: 125px;
    padding: 30px 0;
    opacity:0;
    top: 0;
    transition: all .5s;
  }

  .bene-single.digestion {
    left: -12%;
  }
  .bene-single.coat {
    right: -12%;
    left: auto;
  }

  .bene-single.energy {
    left: -12%;
    top: 180px;
  }

  .bene-single.begging {
    right: -12%;
    left: auto;
    top: 180px;
  }

  .bene-single.muscle {
    left: -12%;
    top: 380px;
  }
  .bene-single.poop {
    right: -12%;
    left: auto;
    top: 380px;
  }

  .bene-single.digestion.inview,
  .bene-single.energy.inview,
  .bene-single.muscle.inview{
    left: -2%;
  }

  .bene-single.coat.inview,
  .bene-single.begging.inview, 
  .bene-single.poop.inview {
    right: -2%;
  }

  .rc-single  {
    border-left:1px solid #fff;
  }
  .rc-single:first-child{
    border-left:none;
  }
  .rc-single .rc-copy {
    min-height: 300px;
  }

  .rc-single .rc-copy a.btn-default {
    position: absolute;
    bottom: 50px;
    display: block;
    width: 115px;
    padding: 10px;
  }

  a.btn-dog {
    left:calc(50% - 117px);
  }
  a.btn-cat {
    left:calc(50% + 2px);
  }

  .rc-single.dog-only a.btn-dog {
    left:50%;
    transform:translateX(-50%);
  }

  .cat-side .catta-2{
    display: block;
    position: absolute;
    bottom: -5px;
    left: 29%;
    max-height: 79%;
  }
  .cat-side .catta-1{
    left: -3%;
  }

  .testa-quotes {
    padding: 40px;
    height: 400px;
  }

  .testa-pics{
    height: auto;
    overflow:hidden;
  }

  .testa-pics .testa-img-cont {
    height: 400px;
  }

  .testa-quotes blockquote {
    height: 180px;
    overflow: hidden;
  }
  .pag-cont {
    position: relative;
    bottom: auto;
    padding: 30px 0 0;
  }
  .pag-arrow {
    bottom: 240px;
  }

  .quote-cont {
    height: 180px;
  }
  .wir-image{
    height: 375px;
  }
  .wir-copy {
    padding: 50px;
  }

}
@media (min-width: 992px) {
  #bowl .hero-bene {
    top: 45%;
  }

  .bene-single {
    position:absolute;
    width: 150px;
    padding: 30px 0;
    opacity:0;
    top: 0;
    transition: all 1s;
  }
  .bene-single.digestion.inview,
  .bene-single.energy.inview,
  .bene-single.muscle.inview{
    left: 8%;
  }

  .bene-single.coat.inview,
  .bene-single.begging.inview, 
  .bene-single.poop.inview {
    right: 8%;
  }
  .rc-single .rc-copy {
    min-height: 350px;
  }
  .cat-side .catta-2{
    left: 160px;
  }
  .cat-side .catta-1{
    left: 5px;
  }

  #petsfav {
    margin: 130px 0;
  }

  .cat-side .catta-3{
    display: block;
    position: absolute;
    bottom: -109px;
    left: 250px;
    max-height: 137%;
  }
  .dog-side .doggo-2{
    display: block;
    position: absolute;
    bottom: -38px;
    right: 41%;
    max-height: 130%;
    z-index: 2;
  }
 
  #testimonals,
  #social-media,
  #our-favs {
    margin: 130px 0;
  }
  .rc-single,
  .rc-single .rc-bowl,
  .rc-single .rc-copy {
    height:320px;
    overflow: hidden;
  }
  .rc-single .rc-copy {
    position: absolute;
    top:0;
    left: 0;
    opacity:0;
  }


  .rc-single .rc-bowl h6 {
    display: block;
  }
  .rc-single .rc-bowl h5 {
    display: block;
  }
  .rc-single .rc-bowl img {
    padding: 0 30px;
    width:auto;
  }
    #raw-continuum .rc-single .rc-bowl img {
      height:210px;
    }

  .rc-single:hover .rc-copy{
    opacity:1;
  } 

}
@media (min-width: 1200px) {
  #hero {
    height: 410px;
    background-image: url(../jpg/home-hero-lg-2.jpg); 
  }
  #hero .hero-copy {
    width:75%;
  }
  #hero .hero-copy h1 {
    font-size: 5rem;
    line-height: 5.1rem;
  }
  #bowl .hero-bowl-cont{}
  #bowl .hero-bowl{}
  #bowl .hero-bowl-cont svg {}

  .rc-single .rc-copy {
    min-height: 320px;
  }

  .dog-side .doggo-2{
    right: 300px;
  }

  .quote-cont {
    height: 150px;
  }
  
}

@media (min-width: 1200px) and (min-height: 875px) {
  #hero {
    height: 470px;
    background-image: url(../jpg/home-hero-lg-2.jpg); 
  }
  #hero .hero-copy {
    width:75%;
}
  #hero .hero-copy h1 {
    font-size: 5rem;
    line-height: 5.1rem;
  }
  #bowl .hero-bowl-cont{
    height: 400px;
	width:100%;
	max-width:550px;
  }

  #bowl .hero-bowl{ 
    background-image: url(../png/bowl-lg.png);
    background-size: 550px auto;
    height: 570px;
  }
  #bowl .hero-bowl-cont svg {
    width: 550px;
    height: 550px;
  }

}

@media (min-width: 1400px) {
  .dog-side .doggo-2{
    bottom: -60px;
    right: 260px;
    max-height: 160%;
  }
}

@media (hover: none){
  /* touch stuff goes here */
}

@media (hover: none) and (min-width: 992px){
  .rc-single,
  .rc-single .rc-bowl,
  .rc-single .rc-copy {
    height:auto;
    overflow: visible;
  }
  .rc-single .rc-bowl h6,
  .rc-single .rc-bowl h5 {
    display: none;
  }
  
  .rc-single .rc-copy {
    position: relative;
    top:auto;
    left: auto;
    opacity:1;
  }


  .rc-single .rc-bowl img {
    padding: 30px;
    width:auto;
    height:auto;
  }

  .rc-single:hover .rc-copy{
    opacity:1;
  } 

}