@import url("https://use.typekit.net/okf7zmz.css");

/* BAC */

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@keyframes marquee {
  0% {
    transform: translate(0%, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

@font-face {
  font-family: ChicagoFLF;
  src: url("/assets/ChicagoFLF-BHd3TQI7.ttf");
}

/* St Jude Sans Font */

@font-face {
  font-family: "SJ Sans";
  src: url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-light.woff2) format("woff2"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-light.woff) format("woff"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-bold.ttf) format("ttf");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "SJ Sans";
  src: url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-regular.woff2) format("woff2"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-regular.woff) format("woff"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-bold.ttf) format("ttf");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "SJ Sans";
  src: url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-medium.woff2) format("woff2"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-medium.woff) format("woff"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-medium.ttf) format("ttf");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "SJ Sans";
  src: url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-book.woff2) format("woff2"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-book.woff) format("woff"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-medium.woff) format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "SJ Sans";
  src: url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-bold.woff2) format("woff2"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-bold.woff) format("woff"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/sj-sans/sjs-bold.ttf) format("ttf");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Nixie One";
  src: url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/nixie-one/nixie-one.eot);
  src: url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/nixie-one/nixie-one.eot?#iefix) format("embedded-opentype"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/nixie-one/nixie-one.woff) format("woff"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/nixie-one/nixie-one.ttf) format("truetype"), url(https://www.stjude.org/etc/clientlibs/stjude/shared/fonts/nixie-one/nixie-one.svg#open_sansregular) format("svg");
  font-style: normal;
  font-weight: 300;
}

.incentive-overlay {
  position: relative;
  font-family: SJ Sans, Open Sans, Helvetica Neue, Helvetica, Arial, "sans-serif";
}

.incentive-overlay ul {
  margin: 0;
  padding: 0;
}

.incentive-overlay ul li.no-rewards {
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.incentive-overlay ul.slanted div {
  transform: skewX(-10deg);
  border-radius: 0.2rem;
}

.incentive-overlay ul.slanted div span {
  padding: 0.5rem 1rem;
  transform: skewX(10deg);
  display: block;
}

.incentive-overlay ul.slanted div .quantity {
  transform: skewX(0deg);
}

.incentive-overlay ul.slanted .stars {
  transform: skewX(0deg);
}

.incentive-overlay ul.classic div {
  border-radius: 0.2rem;
}

.incentive-overlay ul.classic div span {
  display: block;
  padding: 0.5rem 1rem;
}

.incentive-overlay ul.classic div .quantity {
  font-style: italic;
}

.incentive-overlay ul.rounded div {
  border-radius: 2rem;
}

.incentive-overlay ul.rounded div span {
  display: block;
  padding: 0.5rem 1rem;
}

.incentive-overlay ul.rounded div .quantity {
  font-style: italic;
  border-top-right-radius: 2rem !important;
  border-bottom-right-radius: 2rem !important;
}

.incentive-overlay ul .stars {
  height: 52px;
  width: 100px;
  display: inline-block;
  position: relative;
  transform: skewX(0deg);
  overflow: hidden;
}

.incentive-overlay ul .stars .star:nth-child(1) {
  width: 35px;
  height: 34px;
  position: absolute;
  left: -100%;
  top: 7px;
  transform: rotate(-7deg);
  -webkit-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2065%2065'%3e%3cpath%20d='M64.26%2024.87a4.73%204.73%200%200%200-4.49-3.25l-17.46.05-5.37-16.6a4.69%204.69%200%200%200-4.48-3.26A4.68%204.68%200%200%200%2028%205.09l-5.3%2016.67-17.45-.11a4.72%204.72%200%200%200-2.78%208.55l14.25%2010.2-5.55%2016.49a4.71%204.71%200%200%200%207.24%205.3L32.44%2052l14.13%2010.27a4.69%204.69%200%200%200%202.78.93%204.78%204.78%200%200%200%202.77-.91A4.66%204.66%200%200%200%2053.84%2057l-5.39-16.6%2014.11-10.25a4.71%204.71%200%200%200%201.7-5.28z'%20fill='%231a1a1a'/%3e%3c/svg%3e") no-repeat 50% 50%;
          mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2065%2065'%3e%3cpath%20d='M64.26%2024.87a4.73%204.73%200%200%200-4.49-3.25l-17.46.05-5.37-16.6a4.69%204.69%200%200%200-4.48-3.26A4.68%204.68%200%200%200%2028%205.09l-5.3%2016.67-17.45-.11a4.72%204.72%200%200%200-2.78%208.55l14.25%2010.2-5.55%2016.49a4.71%204.71%200%200%200%207.24%205.3L32.44%2052l14.13%2010.27a4.69%204.69%200%200%200%202.78.93%204.78%204.78%200%200%200%202.77-.91A4.66%204.66%200%200%200%2053.84%2057l-5.39-16.6%2014.11-10.25a4.71%204.71%200%200%200%201.7-5.28z'%20fill='%231a1a1a'/%3e%3c/svg%3e") no-repeat 50% 50%;
  -webkit-mask-size: cover;
          mask-size: cover;
  background-color: #ffb125;
  animation: starMove 1s 2.5s ease-in-out 1 forwards, starFloat 2s 5s ease-in-out infinite forwards;
}

@keyframes starMove {
  0% {
    left: -100%;
  }
  70% {
    left: 40px;
    transform: rotate(7deg);
  }
  100% {
    left: 25px;
    transform: rotate(-7deg);
  }
}

@keyframes starFloat {
  0% {
    transform: rotate(-7deg) translateY(0px);
  }
  50% {
    transform: rotate(-7deg) translateY(2px);
  }
  100% {
    transform: rotate(-7deg) translateY(0);
  }
}

.incentive-overlay ul .stars .star:nth-child(2) {
  width: 16px;
  height: 15px;
  position: absolute;
  top: 9px;
  left: -100%;
  transform: rotate(15deg);
  -webkit-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2065%2065'%3e%3cpath%20d='M64.26%2024.87a4.73%204.73%200%200%200-4.49-3.25l-17.46.05-5.37-16.6a4.69%204.69%200%200%200-4.48-3.26A4.68%204.68%200%200%200%2028%205.09l-5.3%2016.67-17.45-.11a4.72%204.72%200%200%200-2.78%208.55l14.25%2010.2-5.55%2016.49a4.71%204.71%200%200%200%207.24%205.3L32.44%2052l14.13%2010.27a4.69%204.69%200%200%200%202.78.93%204.78%204.78%200%200%200%202.77-.91A4.66%204.66%200%200%200%2053.84%2057l-5.39-16.6%2014.11-10.25a4.71%204.71%200%200%200%201.7-5.28z'%20fill='%231a1a1a'/%3e%3c/svg%3e") no-repeat 50% 50%;
          mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2065%2065'%3e%3cpath%20d='M64.26%2024.87a4.73%204.73%200%200%200-4.49-3.25l-17.46.05-5.37-16.6a4.69%204.69%200%200%200-4.48-3.26A4.68%204.68%200%200%200%2028%205.09l-5.3%2016.67-17.45-.11a4.72%204.72%200%200%200-2.78%208.55l14.25%2010.2-5.55%2016.49a4.71%204.71%200%200%200%207.24%205.3L32.44%2052l14.13%2010.27a4.69%204.69%200%200%200%202.78.93%204.78%204.78%200%200%200%202.77-.91A4.66%204.66%200%200%200%2053.84%2057l-5.39-16.6%2014.11-10.25a4.71%204.71%200%200%200%201.7-5.28z'%20fill='%231a1a1a'/%3e%3c/svg%3e") no-repeat 50% 50%;
  -webkit-mask-size: cover;
          mask-size: cover;
  background-color: rgb(229.5, 159.3, 33.3);
  animation: starMove2 1.2s 2.5s ease-in-out 1 forwards, starWiggle 30s 5s ease-in-out infinite forwards;
}

@keyframes starWiggle {
  0% {
    left: 10px;
    transform: rotate(15deg);
  }
  2% {
    left: 10px;
    transform: rotate(15deg);
  }
  2.5% {
    left: 10px;
    transform: rotate(25deg);
  }
  3% {
    left: 10px;
    transform: rotate(5deg);
  }
  3.5% {
    left: 10px;
    transform: rotate(25deg);
  }
  4% {
    left: 10px;
    transform: rotate(5deg);
  }
  4.5% {
    left: 10px;
    transform: rotate(15deg);
  }
}

.incentive-overlay ul .stars .star:nth-child(3) {
  width: 15px;
  height: 14px;
  position: absolute;
  bottom: 15px;
  left: -100%;
  transform: rotate(-15deg);
  -webkit-mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2065%2065'%3e%3cpath%20d='M64.26%2024.87a4.73%204.73%200%200%200-4.49-3.25l-17.46.05-5.37-16.6a4.69%204.69%200%200%200-4.48-3.26A4.68%204.68%200%200%200%2028%205.09l-5.3%2016.67-17.45-.11a4.72%204.72%200%200%200-2.78%208.55l14.25%2010.2-5.55%2016.49a4.71%204.71%200%200%200%207.24%205.3L32.44%2052l14.13%2010.27a4.69%204.69%200%200%200%202.78.93%204.78%204.78%200%200%200%202.77-.91A4.66%204.66%200%200%200%2053.84%2057l-5.39-16.6%2014.11-10.25a4.71%204.71%200%200%200%201.7-5.28z'%20fill='%231a1a1a'/%3e%3c/svg%3e") no-repeat 50% 50%;
          mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2065%2065'%3e%3cpath%20d='M64.26%2024.87a4.73%204.73%200%200%200-4.49-3.25l-17.46.05-5.37-16.6a4.69%204.69%200%200%200-4.48-3.26A4.68%204.68%200%200%200%2028%205.09l-5.3%2016.67-17.45-.11a4.72%204.72%200%200%200-2.78%208.55l14.25%2010.2-5.55%2016.49a4.71%204.71%200%200%200%207.24%205.3L32.44%2052l14.13%2010.27a4.69%204.69%200%200%200%202.78.93%204.78%204.78%200%200%200%202.77-.91A4.66%204.66%200%200%200%2053.84%2057l-5.39-16.6%2014.11-10.25a4.71%204.71%200%200%200%201.7-5.28z'%20fill='%231a1a1a'/%3e%3c/svg%3e") no-repeat 50% 50%;
  -webkit-mask-size: cover;
          mask-size: cover;
  background-color: rgb(204, 141.6, 29.6);
  animation: starMove3 1s 2.5s ease-in-out 1 forwards, starWiggle2 30s 5s ease-in-out infinite forwards;
}

@keyframes starWiggle2 {
  0% {
    left: 62px;
    transform: rotate(-15deg);
  }
  2% {
    left: 62px;
    transform: rotate(-15deg);
  }
  2.5% {
    left: 62px;
    transform: rotate(-25deg);
  }
  3% {
    left: 62px;
    transform: rotate(-5deg);
  }
  3.5% {
    left: 62px;
    transform: rotate(-25deg);
  }
  4% {
    left: 62px;
    transform: rotate(-15deg);
  }
  4.5% {
    left: 62px;
    transform: rotate(-15deg);
  }
}

@keyframes starMove2 {
  0% {
    left: -100%;
  }
  70% {
    left: 20px;
    transform: rotate(30deg);
  }
  100% {
    left: 10px;
    transform: rotate(15deg);
  }
}

@keyframes starMove3 {
  0% {
    left: -100%;
  }
  70% {
    left: 72px;
    transform: rotate(15deg);
  }
  100% {
    left: 62px;
    transform: rotate(-15deg);
  }
}

.incentive-overlay ul li {
  font-size: 25px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 3px 0;
  color: #fff;
  padding: 5px 15px;
  list-style-type: none;
  line-height: 1;
  display: flex;
  opacity: 0;
}

.incentive-overlay ul li .title {
  padding: 0.5rem 1rem;
  font-weight: 800;
}

.incentive-overlay ul li .title.default-red {
  background: linear-gradient(#c10f3a, rgb(115.8, 9, 34.8));
}

.incentive-overlay ul li .title.dark-grey {
  background: linear-gradient(#4e535a, rgb(46.8, 49.8, 54));
}

.incentive-overlay ul li .title.light-purple {
  background: linear-gradient(#8332a7, rgb(78.6, 30, 100.2));
}

.incentive-overlay ul li .title.dark-purple {
  background: linear-gradient(#490e67, rgb(43.8, 8.4, 61.8));
}

.incentive-overlay ul li .title.light-blue {
  background: linear-gradient(#135cb0, rgb(11.4, 55.2, 105.6));
}

.incentive-overlay ul li .title.dark-blue {
  background: linear-gradient(#002856, rgb(0, 24, 51.6));
}

.incentive-overlay ul li .title.light-aqua {
  background: linear-gradient(#64d0e4, rgb(60, 124.8, 136.8));
}

.incentive-overlay ul li .title.dark-aqua {
  background: linear-gradient(#1eadc1, rgb(18, 103.8, 115.8));
}

.incentive-overlay ul li .title.light-green {
  background: linear-gradient(#c0da07, rgb(115.2, 130.8, 4.2));
}

.incentive-overlay ul li .title.dark-green {
  background: linear-gradient(rgb(117, 188, 33), rgb(70.2, 112.8, 19.8));
}

.incentive-overlay ul li .title.light-yellow {
  background: linear-gradient(#ffc32c, rgb(153, 117, 26.4));
}

.incentive-overlay ul li .title.dark-yellow {
  background: linear-gradient(#ffb125, rgb(153, 106.2, 22.2));
}

.incentive-overlay ul li .amount {
  font-size: 1.333rem;
  line-height: 2.25rem;
  background: linear-gradient(#4e535a, rgb(46.8, 49.8, 54));
}

.incentive-overlay ul li .amount span {
  font-weight: 800;
}

.incentive-overlay ul li .amount.highlighted {
  font-size: 1.776889rem;
  line-height: 2.25rem;
}

.incentive-overlay ul li .text {
  margin-left: 0.5rem;
  margin-right: 0;
  font-size: 1.333rem;
  line-height: 2.25rem;
  font-weight: 700;
  background: #c10f3a;
}

.incentive-overlay ul li .text.default-red {
  background: linear-gradient(#c10f3a, rgb(135.1, 10.5, 40.6));
}

.incentive-overlay ul li .text.dark-grey {
  background: linear-gradient(#4e535a, rgb(54.6, 58.1, 63));
}

.incentive-overlay ul li .text.light-purple {
  background: linear-gradient(#8332a7, rgb(91.7, 35, 116.9));
}

.incentive-overlay ul li .text.dark-purple {
  background: linear-gradient(#490e67, rgb(51.1, 9.8, 72.1));
}

.incentive-overlay ul li .text.light-blue {
  background: linear-gradient(#135cb0, rgb(13.3, 64.4, 123.2));
}

.incentive-overlay ul li .text.dark-blue {
  background: linear-gradient(#002856, rgb(0, 28, 60.2));
}

.incentive-overlay ul li .text.light-aqua {
  background: linear-gradient(#64d0e4, rgb(70, 145.6, 159.6));
}

.incentive-overlay ul li .text.dark-aqua {
  background: linear-gradient(#1eadc1, rgb(21, 121.1, 135.1));
}

.incentive-overlay ul li .text.light-green {
  background: linear-gradient(#c0da07, rgb(134.4, 152.6, 4.9));
}

.incentive-overlay ul li .text.dark-green {
  background: linear-gradient(rgb(117, 188, 33), rgb(81.9, 131.6, 23.1));
}

.incentive-overlay ul li .text.light-yellow {
  background: linear-gradient(#ffc32c, rgb(178.5, 136.5, 30.8));
}

.incentive-overlay ul li .text.dark-yellow {
  background: linear-gradient(#ffb125, rgb(178.5, 123.9, 25.9));
}

.incentive-overlay ul li .text span {
  display: inline-block;
}

.incentive-overlay ul li .text .quantity {
  background-color: rgba(0, 0, 0, 0.7);
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

.incentive-overlay ul li .text.highlighted {
  overflow: hidden;
  position: relative;
}

.incentive-overlay ul li .text.highlighted:before {
  content: "";
  position: absolute;
  left: -100%;
  display: block;
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
}

@keyframes highlightMove {
  0% {
    left: -100%;
  }
  20%, 80% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}

.incentive-overlay ul li .text.highlighted {
  font-size: 1.776889rem;
  line-height: 2.25rem;
}

.incentive-overlay ul.hidden {
  display: none;
}

.incentive-overlay ul.load li {
  opacity: 1;
}

.incentive-overlay ul.load-in li {
  animation: load-in 0.5s ease-in-out 1 normal forwards;
}

.incentive-overlay ul.load-out li {
  opacity: 1;
  animation: load-out 0.5s ease-in-out 1 normal forwards;
}

@keyframes load-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes load-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}