/* GLOBAL VARS */
:root {
  --color-accent: #ff640f;
  --color-accent2: #54d8ef;
  --color-primary: #fff;
  --font-size-body: clamp(14px, 16px, 1.3vw);
  --max-width-content: 1250px;
  --max-width-content-wide: 1800px;
  --width-content: 90%;
}

/* RESET GRID STYLES */
.content,
.grid {
  color: var(--color-primary);
  max-width: none;
  width: 100%;
}

.grid * {
  box-sizing: border-box;
}

.col,
.row {
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: normal;
  color: var(--color-primary);
}

button {
  all: unset;
  cursor: pointer;
}

/* GLOBAL */
.img>img {
  display: block;
  width: 100%;
}

.button-primary {
  background-color: var(--color-accent);
  border: 5px solid var(--color-primary);
  border-radius: 300px;
  color: var(--color-primary);
  min-width: 300px;
  padding: 25px 45px
}

.playing [class*="-play-toggle"] .fa-play-circle,
[class*="-play-toggle"] .fa-pause-circle {
  display: none;
}

.playing [class*="-play-toggle"] .fa-pause-circle {
  display: inline;
}

/* FONTS */
.font-heading {
  font-family: 'Jost', sans-serif;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}

.font-accent {
  font-family: 'Pacifico', cursive;
  font-size: 130%;
  font-weight: 500;
  line-height: 1em;
  text-transform: lowercase;
}

/* HERO & EPISODES */
[class*="container-hero-"] {
  margin: 0 auto;
  max-width: var(--max-width-content);
  width: var(--width-content);
}

.grid .row-hero-episodes {
  background-color: #0a0c23;
  position: static;
}

/* HERO BACKGROUND */
.grid .row-hero-background {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.container-hero-background {
  max-width: none;
  width: 100%;
}

.img-hero-background {
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  padding-bottom: 56.25%;
  position: relative;
}

.img-hero-background>img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

@media(max-width: 950px) {
  .img-hero-background {
    padding-bottom: 135%;
  }
}

@media(max-width: 550px) {
  .img-hero-background {
    padding-bottom: 180%;
  }
}

/* HERO TOPPER */
.grid .row-hero-topper {
  margin-bottom: 60px;
  margin-top: 20px;
}

.container-hero-topper {
  display: flex;
  justify-content: center;
  max-width: 720px;
  position: relative;
  width: 85%;
}

.col-hero-topper-text {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding-top: 25px;
  position: relative;
  text-align: center;
  z-index: 2;
}

.text-hero-topper-title {
  font-size: clamp(40px, 75px, 10.5vw);
  letter-spacing: -0.04em;
  position: relative;
  z-index: 1;
}

.text-hero-topper-title img {
  left: auto;
  top: -5%;
  position: relative;
}

.text-hero-topper-subtitle {
  font-size: clamp(21px, 33px, 4.5vw);
  text-align: center;
  text-transform: none;
}

.img-hero-topper-dr-j {
  border: 5px solid var(--color-primary);
  border-radius: 100%;
  box-shadow: 0 2px 65px rgba(0, 0, 0, .35);
  min-width: 120px;
  overflow: hidden;
  width: 22.5%;
}

[class*="col-hero-topper-characters"] {
  display: flex;
  width: 27%;
}

[class*="img-hero-topper-character-"] {
  bottom: 0;
  opacity: 0;
  position: absolute;
  transform: scale(0.25);
  transition: all .25s ease-in-out;
}

[class*="img-hero-topper-character-"].visible {
  opacity: 1;
  transform: scale(1);
}

.img-hero-topper-character-wyatt {
  left: -23%;
  width: 74.5%;
  z-index: 2;
}

.img-hero-topper-character-gabi {
  padding-bottom: 9% !important;
  right: 0;
  width: 65.5%;
  z-index: 1;
}

.img-hero-topper-character-cameron {
  left: 0;
  padding-bottom: 6%;
  width: 69%;
  z-index: 1;
}

.img-hero-topper-character-joules {
  left: calc(22.25%);
  width: 44.5%;
  z-index: 3;
}

.img-hero-topper-character-emma {
  padding-bottom: 21%;
  right: 10%;
  width: 48%;
  z-index: 2;
}

@media(min-width: 1121px) {
  .col-hero-topper-characters-left {
    right: 100%;
  }

  .col-hero-topper-characters-right {
    left: 100%;
  }
}

@media(min-width: 951px) and (max-width: 1120px) {

  .col-hero-topper-characters-left {
    right: 90%;
  }

  .col-hero-topper-characters-right {
    left: 90%;
  }
}

@media(min-width: 851px) and (max-width: 950px) {
  .col-hero-topper-characters-left {
    right: 84%;
  }

  .col-hero-topper-characters-right {
    left: 86%;
  }
}

@media(min-width: 851px) {
  [class*="col-hero-topper-characters"] {
    bottom: -8%;
    position: absolute;
    z-index: 1;
  }

}

@media(max-width: 850px) {
  .container-hero-topper {
    flex-wrap: wrap;
  }

  .col-hero-topper-text {
    order: 1;
  }

  [class*="col-hero-topper-characters"] {
    order: 2;
    padding-bottom: 68%;
    position: relative;
    width: 40%;
  }

  .img-hero-topper-character-joules {
    left: -32%;
  }

  .text-hero-topper-subtitle {
    max-width: 450px;
  }
}

@media(max-width: 550px) {

  [class*="col-hero-topper-characters"] {
    order: 2;
    padding-bottom: 85%;
    position: relative;
    width: 50%;
  }
}

/* HERO PLAYER */
.grid .row-hero-player {
  margin-bottom: 50px;
}

.container-hero-player {
  display: flex;
}

[class*="col-hero-player-"] {
  align-items: center;
  display: flex;
}

.col-hero-player-description {
  flex: 1;
}

.button-hero-player-play-toggle {
  font-size: clamp(30px, 120px, 10vw);
}

.text-hero-player-episode {
  white-space: nowrap;
}

.text-hero-player-episode-kicker {
  cursor: pointer;
  font-size: clamp(12px, 15px, 1.25vw);
  margin-bottom: 4px;
}

.text-hero-player-episode-title {
  cursor: pointer;
  font-size: clamp(20px, 50px, 4.25vw);
}

.text-hero-player-episode-description {
  cursor: pointer;
  /* font-size: var(--font-size-body); */
  font-size: clamp(16px, 20px, 1.6vw);
  line-height: 1.4em;
}

.button-hero-player-selector {
  align-items: center;
  display: flex;
}

.button-hero-player-selector i {
  font-size: clamp(20px, 40px, 3vw);
}

.text-hero-player-selector {
  font-size: clamp(27px, 34px, 2.5vw);
  line-height: 0.7em;
  margin-right: 10px;
}

.text-hero-player-selector span {
  display: block;
}

.text-hero-player-selector-small {
  font-size: clamp(10px, 12px, 1vw);
}

@media(min-width: 851px) {
  .container-hero-player {
    padding-left: 0;
    padding-right: 0;
  }

  .container-hero-player [class*="col-"] {
    padding: 0 3%;
  }

  .container-hero-player [class*="col-"]:not(:last-child) {
    border-right: 5px solid var(--color-primary);
  }

  .button-hero-player-play-toggle {
    margin-right: 25px;
  }
}

@media(max-width: 850px) {
  .container-hero-player {
    align-items: stretch;
    border-radius: 15px;
    flex-direction: column;
    padding: 0 30px;
  }

  [class*="col-hero-player-"] {
    justify-content: center;
    text-align: center;
  }

  .button-hero-player-play-toggle {
    margin-bottom: 10px;
  }

  .container-hero-player [class*="col-"] {
    padding: 30px 0;
  }

  .col-hero-player-episode {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0 !important;
  }

  .col-hero-player-description {
    border-bottom: 5px solid var(--color-primary);
    padding-top: 10px !important;
  }

}

@media(max-width: 767px) {
  .container-hero-player {
    padding: 0 5%;
  }
}

/* HERO PLATFORMS */
.grid .row-hero-platforms {
  margin-bottom: 50px;
}

.container-hero-platforms {
  align-items: center;
  display: flex;
  gap: 25px;
  justify-content: center;
}

.container-hero-platforms-links {
  align-items: center;
  display: flex;
  gap: 25px;
  margin: 0;
  width: auto;
}

@media(max-width: 670px) {
  .container-hero-platforms {
    flex-direction: column;
  }
}

@media(max-width: 490px) {
  .container-hero-platforms-links {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 300px;
  }
}

/* EPISODES */
.grid .row-episodes {
  margin-bottom: 120px;
}

.container-episodes-list-more {
  display: none;
}

.container-episodes {
  background-color: rgba(0, 0, 0, .4);
  border-radius: 10px;
  margin: 0 auto;
  padding: 3.125% 5%;
}

.container-episode {
  align-items: flex-start;
  display: flex;
  padding: 30px 0;
}

.container-episode:not(:last-child) {
  border-bottom: 1px solid #3f3f3f;
}

.container-episodes-list-more .container-episode:first-child {
  border-top: 1px solid #3f3f3f;
}

.text-episode {
  margin-right: 15px;
  max-width: 680px;
}

.text-episode-title {
  cursor: pointer;
  font-size: clamp(20px, 40px, 3vw);
}

.text-episode-description {
  cursor: pointer;
  color: rgba(255, 255, 255, .58);
  font-size: var(--font-size-body);
}

.container-episode-controls {
  display: flex;
  font-size: clamp(24px, 48px, 4vw);
  gap: 40px;
  margin-left: auto;
}

.container-episode-controls a {
  font-size: clamp(24px, 48px, 4vw);
}

.container-episodes-more {
  border-top: 1px solid #3f3f3f;
  padding: 50px 0 30px;
  text-align: center;
}

.button-episodes-more {
  color: var(--color-accent2);
  font-size: clamp(18px, 30px, 2.5vw);
}

.button-episodes-more [data-id="less"],
.container-episodes.show-more .button-episodes-more [data-id="more"] {
  display: none;
}

.container-episodes.show-more .button-episodes-more [data-id="less"] {
  display: inline;
}

.button-episodes-more i {
  transition: all .25s ease;
}

.container-episodes.show-more .button-episodes-more i {
  transform: rotate(180deg);
}

@media(max-width: 1120px) {
  .container-episode-controls {
    gap: 20px;
  }
}

@media(min-width: 768px) {
  .container-episodes {
    max-width: var(--max-width-content);
    width: var(--width-content);
  }
}

/* SEND YOUR QUESTION */
.row-send-your-question {
  display: none;
}

.container-send-your-question-background {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

[class*="img-send-your-question"] {
  height: 100%;
}

[class*="img-send-your-question"] img {
  height: 100%;
  object-fit: cover;
}

.img-send-your-question-background {
  width: 100%;
}

.img-send-your-question-kid {
  position: absolute;
  top: 0;
  right: 0;
}

.container-send-your-question {
  margin: 0 auto;
  max-width: var(--max-width-content-wide);
  padding: 140px 0;
  position: relative;
  width: var(--width-content);
}

.text-send-your-question {
  margin-bottom: 60px;
}

.text-send-your-question-title {
  font-size: clamp(34px, 70px, 5.8vw);
  margin-bottom: 25px;
}

.text-send-your-question-subtitle {
  font-size: clamp(17px, 33px, 2.75vw);
  text-transform: none;
}

.button-send-your-question {
  align-items: center;
  display: inline-flex;
  font-size: clamp(19px, 48px, 4.2vw);
  justify-content: center;
  line-height: 1em;
  text-decoration: none;
}

.button-send-your-question i {
  margin-left: 15px;
}

@media(max-width: 1450px) {
  .img-send-your-question-kid {
    right: -12%;
  }
}

@media(max-width: 1290px) {
  .img-send-your-question-kid {
    right: -22%;
  }
}

@media(max-width: 1060px) {
  .img-send-your-question-kid {
    right: -30%;
  }
}

@media(max-width: 870px) {
  .img-send-your-question-kid {
    right: -37%;
  }
}

@media(min-width: 768px) {
  .img-send-your-question-kid {
    -webkit-mask: linear-gradient(45deg, transparent 0%, transparent 36%, black 80%);
    mask: linear-gradient(45deg, transparent 0%, transparent 36%, black 80%);
  }
}

@media(max-width: 767px) {
  .img-send-your-question-kid {
    opacity: .3;
    right: 0;
  }

  .container-send-your-question {
    text-align: center;
  }
}

/* AUDIO PLAYER */
#audio_player .color-bg {
  background-color: var(--color-accent) !important;
}

#audio_player .color {
  color: var(--color-accent) !important;
}

#audio_player .radio-page-btn {
  display: none !important;
}

#audio_player .title {
  color: #000;
}