/* --- YOUR SCSS --- */

ul.mini-nav {
  text-align: center;
  -webkit-padding-start: 0;
  padding-inline-start: 0;
  font-size: 1em;
}
ul.mini-nav > li {
  display: inline;
  padding: 0 14px;
  border-left: 1px solid black;
}
ul.mini-nav > li:last-of-type {
  border-right: 1px solid black;
}
ul.mini-nav > li > a {
  text-decoration: underline;
}
@media (min-width: 425px) {
  ul.mini-nav > li {
    padding: 0 20px;
  }
}
#true-spotlight {
  h2 {
    color: #912963 !important;
    margin-bottom: 0 !important;
  }
}
p {
  color: black;
  margin-bottom: 0 !important;
}

.h3-hero {
  margin-top: -10px !important;
  color: black !important;
  font-size: 1.5em !important;
}
#true-spotlight {
  .button {
    background-color: #912963 !important;
  }
}
#true-spotlight {
  .btn-white {
    background-color: white !important;
    border: 1px solid #912963 !important;
    color: #912963 !important;
    font-weight: 600 !important;
  }
}

@media (min-width: 640px) {
  .card-size {
    max-width: 23rem !important;
  }
}
@media (min-width: 768px) {
  .card-size {
    max-width: 18rem !important;
  }
}
@media (min-width: 1024px) {
  .card-size {
    max-width: 23rem !important;
  }
}

.mt {
  margin-top: 0 !important;
}
@media (min-width: 768px) {
  .mt {
    margin-top: 2rem !important;
  }
}
@media (min-width: 1024px) {
  .mt {
    margin-top: 0 !important;
  }
}

.category-block {
  max-width: 1080px;
  position: relative;
  z-index: 5;
}
.category-container {
  border: 1px solid #912963;
  -webkit-box-shadow: 0 3px 6px rgba(44, 44, 44, 0.16);
  box-shadow: 0 3px 6px rgba(44, 44, 44, 0.16);
  padding: 10px;
  background-color: white;
  width: 100%;
}
@media (min-width: 640px) {
  .category-container {
    padding: 14px;
  }
}
.category-container h3 {
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 1.25em;
  font-weight: 700;
}
.category-container .cta {
  text-decoration: underline;
}
.category-container .grid-cat-title {
  color: #912963;
  margin-bottom: 1rem !important;
}
.category-container .grid-cat-price {
  font-size: 1.6em;
  font-weight: 700;
  color: #912963 !important;
}
@media (min-width: 768px) {
  .category-container .grid-cat-price {
    font-size: 1.2em;
  }
}
@media (min-width: 1024px) {
  .category-container .grid-cat-price {
    font-size: 1.4em;
  }
}
.category-container .grid-cat-usp {
  font-size: 1em;
  line-height: 1.2em;
  color: black;
  font-weight: 400;
}
@media (min-width: 768px) {
  .category-container .grid-cat-usp {
    line-height: 1.1em;
  }
}
@media (min-width: 1024px) {
  .category-container .grid-cat-usp {
    line-height: 1.2em;
  }
}
.category-container span.prod-vat-marker {
  font-size: 0.875em;
  font-weight: 400;
  color: black;
}

main #true-spotlight h1.true-logo {
  font-size: 2.4em;
}
@media (min-width: 640px) {
  main #true-spotlight h1.true-logo {
    font-size: 3.1em;
  }
}
main .text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
main .true-logo {
  width: 300px;
  height: auto;
  background-image: url("https://media.nisbets.com/static/fuse/projects/UK/true-spotlight/assets/images/true-logo-black.svg");
  background-repeat: no-repeat;
  background-position: center;
}
main .hero-banner.hb-split .hb-image {
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 19% 100%);
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
@media (min-width: 768px) {
  main .hero-banner.hb-split .hb-image {
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 19% 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 31% 100%);
  }
}
@media (min-width: 1024px) {
  main .hero-banner.hb-split .hb-image {
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 19% 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 23% 100%);
  }
}
@media (min-width: 1280px) {
  main .hero-banner.hb-split .hb-image {
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 19% 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 19% 100%);
  }
}
main div.hero-banner.hb-split .hb-image {
  background-image: url("https://media.nisbets.com/cdn-cgi/image/w=425,h=200,q=75,f=auto,fit=cover/http://media.nisbets.com/static/fuse/projects/UK/true-spotlight/assets/images/true-hero-image2.jpg");
}
@media (min-width: 768px) {
  main div.hero-banner.hb-split .hb-image {
    background-image: url("https://media.nisbets.com/cdn-cgi/image/w=502,h=200,q=75,f=auto,fit=cover/http://media.nisbets.com/static/fuse/projects/UK/true-spotlight/assets/images/true-hero-image2.jpg");
  }
}
@media (min-width: 1024px) {
  main div.hero-banner.hb-split .hb-image {
    background-image: url("https://media.nisbets.com/cdn-cgi/image/w=620,h=200,q=75,f=auto,fit=cover/http://media.nisbets.com/static/fuse/projects/UK/true-spotlight/assets/images/true-hero-image2.jpg");
  }
}
@media (min-width: 1280px) {
  main div.hero-banner.hb-split .hb-image {
    background-image: url("https://media.nisbets.com/cdn-cgi/image/w=620,h=200,q=75,f=auto,fit=cover/http://media.nisbets.com/static/fuse/projects/UK/true-spotlight/assets/images/true-hero-image2.jpg");
  }
}

.hero-bg-grey {
  background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    from(#ffffff),
    to(#eaeaec)
  );
  background-image: linear-gradient(to right bottom, #ffffff, #eaeaec);
  height: 83rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 0 75%);
  clip-path: polygon(0 0, 100% 0, 100% 95%, 0 75%);
}
@media (min-width: 390px) {
  .hero-bg-grey {
    height: 80rem;
  }
}
@media (min-width: 425px) {
  .hero-bg-grey {
    height: 86rem;
  }
}
@media (min-width: 640px) {
  .hero-bg-grey {
    height: 93rem;
  }
}
@media (min-width: 768px) {
  .hero-bg-grey {
    height: 76rem;
  }
}
@media (min-width: 1280px) {
  .hero-bg-grey {
    height: 94rem;
  }
}

.about-2 {
  margin-top: -22rem;
}
@media (min-width: 360px) {
  .about-2 {
    margin-top: -24rem;
  }
}
@media (min-width: 390px) {
  .about-2 {
    margin-top: -25rem;
  }
}
@media (min-width: 425px) {
  .about-2 {
    margin-top: -30rem;
  }
}
@media (min-width: 640px) {
  .about-2 {
    margin-top: -24rem;
  }
}
@media (min-width: 768px) {
  .about-2 {
    margin-top: -20rem;
  }
}
@media (min-width: 1024px) {
  .about-2 {
    margin-top: -22rem;
  }
}
@media (min-width: 1280px) {
  .about-2 {
    margin-top: -39rem;
  }
}

.product-show img {
  max-width: 30rem;
  height: auto;
}
@media (min-width: 390px) {
  .product-show img {
    max-width: 36rem;
  }
}
@media (min-width: 425px) {
  .product-show img {
    max-width: 45rem;
    -webkit-transform: translateX(-11%);
    transform: translateX(-11%);
  }
}
@media (min-width: 1024px) {
  .product-show img {
    max-width: 40rem;
    -webkit-transform: translateX(-9%);
    transform: translateX(-9%);
  }
}
@media (min-width: 1280px) {
  .product-show img {
    max-width: 45rem;
    -webkit-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}

.info-show {
  max-width: 68rem;
  height: auto;
  border: #eaeaec 1px solid;
  background-color: white;
  padding-bottom: 2rem;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem 4rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media (min-width: 640px) {
  .info-show {
    max-width: 55rem;
  }
}
@media (min-width: 768px) {
  .info-show {
    max-width: 78rem;
  }
}
@media (min-width: 1280px) {
  .info-show {
    margin-left: 1rem;
    max-width: 80rem;
  }
}
.info-show .info-show_card {
  max-width: 58rem;
}
@media (min-width: 768px) {
  .info-show .info-show_card {
    max-width: 30rem;
  }
}
@media (min-width: 1024px) {
  .info-show .info-show_card {
    max-width: 28rem;
  }
}
@media (min-width: 1280px) {
  .info-show .info-show_card {
    max-width: 35rem;
  }
}
.info-show .info-show_card p {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .info-show .info-show_card p {
    padding: 0;
  }
}
.info-show .info-show_card h3 {
  color: #912963;
  font-size: 2.2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 768px) {
  .info-show .info-show_card h3 {
    padding: 0;
  }
}

.icon-card {
  max-width: 5.8rem !important;
  width: 100%;
}

#section-prep {
  background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    from(#ffffff),
    to(#eaeaec)
  );
  background-image: linear-gradient(to right bottom, #ffffff, #eaeaec);
  padding-top: 2rem;
  height: 98rem;
  /* margin-bottom: 2rem !important; */
}
@media (min-width: 360px) {
  #section-prep {
    height: 97rem;
  }
}
@media (min-width: 390px) {
  #section-prep {
    height: 95rem;
  }
}
@media (min-width: 425px) {
  #section-prep {
    height: 92rem;
    /* margin-bottom: 7rem !important; */
  }
}
@media (min-width: 640px) {
  #section-prep {
    height: 90rem;
    margin-bottom: 6rem !important;
  }
}
@media (min-width: 768px) {
  #section-prep {
    height: 51rem !important;
  }
}
@media (min-width: 1024px) {
  #section-prep {
    height: 51rem !important;
    margin-bottom: 5rem !important;
  }
}
@media (min-width: 1280px) {
  #section-prep {
    height: 52rem;
  }
}

#section-info-1 {
  margin-top: -22rem;
  position: relative;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    right top,
    from(#912963),
    to(#ab3075)
  );
  background-image: linear-gradient(to right top, #912963, #ab3075);
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
  padding-top: 2rem;
  height: 125rem;
}
@media (min-width: 360px) {
  #section-info-1 {
    height: 119rem;
  }
}
@media (min-width: 390px) {
  #section-info-1 {
    height: 115rem;
  }
}
@media (min-width: 425px) {
  #section-info-1 {
    height: 110rem;
  }
}
@media (min-width: 640px) {
  #section-info-1 {
    height: 100rem !important;
  }
}
@media (min-width: 768px) {
  #section-info-1 {
    height: 93rem !important;
  }
}
@media (min-width: 1024px) {
  #section-info-1 {
    margin-top: -20rem;
    background-image: -webkit-gradient(
      linear,
      left bottom,
      right top,
      from(#912963),
      to(#ab3075)
    );
    background-image: linear-gradient(to right top, #912963, #ab3075);
    -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
    height: 63rem !important;
  }
}

#section-info-1 .info-container {
  margin-top: 15rem;
  max-width: 99rem;
}

#section-info-1 .info-text {
  color: white !important;
}

#section-info-1 .info-icon {
  max-width: 19rem;
  width: 100%;
}

.line {
  border-top: 2px solid white;
  margin: 4rem auto;
  width: 75%;
}

#section-undercounter {
  margin-top: -14rem !important;
  padding-top: 7rem;
  padding-bottom: 4rem;
  background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    from(#eaeaec),
    to(#ffffff)
  );
  background-image: linear-gradient(to right bottom, #eaeaec, #ffffff);
}

#section-info-2 {
  margin-top: -10rem;
  padding-bottom: 17rem;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    right top,
    from(#912963),
    to(#ab3075)
  );
  background-image: linear-gradient(to right top, #912963, #ab3075);
  height: 132rem;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 90%);
  clip-path: polygon(0 0, 100% 0%, 100% 94%, 0% 90%);
}
@media (min-width: 360px) {
  #section-info-2 {
    height: 127rem;
  }
}
@media (min-width: 390px) {
  #section-info-2 {
    height: 115rem;
  }
}
@media (min-width: 425px) {
  #section-info-2 {
    height: 111rem;
  }
}
@media (min-width: 640px) {
  #section-info-2 {
    height: 95rem !important;
  }
}
@media (min-width: 768px) {
  #section-info-2 {
    height: 93rem !important;
  }
}
@media (min-width: 1024px) {
  #section-info-2 {
    margin-top: -10rem;
    background-image: -webkit-gradient(
      linear,
      left bottom,
      right top,
      from(#912963),
      to(#ab3075)
    );
    background-image: linear-gradient(to right top, #912963, #ab3075);
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 85%);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 85%);
    height: 62rem !important;
  }
}

#section-info-2 .info-text {
  color: white !important;
}

#section-info-2 .info-icon-2 {
  max-width: 19.1rem;
  width: 100%;
}

#section-info-2 .info-icon {
  max-width: 20rem;
  width: 100%;
}

#section-info-2 .info-container {
  margin-top: 8rem;
  max-width: 99rem;
}

#section-display {
  margin-top: -21rem !important;
  padding-top: 11rem;
  padding-bottom: 4rem;
  background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    from(#eaeaec),
    to(#ffffff)
  );
  background-image: linear-gradient(to right bottom, #eaeaec, #ffffff);
}
@media (min-width: 390px) {
  #section-display {
    padding-top: 13rem;
  }
}
@media (min-width: 768px) {
  #section-display {
    padding-top: 15rem;
  }
}
@media (min-width: 1024px) {
  #section-display {
    padding-top: 19rem;
  }
}
@media (min-width: 1280px) {
  #section-display {
    margin-top: -14rem !important;
    padding-top: 10rem;
  }
}

#section-keg {
  padding-top: 7rem;
  margin-top: -12rem !important;
  margin-bottom: 4rem;
  background-color: white;
}

.keg-info {
  margin-left: 0;
}
@media (min-width: 1024px) {
  .keg-info {
    padding-top: 7rem !important;
  }
}
@media (min-width: 1280px) {
  .keg-info {
    margin-left: 7rem;
  }
}
@media (min-width: 1024px) {
  .keg-info p {
    padding-left: 2rem;
  }
}
@media (min-width: 1280px) {
  .keg-info p {
    padding-left: 0;
  }
}

.keg-img {
  position: relative;
  z-index: 5;
}
@media (min-width: 1024px) {
  .keg-img {
    -webkit-transform: translateY(22%);
    transform: translateY(22%);
  }
}
@media (min-width: 1280px) {
  .keg-img {
    -webkit-transform: translateY(12%);
    transform: translateY(12%);
  }
}

#section-warranty {
  background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    from(#eaeaec),
    to(#ffffff)
  );
  background-image: linear-gradient(to right bottom, #eaeaec, #ffffff);
}
#section-warranty .warranty-info > h4 {
  color: #912963;
  font-weight: 600;
}
#section-warranty .warranty-info > p {
  margin-bottom: 2rem !important;
}
#section-warranty .warranty-logo {
  width: 80%;
}
@media (min-width: 640px) {
  #section-warranty .warranty-logo {
    width: 100%;
  }
}
#section-warranty .true-footer-logo {
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media (min-width: 1024px) {
  #section-warranty .info-text {
    text-align: left !important;
  }
}