/* theme variables */
@font-face {
  font-family: "Antenna";
  src: url(/themes/custom/purina/purina/css/../assets/font/OT-AntennaPurina-Regular.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
:root {
  --color-primary: #e81c24;
  --color-secondary: #f5f1e5;
  --color-tertiary: #c3b7b7;
  --color-quaternary: #e81c24;
  --color-quinary: #EDF0F8;
  --color-dark-grey: #3D3835;
  --color-grey: #c3b7b7;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-sticky-nav: #ffffff;
  --font-family-primary: Antenna, sans-serif;
}

/* degradado con color principal */
/* degradado con color secundario */
.color-primary {
  color: var(--color-primary);
}

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

.color-primary-fill {
  fill: var(--color-primary);
}

.color-primary-border {
  border-color: var(--color-primary);
}

.color-secondary {
  color: var(--color-secondary);
}

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

.color-secondary-fill {
  fill: var(--color-secondary);
}

.color-secondary-border {
  border-color: var(--color-secondary);
}

.color-tertiary {
  color: var(--color-tertiary);
}

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

.color-tertiary-fill {
  fill: var(--color-tertiary);
}

.color-tertiary-border {
  border-color: var(--color-tertiary);
}

.article-internal-breadcrumb {
  grid-area: breadcrumb;
}

.article-internal-aside {
  grid-area: aside;
}

.article-internal-body {
  grid-area: body;
}

.article-internal-otherArticle {
  grid-area: next;
}

.article-internal-related {
  grid-area: related;
}

.article-internal {
  background: #ffffff;
  display: flex;
  flex-direction: column-reverse;
}
@media (min-width: 992px) {
  .article-internal {
    display: grid;
    grid-template-columns: 30% 70%;
    justify-content: center;
    align-items: center;
  }
}
@media (min-width: 992px) {
  .article-internal-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}
.article-internal-scroll {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@media (min-width: 992px) {
  .article-internal-scroll {
    height: 100vh;
  }
}
.article-internal-components img {
  max-width: 100%;
}
.article-internal-header {
  border: 1px solid grey;
  margin: 0 auto;
  width: 95%;
  position: relative;
  top: -20px;
  background: white;
  box-shadow: 0 0 16px grey;
  border-top: 4px solid;
}
@media (min-width: 768px) {
  .article-internal-header {
    display: flex;
    top: -40px;
    width: 100%;
  }
}
@media (min-width: 768px) and (min-width: 992px) {
  .article-internal-header {
    width: 75%;
  }
}
.article-internal-header-else {
  border: 1px solid grey;
  margin: 0 auto;
  width: 95%;
  position: relative;
  top: -20px;
  background: white;
  box-shadow: 0 0 16px grey;
  border-top: 4px solid #e81c24;
}
@media (min-width: 768px) {
  .article-internal-header-else {
    display: block;
    width: 100%;
  }
}
@media (min-width: 768px) and (min-width: 992px) {
  .article-internal-header-else {
    width: 75%;
  }
}
.article-internal-header-sponsor {
  position: absolute;
  width: 68%;
  text-align: center;
  letter-spacing: 4px;
  font-size: 13px;
}
.article-internal-header-sponsor-img img {
  width: 250px !important;
  height: 200px;
}
@media (min-width: 768px) {
  .article-internal-header-sponsor {
    width: 36%;
  }
}
@media (min-width: 992px) {
  .article-internal-header-sponsor {
    width: 22%;
    font-size: 10px;
  }
}
.article-internal a {
  color: #e81c24;
  text-decoration: none;
}
.article-internal-otherArticle {
  justify-self: end;
  background: #ffffff;
  width: auto;
  padding: 2rem 1rem;
  overflow-y: unset;
}
.article-internal-link {
  color: #e81c24;
  text-decoration: none;
}
.article-internal-related {
  position: relative;
  z-index: 20;
  background-color: #f5f1e5;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 0;
}
.article-internal-title {
  padding: 1rem 2rem 0rem 2rem;
}

.article-lead-text {
  font-style: italic;
  font-size: 1.1em;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.related-products-listing-carousel {
  /* the slides */
  /* the parent */
}
.related-products-listing-carousel .slick-slide {
  margin: 0 5px;
}
.related-products-listing-carousel .slick-list {
  margin: 0 -5px;
}

.article-internal-related .title-carousel {
  margin-bottom: 1.5rem;
}
.article-internal-related .views-element-container:nth-child(1) {
  min-height: 100%;
  padding: 0rem 0;
}
@media (min-width: 992px) {
  .article-internal-related .views-element-container:nth-child(1) {
    padding: 0rem;
  }
}
.article-internal-related .views-element-container:nth-child(2) {
  position: relative;
  width: 100%;
  background: #f5f1e5 !important;
  min-height: 100%;
  padding: 0rem 0;
}

.category-title {
  height: fit-content !important;
  font-size: 1rem;
}

.purina, .alpo, .campeon,
.dogui, .doguitos, .doko,
.gati, .gatina, .snacks {
  color: #f5f1e5;
  background-color: #e81c24;
}

.purina-top, .alpo-top, .campeon-top,
.dogui-top, .doguitos-top, .doko-top,
.gati-top, .gatina-top, .snacks-top {
  border-top-color: #e81c24;
}

.dogchow {
  color: #007A36;
  background-color: #9be170;
}
.dogchow-top {
  border-top-color: #9be170;
}

.beneful {
  color: #fff;
  background-color: #E65303;
}
.beneful-top {
  border-top-color: #E65303;
}

.bonelo {
  color: #fff;
  background-color: #504781;
}
.bonelo-top {
  border-top-color: #504781;
}

.catchow {
  color: #fff;
  background-color: #02529B;
}
.catchow-top {
  border-top-color: #02529B;
}

.dentalife {
  color: #b1a9a9;
  background-color: #14B3E5;
}
.dentalife-top {
  border-top-color: #14B3E5;
}

.excellent {
  color: #fff;
  background-color: #971F34;
}
.excellent-top {
  border-top-color: #971F34;
}

.fancy {
  color: #b1a9a9;
  background-color: #59C0CA;
}
.fancy-top {
  border-top-color: #59C0CA;
}

.felix {
  color: #fff;
  background-color: #083897;
}
.felix-top {
  border-top-color: #083897;
}

.friskies {
  color: black;
  background-color: #ffd700;
}
.friskies-top {
  border-top-color: #ffd700;
}

.one {
  color: #fff;
  background-color: #A71C20;
}
.one-top {
  border-top-color: #A71C20;
}

.proplan {
  color: black;
  background-color: #B29962;
}
.proplan-top {
  border-top-color: #B29962;
}

.tidy {
  color: black;
  background-color: #ffd100;
}
.tidy-top {
  border-top-color: #ffd100;
}