/**
 * CONTENTS
 *
 * SETTINGS
 * Global...............Globally-available variables and config.
 *
 * BASE
 *
 *
 * OBJECTS
 * Wrappers.............Wrapping and constraining elements.
 *
 * COMPONENTS
 * ftb-logo.............The main svg logo
 *
 * SECTIONS
 * home-top.............Styles specific to each section
 * home-search
 * home-freedom
 * home-what-we-do
 * home-checkers
 * home-volunteer
 * home-stories
 * home-news
 *
 * TRUMPS
 * Text.................Text helpers.
 */
/*------------------------------------*   #SETTINGS
   #global
 \*------------------------------------*/
/*------------------------------------*  #BASE
  #
\*------------------------------------*/
h2 {
  font-size: 1.5em; }
  @media (min-width: 900px) {
    h2 {
      font-size: 1.6em; } }

/*------------------------------------*  #OBJECTS
  #wrappers
\*------------------------------------*/
.tl-hr {
  border: none;
  border-top: 7px solid #f1b434;
  width: 100px; }

.tl-hr__right {
  margin: 8px 0; }

.tl-container {
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
  padding: 0 16px; }

.wide-container {
  max-width: 1200px; }

.container--center > * {
  margin: 0 auto; }

.flex-stretch {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-pack: stretch;
      justify-content: stretch;
  background: inherit; }

.flex-center {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center; }

@media (max-width: 599px) {
  .no-mobile {
    display: none; } }

/*------------------------------------*  #COMPONENTS
\*------------------------------------*/
.link--white {
  color: white;
  text-decoration: underline; }

.text--golden {
  color: #f1b434; }

.responsive-video {
  position: relative;
  padding-bottom: 46.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0; }

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.mw-l {
  max-width: 800px;
  margin: 0 auto; }

/*------------------------------------*  #SECTIONS
\*------------------------------------*/
/*------------------------------------*  #tl-top-copy
\*------------------------------------*/
.home-top {
  font-size: 1em;
  background-image: linear-gradient(to bottom, #4a327d, #e64560);
  height: 70vw;
  min-height: 560px;
  text-align: center;
  color: white;
  overflow: hidden; }
  .home-top p {
    font-family: "ArialRoundedMTBold", "Arial Rounded MT Bold";
    font-weight: normal;
    font-size: 1.2em; }
  .home-top a {
    color: currentColor; }
  .home-top .telethon-block-link {
    position: static;
    display: block;
    width: 100%; }
    .home-top .telethon-block-link:after, .home-top .telethon-block-link:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .home-top .telethon-block-link:before {
      left: -100%; }
  .home-top .telethon-date {
    color: #f1b434;
    font-size: 1.6em;
    font-weight: normal;
    letter-spacing: .5px;
    margin: 0; }
  .home-top .telethon-logo {
    text-align: center;
    padding-top: 64px;
    padding-right: 16px;
    padding-left: 16px;
    width: 70%;
    height: 100%;
    left: 30%; }
    .home-top .telethon-logo img {
      margin-bottom: 24px; }
  .home-top .telethon-streaming.telethon-streaming {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 2px 12px;
    font-size: 0.8em; }
    .home-top .telethon-streaming.telethon-streaming:before, .home-top .telethon-streaming.telethon-streaming:after {
      content: '';
      background: rgba(0, 0, 0, 0.5);
      position: absolute; }
    .home-top .telethon-streaming.telethon-streaming:after {
      width: 50vw;
      height: 100%;
      left: 100%;
      top: 0; }
    .home-top .telethon-streaming.telethon-streaming:before {
      background: none;
      left: -40px;
      top: 0;
      border-right: 20px solid rgba(0, 0, 0, 0.5);
      border-bottom: 20px solid rgba(0, 0, 0, 0.5);
      border-top: 20px solid transparent;
      border-left: 20px solid transparent; }
    .home-top .telethon-streaming.telethon-streaming img {
      max-height: 35px;
      margin-bottom: 0;
      vertical-align: middle; }
    .home-top .telethon-streaming.telethon-streaming .first {
      margin-left: 8px; }
    .home-top .telethon-streaming.telethon-streaming p {
      margin-bottom: 0;
      white-space: nowrap; }
  .home-top .home-full {
    position: absolute;
    width: 100%;
    height: 100%; }
  .home-top:before {
    top: 100px;
    left: -30%;
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 1200px;
    content: "";
    background: url("https://www.mda.org/sites/default/files/mda-frontend/homepage/kevin.png") center no-repeat;
    background-size: contain; }
  .home-top .uppercase {
    text-transform: uppercase; }
  .home-top h1 {
    font-size: 2.1em;
    line-height: 1.4em; }
    @media (min-width: 600px) {
      .home-top h1 {
        font-size: 2.8em;
        line-height: 1.3em; } }
  .home-top .hero-copy.hero-copy {
    max-width: 500px;
    font-size: 1.5em;
    line-height: 1.6; }
    @media (min-width: 600px) {
      .home-top .hero-copy.hero-copy {
        font-size: 1.6em;
        line-height: 1.35;
        margin-bottom: 24px; } }
  .home-top .home-container > * {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 16px; }
  .home-top .tk-button {
    font-size: 1rem; }
  @media (max-width: 899px) {
    .home-top .button--outline {
      color: white;
      background: #485cc7;
      border-color: #485cc7; } }
  @media (min-width: 900px) {
    .home-top {
      font-size: 1em;
      text-align: left;
      color: white;
      height: auto;
      min-height: 620px; }
      .home-top:before {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-position: center left; }
      .home-top .telethon-logo {
        text-align: center;
        max-width: 600px;
        position: absolute;
        top: 0;
        right: 0;
        left: auto;
        height: 100%;
        padding-top: 64px; }
        .home-top .telethon-logo img {
          margin-bottom: 24px; }
      .home-top .home-container {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
        height: 100%; }
      .home-top .home-full {
        max-width: 1200px;
        left: 50%;
        transform: translateX(-50%); } }
  @media (max-height: 600px) and (min-width: 900px) {
    .home-top {
      font-size: 0.8em;
      height: 500px; }
      .home-top .home-container {
        max-width: 650px; } }

.full-link,
.hide-text {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 10; }
  .full-link:after,
  .hide-text:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red; }

.tl-top {
  font-size: 1em;
  padding: 200px 24px;
  background: #4a327d;
  min-height: 560px;
  text-align: center;
  color: white;
  overflow: hidden; }
  .tl-top p {
    font-family: "ArialRoundedMTBold", "Arial Rounded MT Bold";
    font-weight: normal;
    font-size: 1.2em; }
  .tl-top a {
    color: currentColor; }
  .tl-top .home-full {
    position: absolute;
    width: 100%;
    height: 100%; }
  .tl-top .uppercase {
    text-transform: uppercase; }
  .tl-top h1 {
    font-family: Tahoma, Verdana, Geneva, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2.1em;
    line-height: 1.4em; }
    @media (min-width: 600px) {
      .tl-top h1 {
        font-size: 2.8em;
        line-height: 1.3em; } }
  .tl-top .hero-copy.hero-copy {
    max-width: 500px;
    font-size: 1.5em;
    line-height: 1.6; }
    @media (min-width: 600px) {
      .tl-top .hero-copy.hero-copy {
        font-size: 1.6em;
        line-height: 1.35;
        margin-bottom: 24px; } }
  .tl-top .home-container > * {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 16px; }
  .tl-top .tk-button {
    font-size: 1rem; }

.lp-top {
  text-align: center;
  padding: 100px 24px; }
  .lp-top .lp-logo {
    max-width: 100%; }
  @media (min-width: 900px) {
    .lp-top {
      padding: 200px 24px;
      text-align: left;
      background: #4A327D url("https://www.mda.org/sites/default/files/mda-frontend/telethon/letsplay/bg/top-bg.jpg") center no-repeat;
      background-size: cover; } }

.text-yellow {
  color: #f1b434;
  font-weight: bold; }

.text-purple {
  color: #4A327D; }

.full-link,
.hide-text {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 10; }
  .full-link:after,
  .hide-text:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red; }

.two-fer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  gap: 2rem; }
  @media (min-width: 900px) {
    .two-fer {
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap; } }

.side-by-side {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  gap: 2rem;
  -ms-flex-pack: center;
      justify-content: center;
  margin: 48px 0 12px;
  counter-reset: grid-count; }
  .side-by-side > * {
    -ms-flex: 1 0 250px;
        flex: 1 0 250px;
    max-width: 300px;
    margin-bottom: 12px; }
  .side-by-side h4:before {
    counter-increment: grid-count;
    content: counter(grid-count);
    font-size: 1.2em;
    background: #f1b434;
    color: #4A327D;
    font-weight: bold;
    height: 32px;
    width: 32px;
    padding: 5px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px; }

/*------------------------------------*  # tl-kh
\*------------------------------------*/
.tl-kh {
  background: #333 url("https://www.mda.org/sites/default/files/mda-frontend/telethon/landing/kh-back.jpg?v=1.1") no-repeat;
  background-size: cover;
  color: white; }

/*------------------------------------*  # tl-lets-play
\*------------------------------------*/
.tl-lets-play {
  background: #4A327D url("https://www.mda.org/sites/default/files/mda-frontend/telethon/landing/icon-back.jpg?v=1.1") no-repeat;
  background-size: cover;
  color: white; }

.lp-logo {
  max-width: 500px;
  margin-bottom: 20px; }

/*------------------------------------*  # tl-about
\*------------------------------------*/
.tl-about {
  background: url("https://www.mda.org/sites/default/files/mda-frontend/telethon/landing/strongly-img.jpg?v=1.1") no-repeat;
  background-size: cover;
  color: white; }

/*------------------------------------*  # tl-copy
\*------------------------------------*/
.tl-copy {
  padding: 84px 32px;
  text-align: center; }
  .tl-copy h2 {
    font-family: Tahoma, Verdana, Geneva, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 3rem; }
  .tl-copy p {
    max-width: 80ch;
    margin: 0 auto; }

/*------------------------------------*  # tl-pink
\*------------------------------------*/
.tl-pink {
  background: white;
  color: #414042;
  text-align: center !important;
  font-size: 0.8em; }
  .tl-pink img {
    width: 100px;
    margin: 0 auto 16px; }

.ribbon-bottom {
  border-bottom: 16px solid #4a327d; }

/*------------------------------------*  # tl-purple
\*------------------------------------*/
.tl-impact h3 {
  margin-top: 24px;
  font-size: 2em; }

.icon-social {
  max-width: 32px;
  max-height: 32px; }
  @media (min-width: 900px) {
    .icon-social {
      max-width: 48px;
      max-height: 48px; } }

.tl-purple {
  background: #4a327d;
  color: white; }

.watch-clips {
  display: grid;
  grid-template-areas: "bigclip bigclip bigclip" "clip1 clip2 clip3" "clip4 clip5 clip6"; }
  @media (min-width: 900px) {
    .watch-clips {
      grid-template-areas: "bigclip bigclip bigclip clip1 clip2 clip3" "bigclip bigclip bigclip clip4 clip5 clip6"; } }

.clip:first-child {
  grid-area: bigclip;
  max-height: none; }

.clip {
  max-height: 164px;
  overflow: hidden;
  line-height: 0;
  margin: 0;
  padding: 0; }

.two-col {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }
  @media (min-width: 900px) {
    .two-col {
      -ms-flex-direction: row;
          flex-direction: row; } }
  .two-col p {
    text-align: center; }
  .two-col .tk-button {
    display: block;
    max-width: 300px;
    margin: 24px auto 0; }
  .two-col .tl-pink {
    padding: 84px 32px;
    padding-bottom: 24px;
    -ms-flex: 1;
        flex: 1;
    text-align: center; }
    @media (min-width: 900px) {
      .two-col .tl-pink {
        text-align: left; } }
    .two-col .tl-pink > * {
      margin-left: auto;
      margin-right: auto;
      max-width: 550px; }
      @media (min-width: 900px) {
        .two-col .tl-pink > * {
          margin-right: auto;
          margin-left: 64px; } }
  .two-col .tl-purple {
    padding: 84px 32px;
    padding-bottom: 24px;
    -ms-flex: 1;
        flex: 1;
    text-align: center; }
    @media (min-width: 900px) {
      .two-col .tl-purple {
        text-align: left; } }
    .two-col .tl-purple > * {
      margin-left: auto;
      margin-right: auto;
      max-width: 550px; }
      @media (min-width: 900px) {
        .two-col .tl-purple > * {
          margin-left: auto;
          margin-right: 64px; } }

.tl-press {
  background: url("https://www.mda.org/sites/default/files/mda-frontend/telethon/landing/press-bg.jpg?v=1.1") no-repeat;
  background-size: cover;
  color: white;
  text-align: left; }

.tl-press .splide__slide {
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap; }
  .tl-press .splide__slide > div {
    -ms-flex: 1;
        flex: 1;
    width: 100%;
    height: auto; }
  .tl-press .splide__slide a:link, .tl-press .splide__slide a:visited {
    color: white;
    text-decoration: underline;
    font-size: 1.8em; }
  @media (min-width: 900px) {
    .tl-press .splide__slide {
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap; }
      .tl-press .splide__slide > div {
        width: 50%; } }

.splide--single :is(.splide__arrows, .splide__pagination) {
  display: none; }

.splide__pagination.splide__pagination {
  bottom: -3em;
  margin-bottom: 24px; }

.slider--talent {
  -ms-flex-align: start;
      align-items: flex-start;
  min-height: 200px; }

.slider--partners .splide__list {
  -ms-flex-align: center;
      align-items: center;
  min-height: 200px; }

.slider--partners img {
  max-height: 155px;
  max-width: 100%; }

.bump-button {
  margin-top: 38px; }

.partner-button {
  margin-top: 48px; }

.mw-sm.mw-sm {
  max-width: 44ch; }

.tl-social .social-widget {
  max-height: 500px;
  overflow: auto; }

.tl-social .two-fer > * {
  -ms-flex: 1;
      flex: 1;
  max-width: 300px; }

.about-lp {
  color: white;
  background: #485cc7 url("https://www.mda.org/sites/default/files/mda-frontend/telethon/letsplay/bg/alien.jpg") center repeat;
  background-size: 120px;
  background-attachment: fixed;
  font-size: 0.8em; }
  .about-lp h2 {
    font-size: 1.8em; }
  @media (min-width: 900px) {
    .about-lp {
      font-size: 1em; }
      .about-lp h2 {
        font-size: 2.5em; } }

.lp-schedule {
  color: white;
  background: #4A327D url("https://www.mda.org/sites/default/files/mda-frontend/telethon/letsplay/bg/stars.jpg") center no-repeat;
  background-size: cover; }

.tl-talent {
  color: white;
  background: #4A327D url("https://www.mda.org/sites/default/files/mda-frontend/telethon/letsplay/bg/headphones.jpg") center repeat;
  background-size: 120px;
  background-attachment: fixed; }
  .tl-talent h3 {
    margin-top: 24px; }
  .tl-talent a {
    display: inline-block; }
  .tl-talent .icon {
    fill: white;
    max-width: 24px;
    max-height: 24px;
    margin-right: 8px;
    margin-top: 8px;
    margin-bottom: 24px; }

.lp-actions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap; }
  .lp-actions > div {
    -ms-flex: 1;
        flex: 1;
    padding: 48px 12px;
    color: white;
    font-size: 1em; }
  .lp-actions a {
    display: block;
    color: white;
    font-family: "ArialRoundedMTBold", "Arial Rounded MT Bold";
    text-align: center; }
  .lp-actions img {
    height: 70px;
    width: 70px;
    display: block;
    margin: 24px auto 0; }
  @media (min-width: 900px) {
    .lp-actions > div {
      font-size: 2em;
      padding: 64px; }
    .lp-actions img {
      height: 160px;
      width: 160px; } }

.action-discord {
  background: #414042; }

.action-twitch {
  background: #4A327D; }

.action-twitter {
  background: #E64560; }

/* splide.js */
/* v2.4.21 */
@keyframes splide-loading {
  0% {
    transform: rotate(0); }
  to {
    transform: rotate(1turn); } }

.splide__container {
  position: relative;
  box-sizing: border-box; }

.splide__list {
  margin: 0 !important;
  padding: 0 !important;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  will-change: transform; }

.splide.is-active .splide__list {
  display: -ms-flexbox;
  display: flex; }

.splide__pagination {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  width: 95%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center;
  margin: 0; }

.splide__pagination li {
  list-style-type: none;
  display: inline-block;
  line-height: 1;
  margin: 0; }

.splide {
  visibility: hidden; }

.splide, .splide__slide {
  position: relative;
  outline: none; }

.splide__slide {
  box-sizing: border-box;
  list-style-type: none !important;
  margin: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.splide__slide img {
  vertical-align: bottom; }

.splide__slider {
  position: relative; }

.splide__spinner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #999;
  border-left-color: transparent;
  animation: splide-loading 1s linear infinite; }

.splide__track {
  position: relative;
  z-index: 0;
  overflow: hidden; }

.splide--draggable > .splide__track > .splide__list > .splide__slide {
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none; }

.splide--fade > .splide__track > .splide__list {
  display: block; }

.splide--fade > .splide__track > .splide__list > .splide__slide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0; }

.splide--fade > .splide__track > .splide__list > .splide__slide.is-active {
  position: relative;
  z-index: 1;
  opacity: 1; }

.splide--rtl {
  direction: rtl; }

.splide--ttb > .splide__track > .splide__list {
  display: block; }

.splide--ttb > .splide__pagination {
  width: auto; }

.splide__arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  height: 2em;
  border-radius: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  border: none;
  padding: 0;
  opacity: .7;
  background: #ccc; }

.splide__arrow svg {
  width: 1.2em;
  height: 1.2em; }

.splide__arrow:hover {
  cursor: pointer;
  opacity: .9; }

.splide__arrow:focus {
  outline: none; }

.splide__arrow--prev {
  left: 1em; }

.splide__arrow--prev svg {
  transform: scaleX(-1); }

.splide__arrow--next {
  right: 1em; }

.splide__pagination {
  position: absolute;
  z-index: 1;
  bottom: .5em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0; }

.splide__pagination__page {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ccc;
  border-radius: 50%;
  margin: 3px;
  padding: 0;
  transition: transform .2s linear;
  border: none;
  opacity: .7; }

.splide__pagination__page.is-active {
  transform: scale(1.4);
  background: #fff; }

.splide__pagination__page:hover {
  cursor: pointer;
  opacity: .9; }

.splide__pagination__page:focus {
  outline: none; }

.splide__progress__bar {
  width: 0;
  height: 3px;
  background: #ccc; }

.splide--nav > .splide__track > .splide__list > .splide__slide {
  border: 3px solid transparent; }

.splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
  border-color: #000; }

.splide--nav > .splide__track > .splide__list > .splide__slide:focus {
  outline: none; }

.splide--rtl > .splide__arrows .splide__arrow--prev, .splide--rtl > .splide__track > .splide__arrows .splide__arrow--prev {
  right: 1em;
  left: auto; }

.splide--rtl > .splide__arrows .splide__arrow--prev svg, .splide--rtl > .splide__track > .splide__arrows .splide__arrow--prev svg {
  transform: scaleX(1); }

.splide--rtl > .splide__arrows .splide__arrow--next, .splide--rtl > .splide__track > .splide__arrows .splide__arrow--next {
  left: 1em;
  right: auto; }

.splide--rtl > .splide__arrows .splide__arrow--next svg, .splide--rtl > .splide__track > .splide__arrows .splide__arrow--next svg {
  transform: scaleX(-1); }

.splide--ttb > .splide__arrows .splide__arrow, .splide--ttb > .splide__track > .splide__arrows .splide__arrow {
  left: 50%;
  transform: translate(-50%); }

.splide--ttb > .splide__arrows .splide__arrow--prev, .splide--ttb > .splide__track > .splide__arrows .splide__arrow--prev {
  top: 1em; }

.splide--ttb > .splide__arrows .splide__arrow--prev svg, .splide--ttb > .splide__track > .splide__arrows .splide__arrow--prev svg {
  transform: rotate(-90deg); }

.splide--ttb > .splide__arrows .splide__arrow--next, .splide--ttb > .splide__track > .splide__arrows .splide__arrow--next {
  top: auto;
  bottom: 1em; }

.splide--ttb > .splide__arrows .splide__arrow--next svg, .splide--ttb > .splide__track > .splide__arrows .splide__arrow--next svg {
  transform: rotate(90deg); }

.splide--ttb > .splide__pagination {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  bottom: 50%;
  left: auto;
  right: .5em;
  transform: translateY(50%); }