@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);
  }
}
@keyframes neon {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
@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;
}
.full-overlay {
  line-height: 0;
  width: 100%;
  font-family:
    SJ Sans,
    Open Sans,
    Helvetica Neue,
    Helvetica,
    Arial,
    "sans-serif";
  overflow: hidden;
  max-width: 1120px;
}
.full-overlay .cf:after {
  clear: both;
  content: "";
  display: table;
}
.full-overlay.cf:after {
  clear: both;
  content: "";
  display: table;
}
.full-overlay .logo-custom.logo-static {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.full-overlay .logo-custom.logo-static img {
  max-height: 48px;
  max-width: 48px;
}
.full-overlay .logo-custom {
  width: 100%;
  height: 100%;
}
.full-overlay .custom-logo-img {
  position: absolute;
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  height: 48px;
  left: 0;
  right: 0;
  top: 4px;
}
.full-overlay .logo {
  position: relative;
}
.full-overlay .logo span {
  display: none;
}
.full-overlay .logo .child-icon {
  height: 4rem;
  margin-left: 15px;
  position: absolute;
  width: 4.5rem;
}
.full-overlay .logo .playlive_logo {
  position: absolute;
  width: 5rem;
  height: 5rem;
  display: inline-block;
  background: url(/assets/playlive_logo-VG39f_nb.png) no-repeat 50% 25%;
  background-size: 100%;
  margin-left: 11px;
  z-index: 10;
}
.full-overlay .top-container {
  overflow: hidden;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  display: flex;
  position: relative;
  z-index: 5;
}
.full-overlay .top-container .overlay-left {
  width: 105px;
  height: 55px;
  position: relative;
  background-image: url(/assets/triangle_bg-BYTupjE2.png);
  background-color: #474c55;
  border-top-left-radius: 3px;
  z-index: 9998;
}
.full-overlay .top-container .overlay-right {
  flex: 1;
  background-color: #474c55;
  border-top-right-radius: 3px;
}
.full-overlay .bottom-container {
  background-color: #474c55;
  background-image: url(/assets/triangle_bg-BYTupjE2.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  overflow: hidden;
  height: 30px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  position: relative;
  z-index: 10;
  box-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.75);
}
.full-overlay .bottom-container.scrollNo {
  visibility: hidden;
}
.full-overlay .therm-container {
  height: 55px;
  background-color: rgba(83, 89, 99, 0.7);
  border-top-right-radius: 3px;
  position: relative;
}
.full-overlay .therm-container__raised {
  font-weight: 900;
  color: #fff;
  font-size: 1.5em;
  text-shadow: 1px 1px 3px #333;
  position: absolute;
  z-index: 9998;
  left: 15px;
  top: 10px;
  line-height: 1.5em;
  animation: fadeIn ease 2s;
}
.full-overlay .therm-container__inner {
  height: 55px;
  width: 0;
  background:
    #c10f3a linear-gradient(
      -45deg,
      rgb(115.8, 9, 34.8),
      #c10f3a,
      rgb(115.8, 9, 34.8),
      #c10f3a);
  background-size: 400% 400% !important;
  position: relative;
  transition: ease-in-out 1s;
  animation: gradient 15s ease infinite;
}
.full-overlay .therm-container__inner.default-red {
  background:
    linear-gradient(
      -45deg,
      rgb(115.8, 9, 34.8),
      #c10f3a,
      rgb(115.8, 9, 34.8),
      #c10f3a);
}
.full-overlay .therm-container__inner.light-grey {
  background:
    linear-gradient(
      -45deg,
      #939393,
      #f5f5f5,
      #939393,
      #f5f5f5);
}
.full-overlay .therm-container__inner.medium-grey {
  background:
    linear-gradient(
      -45deg,
      rgb(122.4, 122.4, 122.4),
      #ccc,
      rgb(122.4, 122.4, 122.4),
      #ccc);
}
.full-overlay .therm-container__inner.dark-grey {
  background:
    linear-gradient(
      -45deg,
      rgb(46.8, 49.8, 54),
      #4e535a,
      rgb(46.8, 49.8, 54),
      #4e535a);
}
.full-overlay .therm-container__inner.light-purple {
  background:
    linear-gradient(
      -45deg,
      rgb(78.6, 30, 100.2),
      #8332a7,
      rgb(78.6, 30, 100.2),
      #8332a7);
}
.full-overlay .therm-container__inner.dark-purple {
  background:
    linear-gradient(
      -45deg,
      rgb(43.8, 8.4, 61.8),
      #490e67,
      rgb(43.8, 8.4, 61.8),
      #490e67);
}
.full-overlay .therm-container__inner.light-blue {
  background:
    linear-gradient(
      -45deg,
      rgb(11.4, 55.2, 105.6),
      #135cb0,
      rgb(11.4, 55.2, 105.6),
      #135cb0);
}
.full-overlay .therm-container__inner.dark-blue {
  background:
    linear-gradient(
      -45deg,
      rgb(0, 24, 51.6),
      #002856,
      rgb(0, 24, 51.6),
      #002856);
}
.full-overlay .therm-container__inner.light-aqua {
  background:
    linear-gradient(
      -45deg,
      rgb(60, 124.8, 136.8),
      #64d0e4,
      rgb(60, 124.8, 136.8),
      #64d0e4);
}
.full-overlay .therm-container__inner.dark-aqua {
  background:
    linear-gradient(
      -45deg,
      rgb(18, 103.8, 115.8),
      #1eadc1,
      rgb(18, 103.8, 115.8),
      #1eadc1);
}
.full-overlay .therm-container__inner.light-green {
  background:
    linear-gradient(
      -45deg,
      rgb(115.2, 130.8, 4.2),
      #c0da07,
      rgb(115.2, 130.8, 4.2),
      #c0da07);
}
.full-overlay .therm-container__inner.dark-green {
  background:
    linear-gradient(
      -45deg,
      rgb(70.2, 112.8, 19.8),
      rgb(117, 188, 33),
      rgb(70.2, 112.8, 19.8),
      rgb(117, 188, 33));
}
.full-overlay .therm-container__inner.light-yellow {
  background:
    linear-gradient(
      -45deg,
      rgb(153, 117, 26.4),
      #ffc32c,
      rgb(153, 117, 26.4),
      #ffc32c);
}
.full-overlay .therm-container__inner.dark-yellow {
  background:
    linear-gradient(
      -45deg,
      rgb(153, 106.2, 22.2),
      #ffb125,
      rgb(153, 106.2, 22.2),
      #ffb125);
}
.full-overlay .therm-container__inner.active {
  width: 100% !important;
  z-index: 9997;
}
.full-overlay .therm-container__inner.active.m-higher {
  width: 0 !important;
  position: absolute;
  left: -10px;
}
.full-overlay .therm-container__goal {
  font-weight: 800;
  z-index: 9998;
  color: #fff;
  font-size: 1.5em;
  text-shadow: 1px 1px 3px #333;
  position: absolute;
  right: 15px;
  top: 10px;
  line-height: 1.5em;
  animation: fadeIn 0.5s linear forwards;
}
.full-overlay .therm-container.active .therm-container__goal,
.full-overlay .therm-container.active .therm-container__raised {
  animation: fadeOut 0.5s linear forwards;
}
.full-overlay-slant {
  line-height: 0;
  width: 100%;
  font-family:
    SJ Sans,
    Open Sans,
    Helvetica Neue,
    Helvetica,
    Arial,
    "sans-serif";
  overflow: hidden;
  max-width: 1120px;
}
.full-overlay-slant .cf:after {
  clear: both;
  content: "";
  display: table;
}
.full-overlay-slant.cf:after {
  clear: both;
  content: "";
  display: table;
}
.full-overlay-slant .logo-custom.logo-static {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.full-overlay-slant .logo-custom.logo-static img {
  max-height: 48px;
  max-width: 48px;
}
.full-overlay-slant .logo-custom {
  width: 100%;
  height: 100%;
}
.full-overlay-slant .custom-logo-img {
  position: absolute;
  width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  height: 48px;
  left: 0;
  right: 0;
  top: 4px;
}
.full-overlay-slant .logo {
  position: relative;
  width: 105px;
  height: 85px;
  z-index: 9999;
  float: left;
}
.full-overlay-slant .logo:before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: #474c55;
  transform-origin: bottom left;
  transform: skew(-15deg, 0deg);
}
.full-overlay-slant .logo:after {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: url(/assets/triangle_bg-BYTupjE2.png) no-repeat left bottom;
  transform-origin: bottom left;
  transform: skew(-15deg, 0deg);
}
.full-overlay-slant .logo span {
  display: none;
}
.full-overlay-slant .logo div {
  position: absolute;
}
.full-overlay-slant .logo .child-icon {
  margin-left: 25px;
  margin-top: 15px;
  position: absolute;
}
.full-overlay-slant .logo .playlive_logo {
  width: 5.3rem;
  height: 5.3rem;
  display: inline-block;
  background: url(/assets/playlive_logo-VG39f_nb.png) no-repeat 50% 43%;
  background-size: 100%;
  margin-left: 23px;
}
.full-overlay-slant .logo-small {
  position: relative;
  width: 105px;
  height: 55px;
  z-index: 9999;
  float: left;
}
.full-overlay-slant .logo-small:before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: #474c55;
  transform-origin: bottom left;
  transform: skew(-15deg, 0deg);
}
.full-overlay-slant .logo-small:after {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: url(/assets/triangle_bg-BYTupjE2.png) no-repeat left bottom;
  transform-origin: bottom left;
  transform: skew(-15deg, 0deg);
}
.full-overlay-slant .logo-small span {
  display: none;
}
.full-overlay-slant .logo-small div {
  position: absolute;
}
.full-overlay-slant .logo-small .child-icon {
  width: 60px;
  margin-left: 25px;
  margin-top: 8px;
  height: 100%;
}
.full-overlay-slant .logo-small .playlive_logo {
  width: 5rem;
  height: 5rem;
  display: inline-block;
  background: url(/assets/playlive_logo-VG39f_nb.png) no-repeat 50% 27%;
  background-size: 100%;
  margin-left: 20px;
}
.full-overlay-slant__data {
  height: 85px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.full-overlay-slant__therm {
  width: 97%;
  height: 55px;
  background-color: #4f555e;
}
.full-overlay-slant__therm:after {
  content: " ";
  position: absolute;
  display: block;
  width: 97%;
  height: 55px;
  top: 0;
  left: 0;
  z-index: -1;
  background: #4f555e;
  transform-origin: bottom left;
  transform: skew(-15deg, 0deg);
}
.full-overlay-slant__therm .therm-container {
  height: 55px;
  position: relative;
}
.full-overlay-slant__therm .therm-container__raised {
  font-weight: 800;
  color: #fff;
  font-size: 1.5em;
  text-shadow: 1px 1px 3px #333;
  position: absolute;
  z-index: 9999;
  left: 28px;
  top: 10px;
  line-height: 1.5em;
  animation: fadeIn ease 2s;
}
.full-overlay-slant__therm .therm-container__inner {
  height: 50px;
  width: 0;
  position: relative;
  transition: ease-in-out 0.5s;
  background:
    linear-gradient(
      -45deg,
      rgb(115.8, 9, 34.8),
      #c10f3a,
      rgb(115.8, 9, 34.8),
      #c10f3a);
}
.full-overlay-slant__therm .therm-container__inner:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 55px;
  top: 0;
  left: 0;
  animation: gradient 15s ease infinite;
  transform-origin: bottom left;
  transform: skew(-15deg, 0deg);
}
.full-overlay-slant__therm .therm-container__inner.default-red:after {
  background:
    linear-gradient(
      -45deg,
      rgb(115.8, 9, 34.8),
      #c10f3a,
      rgb(115.8, 9, 34.8),
      #c10f3a);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.light-grey:after {
  background:
    linear-gradient(
      -45deg,
      #939393,
      #f5f5f5,
      #939393,
      #f5f5f5);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.medium-grey:after {
  background:
    linear-gradient(
      -45deg,
      rgb(122.4, 122.4, 122.4),
      #ccc,
      rgb(122.4, 122.4, 122.4),
      #ccc);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.dark-grey:after {
  background:
    linear-gradient(
      -45deg,
      rgb(46.8, 49.8, 54),
      #4e535a,
      rgb(46.8, 49.8, 54),
      #4e535a);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.light-purple:after {
  background:
    linear-gradient(
      -45deg,
      rgb(78.6, 30, 100.2),
      #8332a7,
      rgb(78.6, 30, 100.2),
      #8332a7);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.dark-purple:after {
  background:
    linear-gradient(
      -45deg,
      rgb(43.8, 8.4, 61.8),
      #490e67,
      rgb(43.8, 8.4, 61.8),
      #490e67);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.light-blue:after {
  background:
    linear-gradient(
      -45deg,
      rgb(11.4, 55.2, 105.6),
      #135cb0,
      rgb(11.4, 55.2, 105.6),
      #135cb0);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.dark-blue:after {
  background:
    linear-gradient(
      -45deg,
      rgb(0, 24, 51.6),
      #002856,
      rgb(0, 24, 51.6),
      #002856);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.light-aqua {
  background:
    linear-gradient(
      -45deg,
      rgb(60, 124.8, 136.8),
      #64d0e4,
      rgb(60, 124.8, 136.8),
      #64d0e4);
}
.full-overlay-slant__therm .therm-container__inner.light-aqua:after {
  background:
    linear-gradient(
      -45deg,
      rgb(60, 124.8, 136.8),
      #64d0e4,
      rgb(60, 124.8, 136.8),
      #64d0e4);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.dark-aqua:after {
  background:
    linear-gradient(
      -45deg,
      rgb(18, 103.8, 115.8),
      #1eadc1,
      rgb(18, 103.8, 115.8),
      #1eadc1);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.light-green:after {
  background:
    linear-gradient(
      -45deg,
      rgb(115.2, 130.8, 4.2),
      #c0da07,
      rgb(115.2, 130.8, 4.2),
      #c0da07);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.dark-green:after {
  background:
    linear-gradient(
      -45deg,
      rgb(70.2, 112.8, 19.8),
      rgb(117, 188, 33),
      rgb(70.2, 112.8, 19.8),
      rgb(117, 188, 33));
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.light-yellow:after {
  background:
    linear-gradient(
      -45deg,
      rgb(153, 117, 26.4),
      #ffc32c,
      rgb(153, 117, 26.4),
      #ffc32c);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.dark-yellow:after {
  background:
    linear-gradient(
      -45deg,
      rgb(153, 106.2, 22.2),
      #ffb125,
      rgb(153, 106.2, 22.2),
      #ffb125);
  background-size: 400% 400%;
}
.full-overlay-slant__therm .therm-container__inner.active {
  width: 100% !important;
  z-index: 9997;
}
.full-overlay-slant__therm .therm-container__inner.active.m-higher {
  width: 0 !important;
  position: absolute;
  left: -10px;
}
.full-overlay-slant__therm .therm-container__goal {
  font-weight: 800;
  color: #fff;
  font-size: 1.4em;
  text-shadow: 1px 1px 3px #333;
  position: absolute;
  z-index: 9998;
  right: 15px;
  top: 10px;
  line-height: 1.5em;
  animation: fadeIn ease 2s;
}
.full-overlay-slant__therm .therm-container.active .therm-container__goal,
.full-overlay-slant__therm .therm-container.active .therm-container__raised {
  animation: fadeOut 0.5s linear forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
.full-overlay-slant .ticker-bar-slanted {
  position: relative;
  width: 92%;
}
.full-overlay-slant .ticker-bar-slanted:after {
  content: " ";
  position: absolute;
  display: block;
  width: 20px;
  height: 30px;
  top: 0;
  left: auto;
  right: -20px;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgb(51, 51, 51) 0%,
      rgb(46, 46, 46) 30%,
      rgb(36, 36, 36) 70%,
      rgb(51, 51, 51) 100%);
  clip-path: polygon(0 0, 100% 0, 51% 100%, 0% 100%);
}
