/** Shopify CDN: Minification failed

Line 7:0 Unexpected "{"
Line 7:1 Expected identifier but found "%"

**/
{% style %}
  .meet-our-cat-section {
    position: relative;
    background-color: #1a272c;
    height: 200vh;
  }
  .camera {
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
  }
  .animalheading {
      z-index: 100;
      color: #fff;
      letter-spacing: 2px;
      margin-bottom: 0;
      margin-top: -3rem;
      font-size: 64px;
      line-height: 75px;
      position: absolute;
      inset: 19% auto auto 8%;
      font-family: 'Colus-regular', serif;
      font-weight: 400;
  }
/* facet info */

  .tigerinfo, .snowleopardinfo, .leopardinfo, .tigerinfo-copy, .leopardinfo-copy, .snowleopardinfo-copy {
      z-index: auto;
      display: block;
      position: absolute;
      inset: 40% auto auto 8%;
      /* width:50% */
  }
  .animalnametext {
      color: #fff;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-family: Cabin,sans-serif;
      font-size: 40px;
      line-height: 50px;
  }
  .body-2.animalpara {
      text-align: left;
      letter-spacing: 1px;
      width: 30%;
      margin-top: 20px;
      color: #8a8a8a;
      letter-spacing: .5px;
      font-family: Cabin,sans-serif;
      font-size: 18px;
      font-weight: 500;
      line-height: 30px;
  }
  .grassland-tablet, .grassland-mobile, .facts-tablet {
    display: none;
  }
  .facts-mobile {
    display: none;
  }
  .grass-leopard {
    z-index: 100;
    display: block;
    position: absolute;
    inset: auto 0% 0%;
  }
  .grass-tiger {
    z-index: 200;
    display: block;
    position: absolute;
    inset: auto 0% 0%;
  }
  .grass-snowleopard {
    z-index: 300;
    display: block;
    position: absolute;
    inset: auto 0% 0%;
  }
  .animalcontainer {
    grid-column-gap: 200px;
    grid-row-gap: 200px;
    flex-direction: row;
    justify-content: flex-start;
    height: 100%;
    margin-top: 0;
    display: flex;
  }
  .animal {
    z-index: 50;
    flex: none;
    width: 100vw;
    height: 100vh;
    margin-left: 220px;
    position: relative;
  }
  .lottie-animation-3.leopard {
    width: 1200px;
    height: auto;
    bottom: -14%;
    right: -13%;
  }
  .leopard {
    z-index: 17;
    object-fit: contain;
  }

  .lottie-animation-3 {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    transform-style: preserve-3d;
    width: 1000px;
    position: absolute;
    inset: auto 0% 0% auto;
    transform: rotateX(0)rotateY(180deg)rotate(0);
  }


  .tigerwalk {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    transform-style: preserve-3d;
    width: 1100px;
    position: absolute;
    inset: auto 0% -8% auto;
    transform: rotateX(0)rotateY(180deg)rotate(0);
  }
  .snowleopard-walk {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    transform-style: preserve-3d;
    width: 1100px;
    position: absolute;
    inset: auto 0% -8% auto;
    transform: rotateX(0)rotateY(180deg)rotate(0);
  }
  div.div-block-21 {
    background-color: #0000;
    flex: none;
    width: 1vw;
    height: 100vh;
  }


  /* css for effects */

    .camera {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
    }

    .animalcontainer {
      display: flex;
      width: 300vw;
      transition: transform 0.3s ease-out;
      height: 100%;
      will-change: transform;
    }

    .animal {
      min-width: 100vw;
      height: 100vh;
      position: relative;
      opacity: 0;
      transition: opacity 0.8s ease;
    }
    .animal:first-child {
      opacity: 1;
    }

  .grassland-desktop img,
  .grassland-tablet img,
  .grassland-mobile img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
  }
  .grassland-tablet, .grassland-mobile, .facts-tablet, .facts-mobile {
      display: none;
  }

  .facts, .facts-tablet, .facts-mobile > div {
    transition: opacity 0.8s ease;
  }
  /* Responsive */

@media (max-width: 989px) {
  .animalheading{
	  font-size: 52px;
    line-height: 50px;
    inset: 22% auto auto 8%;
  }
    .tigerinfo-copy, .leopardinfo-copy, .snowleopardinfo-copy {
      inset: 45% auto auto 8%;
    } 
    .animalnametext{
      font-size: 30px;
      line-height: 30px;
    }
    .body-2.animalpara{
      margin-top: 10px;
      font-size: 16px;
      line-height: 21px;
    }

  .lottie-animation-3.leopard {
      width: 1090px;
      height: auto;
      bottom: -10%;
      right: -13%;
  }
  .tigerwalk,  
  .snowleopard-walk {
      width: 1020px;
      inset: auto 0% -10% auto;
      transform: rotateX(0)rotateY(180deg)rotate(0);
  }
    .facts {
        display: none;
    }
    .grassland-desktop {
         width: 100%;
         display: none;
     }
    .facts-tablet {
        display: block;
    }
    .grassland-tablet {
        width: 100%;
        display: block;
    }
    .grassland-mobile {
        width: 100%;
        display: none;
    }
}

@media (max-width: 749px) {
  .animalheading{
   	font-size: 42px;
    line-height: 50px;
    /* inset: 22% auto auto 8%; */
  }
    .tigerinfo-copy, .leopardinfo-copy, .snowleopardinfo-copy {
      inset: 40% auto auto 8%;
    } 
    .animalnametext{
      font-size: 28px;
      line-height: 35px;
    }
  .body-2.animalpara{
    margin-top: 10px;
    font-size: 15px;
    line-height: 19px;
  }

  .lottie-animation-3.leopard {
      width: 990px;
      height: auto;
      bottom: -10%;
      right: -13%;
  }
  .tigerwalk,  
  .snowleopard-walk {
      width: 920px;
      inset: auto 0% -10% auto;
      transform: rotateX(0)rotateY(180deg)rotate(0);
  }
  
}
@media (max-width: 479px) {
  .animalheading{
      width: 90%;
      font-size: 32px;
      line-height: 40px;
  }

  .animalnametext{
      font-size: 20px;
      line-height: 30px;
  }
  .body-2.animalpara{
      width: 90%;
      margin-top: 10px;
      font-size: 14px;
      line-height: 18px;
  }

  .lottie-animation-3.leopard {
      width: 790px;
      height: auto;
      bottom: 0%;
      right: -13%;
  }
  .tigerwalk,  
  .snowleopard-walk {
      width: 720px;
      inset: auto 20% 0% auto;
      transform: rotateX(0)rotateY(180deg)rotate(0);
  }
  .grassland-mobile {
      display: block;
  } 
  .facts-mobile {
      display: block;
  }
  .facts-tablet {
      display: none;
  }
  .grassland-tablet {
      display: none;
  }
  .tigerinfo-copy, .leopardinfo-copy, .snowleopardinfo-copy {
     inset: 40% auto auto 8%;
  }
}