:root {
  --darkBg: #000;
  --copyLight: #fff;
  --copyDark: #000;
  --lightGrey: #f3f3f3;
  --copySize: 20px;
  --gridGap: 2em;
  --smgridGap: 1em;
}

.pt_storefront #header-banner1-20221224 {
  display: block;
  margin-bottom: 1em;
}

.ag-full-width .ag-site-width {
  max-width: 1920px !important;
}

#hp-update {
  font-size: 10px;
}

#hp-update section {
  position: relative;
  width: 90vw;
  margin: 8em auto;
}


#hp-update img {
  width: 100%;
  display: block;
}

#hp-update * {
  box-sizing: border-box;
  font-size: 1em;
  line-height: inherit;
  text-align: left;
}

#hp-update h1 {
  font-size: 2.4em;
  background-color: #EF3333;
  border-radius: 1.5em;
  display: flex;
  color: #fff;
  padding: 0.5em 1em;
  width: fit-content;
  margin-bottom: 1em;
  text-transform: uppercase;
}
#hp-update h2 {
  font-size: 8.5em;
  text-transform: uppercase;
  line-height: 0.9;
  font-family: "Matter-Bold", Arial, sans-serif;
}


[lang="it-IT"] #hp-update h2 {
  font-size: 7em;
  font-weight: 400;
}

#hp-update h3 {
  text-transform: uppercase;
  font-size: 3em;
  line-height: 1.5;
}

#hp-update h3.title {
  margin-bottom: 1em;
}

#hp-update h4 {
  text-transform: uppercase;
  font-size: 2em;
  line-height: 0.9;
}

#hp-update h5 {
  font-size: 1.4em;
  font-family: 'Matter';
  margin-bottom: 0.2em;
  display: flex;
  height: 1.6em;
  align-items: center;
}
#hp-update .endorphin-collection .shoe:first-of-type h5 {
  background-color: #76ED48;
  font-family: 'Matter-Bold';
  border-radius: 1.4em;
  display: flex;
  padding: 0.5em 1em;
  width: fit-content;
  text-transform: uppercase;
}
#hp-update #hero .images {
  display: flex;
  gap: 2em;
}

#hp-update p {
  font-size: 3em;
  margin: 0 0 1em;
  line-height: 1.1;
}


#hp-update a {
  text-decoration: none;
  font-size: unset;
  display: block;
}

#hp-update .cta {
  display: flex;
  padding: 0.75em 1.5em;
  justify-content: center;
  align-items: center;
  font-size: 2.5em;
  color: var(--copyDark);
  background-color: transparent;
  cursor: pointer;
  font-family: "Matter-Bold";
  border-radius: 28em;
  text-transform: uppercase;
  white-space: nowrap;
  width: fit-content;
  margin-top: 2em;
  border: solid 0.1em var(--copyDark);
}

#hp-update .cta:hover {
  background-color: var(--copyDark);
  color: var(--copyLight);
}

[lang="it-IT"] #hp-update button.cta {
  height: unset;
}

/* Hero */
#hp-update #hero {
  background-color: var(--darkBg);
  padding: var(--gridGap);
  display: flex;
  grid-gap: var(--gridGap);
  justify-content: flex-end;
  align-items: center;
}

#hp-update #hero img {
  max-width: 43em;
}

#hp-update #hero .content-overlay {
  position: absolute;
  top: 50%;
  left: 24.5%;
  transform: translate(-50%, -50%);
}
#hp-update #hero h3 {
  text-transform: unset;
  font-family: 'Matter';
}
#hp-update #hero h3, #hp-update #hero h2 {
  color: var(--copyLight);
}

#hp-update #hero .cta {
  color: var(--copyLight);
  border-color: inherit;
}

#hp-update #hero .cta:hover {
  color: var(--copyDark);
  background-color: var(--copyLight);
  border-color: var(--copyLight);
}

#hp-update #hero h2 {
  /* font-size: 3.5em; */
  /* font-family: 'Matter'; */
  line-height: 0.9;
}

/* IT Running Specific Styling */
[lang="it-IT"] #hp-update #hero {
  justify-content: flex-start;
  overflow: hidden;
}

[lang="it-IT"] #hp-update #hero img {
  max-width: unset;
  max-height: 60em;
}

[lang="it-IT"] #hp-update #hero a:nth-child(1) img {
  border-radius: 28em 28em 0 0;
}

[lang="it-IT"] #hp-update #hero .content-overlay {
  left: 84%;
  width: 80ch;
}

[lang="it-IT"] #hp-update #hero h3 {
  font-family: 'Matter';
  margin-bottom: 0;
  font-weight: 400;
}

[lang="it-IT"] #hp-update #hero .content-overlay svg {
  margin: 2em 0;
  width: 7em;
}

[lang="it-IT"] #hp-update #hero h2 {
  font-size: 6em;
  font-weight: 400;
}

[lang="it-IT"] #hp-update #hero h2.small {
  font-size: 3.5em;
  margin-bottom: 0.2em;
}

[lang="it-IT"] #hp-update #hero svg.diamonds {
  position: absolute;
  top: 3.5%;
  left: 35%;
  transform: translate(-50%, -50%);
  width: 20em;
}

/* IT Originals Specific Styling  */
[lang="it-IT"] .pt_storefront #hp-update #hero svg.diamonds {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20em;
  top: 89%;
  left: 0;
}
/* Shop By Style */
#hp-update .quicklinks h3 {
  color: var(--copyLight);
  font-size: 3em;
}

#hp-update .quicklinks {
  display: flex;
  position: relative;
  justify-content: space-between;
}

#hp-update .quicklinks .quicklink {
  position: relative;
  width: 27em;
  height: 27em;
  background-color: var(--copyLight);
  overflow: hidden;
}

#hp-update .quicklinks .quicklink.shoe-finder {
  background-color: var(--copyDark);
}

#hp-update .quicklinks .quicklink .overlay {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-align: center;
  line-height: 0.9;
  width: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#hp-update .quicklinks .image {
  overflow: hidden;
}

#hp-update .quicklinks .shoe-finder h3 {
  margin: 0.5em 0;
  text-align: center;
  line-height: 0.9 !important;
}

#hp-update .quicklinks .cta {
  font-size: 1.8em;
  color: var(--copyLight);
  border-color: var(--copyLight);
  margin: 0;
}

#hp-update .quicklinks .cta:hover {
  background-color: var(--copyLight);
  color: var(--copyDark);
}

[lang="es-ES"] #hp-update .quicklinks .cta,
[lang="fr-BE"] #hp-update .quicklinks .cta,
[lang="fr-FR"] #hp-update .quicklinks .cta,
[lang="it-IT"] #hp-update .quicklinks .cta {
  font-size: 1.5em;
}

[lang="fr-BE"] #hp-update .quicklinks .shoe-finder h3,
[lang="fr-FR"] #hp-update .quicklinks .shoe-finder h3 {
  max-width: 10ch;
  line-height: 0.9 !important;
}

#hp-update .quicklinks .shoe-finder a {
  width: 27em;
  height: 27em;
}

#hp-update .quicklinks .shoe-finder svg {
  width: 3em;
  animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  33% {
    transform: scale(1.1);
  }

  66% {
    transform: scale(1.2);
  }
}

#hp-update .quicklink img {
  transform: scale(1);
  transition: all 0.3s ease;
}

#hp-update .quicklink:hover img {
  transform: scale(1.05);
}


/* Products */
#hp-update #trending .trending-now .products {
  display: flex;
  justify-content: space-between;
  width: 100%;
  grid-gap: var(--gridGap);
}

#hp-update #trending .trending-now .products .shoe .copy {
  text-align: left;
}

#hp-update .ctas {
  display: flex;
}

#trending .ctas .black {
  margin-left: 2em;
  background-color: var(--copyDark);
  color: var(--copyLight);
  border: 0.1em solid var(--copyDark);
}

#trending .ctas .black:hover {
  background-color: transparent;
  color: var(--copyDark);
  border: 0.1em solid var(--copyDark);
}

#hp-update .bestsellers .products, #hp-update #trending .trending-now .products {
  opacity: 1;
  transition: opacity 0.3s ease
}

#hp-update .bestsellers .products:hover .shoe, #hp-update #trending .trending-now .products:hover .shoe {
  opacity: 0.7;
  transition: opacity 0.3s ease
}

#hp-update .bestsellers .products .shoe:hover, #hp-update #trending .trending-now .products .shoe:hover {
  opacity: 1;
}

/* Banner 1 */
#hp-update #banner1 .vizipro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-gap: var(--gridGap);
}
#hp-update #banner1 h1 {
  font-size: 2.4em;
  background-color: #EF3333;
  border-radius: 1.5em;
  display: flex;
  color: #fff;
  padding: 0.5em 1em;
  width: fit-content;
  margin-bottom: 1em;
  text-transform: uppercase;
}
#hp-update #banner1 h2 {
  font-size: 8.25em;
  text-transform: uppercase;
}
#hp-update #banner1 h3 {
  font-size: 3.2em;
  margin-bottom: 1em;
}
#hp-update #banner1 .cta {
  margin-top: 0;
}

#hp-update #banner1 .content {
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: center;
  padding-left: 5em;
  max-width: 120ch;
}

#hp-update #banner1 .vizipro a {
  width: 37%;
}

#hp-update #banner1 a.image {
  opacity: 0;
  transform: translateX(50%);
  transition: all 0.5s ease;
}

#hp-update .originals a.image {
  opacity: 0;
  transform: translateX(-50%);
  transition: all 0.5s ease;
}

#hp-update #banner1 a.image.in-view,
#hp-update .originals.in-view a.image {
  opacity: 1;
  transform: translateX(0);
}


/* Shop Bestsellers */
#hp-update #bestsellers .bestsellers {
  display: flex;
  flex-direction: column;
}

#hp-update .bestsellers img {
  width: 90%;
}

#hp-update #bestsellers span.slick-arrow {
  position: absolute;
  top: 60%;
  transform: translateY(-50%) scale(0.75);
  background-color: transparent;
}


#hp-update #bestsellers .trending-now .products .shoe .copy {
  text-align: left;
}


#hp-update #bestsellers span.prev.slick-arrow {
  left: -2%;
}

#hp-update #bestsellers span.next.slick-arrow {
  left: 100%;
}

/* Originals */
#hp-update section.originals {
  grid-gap: var(--gridGap);
  display: flex;
  justify-content: space-between;
  align-items: center;
}


#hp-update .originals h2.title {
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
  align-self: end;
  font-size: 8.8em;
  text-transform: uppercase;
}

#hp-update .originals h2 {
  white-space: nowrap;
}

[lang="it-IT"] #hp-update .originals h2 {
  white-space: normal;
}

[lang="it-IT"] #hp-update section.originals a {
  width: 33.33%;
}

[lang="it-IT"] #hp-update #banner2 .cta {
  margin-top: 0;
}

#hp-update #banner2 a:first-of-type {
  width: 30%;
}
#hp-update .originals h2.small {
  font-size: 6em;
}

/* UGC */
#hp-update section.ugc-banner {
  margin-bottom: 0;
}

#hp-update #ugc-banner .ugc-banner a.images {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-items: stretch;
}

#hp-update #ugc-banner .ugc-banner h3:hover {
  opacity: 0.7;
}

#hp-update #ugc-banner .ugc-banner a.images {
  grid-gap: var(--gridGap);
}


@media (max-width:1920px) {
  #hp-update {
    font-size: .5208333333vw;
  }
}

@media (max-width:768px) {
  #hp-update {
    font-size: 1.563vw;
  }
  #hp-update #hero .images {
    flex-direction: row-reverse;
  }

  #hp-update section {
    margin: 6em 0;
    width: 100vw;
    box-sizing: border-box;
  }

  #hp-update section.banner {
    padding: 0 var(--gridGap);
  }

  @media (max-width:768px) {
    #hp-update #banner2 h1, #hp-update #banner1 h1 {
      font-size: 1.6em;
    }
  }


  #hp-update h3 {
    font-size: 8em;
  }

  #hp-update h2 {
    font-size: 4.8em;
  }
  #hp-update #banner1 h2 {
    font-size: 4.8em;
  }


  #hp-update h3.title {
    padding-left: 12px;
    font-size: 3.2em !important;
  }

  #hp-update h4 {
    font-size: 2.5em;
  }

  #hp-update h5 {
    font-size: 2em;
  }

  #hp-update p {
    margin: 0.5em 0;
    font-size: 2.4em;
  }


  #hp-update .cta {
    margin-top: 0.75em;
    border: solid 1px #000;
  }

  [lang="fr-BE"] #hp-update .cta,
  [lang="fr-FR"] #hp-update .cta {
    font-size: 2em;
  }


  /* Hero */
  #hp-update #hero {
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: row-reverse;
  }

  #hp-update #hero .content-overlay {
    position: relative;
    top: 13em;
    transform: translate(-50%, -50%);
    left: 53%;
  }



  #hp-update #hero a:not(.cta) {
    /* flex-basis: calc(50% - (var(--gridGap) / 2)); */
  }
  #hp-update #hero h1 {
    font-size: 1.75em;
  }
  #hp-update #hero h2 {
    font-size: 7.2em;
  }
  #hp-update #hero h3 {
    font-size: 2.4em;
  }

  /* IT Running Specific Styling */
  [lang="it-IT"] #hp-update #hero a:nth-child(1) {
    order: 2;
  }

  [lang="it-IT"] #hp-update #hero a:nth-child(2) {
    order: 3;
  }

  [lang="it-IT"] #hp-update #hero .content-overlay {
    order: 1;
    left: 0;
  }

  [lang="it-IT"] #hp-update #hero svg.diamonds {
    right: -11.6%;
    left: unset;
    top: 50.5%;
    transform: translateY(-50%);
    width: 15em;
  }

  [lang="it-IT"] #hp-update h2 {
    font-size: 4em;
  }

  /* Shop By Style */
  #hp-update .quicklinks .quicklink {
    width: 25em;
    height: 25em;
  }

  #hp-update .quicklinks .quicklink.shoe-finder .overlay {
    border: 0;
  }

  #hp-update .quicklinks .shoe-finder h3 {
    margin-top: 0;
  }

  /* Products */
  #hp-update #trending .ctas {
    flex-direction: column;
    padding-left: 12px;
  }

  #hp-update #trending .ctas .black {
    margin-left: 0em;
  }

  [lang="de-DE"] #hp-update .quicklinks a h3,
  [lang="de-AT"] #hp-update .quicklinks a h3 {
    font-size: 2.8em;
  }

  [lang="fr-FR"] #hp-update .quicklinks a h3,
  [lang="fr-BE"] #hp-update .quicklinks a h3 {
    font-size: 2.5em;
  }

  #hp-update .quicklinks a:hover img {
    transform: scale(1);
  }

  [lang="es-ES"] #hp-update .quicklinks .shoe-finder .cta {
    font-size: 1.5em;
    padding: 6px 8px;
  }

  [lang="it-IT"] [data-category-id="Running"] #hp-update .quicklinks .shoe-finder .cta {
    font-size: 1.5em;
  }

  #hp-update .endorphin-collection .products:hover .shoe,
  #hp-update .bestsellers .products:hover .shoe {
    opacity: 1;
  }

  /* Banner 1 */
  #hp-update #banner1 .vizipro a {
    width: 50%;
  }

  #hp-update #banner1 .content {
    padding-left: 0;
  }

  /* Shop Bestsellers */
  #hp-update .bestsellers img {
    width: 100%;
  }

  #hp-update .trending-now img {
    max-width: 40em;
  }

  #hp-update .trending-now .arrows {
    display: none;
  }


  /* Originals */
  @media (min-width:769px) {
    #hp-update section.originals {
      flex-direction: row-reverse;
    }
    #hp-update #hero a {
      width: 75%;
    }
    #hp-update #hero .images {
      justify-content: flex-end;
    }
    /* #hp-update #hero img {
      max-width: 43em;
    } */
  }

  #hp-update .originals h2.small {
    font-size: 3.5em;
  }

  #hp-update .originals a {
    width: 50%;
  }

  [lang="it-IT"] #hp-update section.originals a {
    width: 100%;
  }

  [lang="it-IT"] #hp-update section.originals {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
  }

  [lang="it-IT"] #hp-update section.originals a:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  [lang="it-IT"] #hp-update section.originals a:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  [lang="it-IT"] #hp-update section.originals a:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  [lang="it-IT"] #hp-update .originals h2 {
    text-align: center;
    max-width: 20ch;
    margin: 0 auto;
  }

  [lang="it-IT"] #hp-update .originals p {
    text-align: center;
  }



  /* UGC */
  #hp-update #ugc-banner .ugc-banner .title h3 {
    font-size: 3.2em;
  }

  #hp-update #ugc-banner .ugc-banner a.images {
    justify-items: stretch;
    grid-template-columns: repeat(3, auto);
    padding: 0;
    padding-left: 2em;
  }

  #hp-update #ugc-banner .ugc-banner a.images>img {
    flex-shrink: 0;
    margin: 0 !important;
    max-width: 68vw;
  }

  /* Mobile Slider */
  #hp-update .mob-slide .quicklinks,
  #hp-update .mob-slide .products,
  #hp-update #ugc-banner .ugc-banner a.images {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-points-x: repeat(300px);
    -webkit-scroll-snap-points-x: repeat(300px);
    -ms-scroll-snap-points-x: repeat(300px);
    scroll-snap-points-x: repeat(300px);
    -webkit-scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
    scroll-snap-type: mandatory;
    padding-left: 0;
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
    width: 100vw;
    grid-gap: 2em;
    padding-left: 12px;
  }

  #hp-update .mob-slide .products>div,
  #hp-update #ugc-banner .ugc-banner a.images>img {
    flex-shrink: 0;
    margin: 0 !important;
    max-width: 68vw;
  }
  #hp-update .mob-slide .quicklinks>div {
    margin: 0;
    flex-shrink: 0;
    max-width: 68vw;
  }

  #hp-update .mob-slide .products::-webkit-scrollbar,
  #hp-update .mob-slide .quicklinks::-webkit-scrollbar,
  #hp-update #ugc-banner .ugc-banner a.images::-webkit-scrollbar {
    display: none;
  }

  #hp-update .mob-slide .products div.shoe:last-child,
  #hp-update .mob-slide .quicklinks div:last-child,
  #hp-update #ugc-banner .ugc-banner a.images img:last-child {
    box-sizing: content-box;
    border-right: var(--gridGap) solid transparent;
  }

  #hp-update .mob-slide .products:hover div,
  #hp-update .mob-slide .quicklinks:hover div,
  #hp-update #ugc-banner .ugc-banner a.images:hover div {
    opacity: 1;
  }

  #hp-update .mob-slide .quicklinks a {
    max-width: 25em;
  }
}