/* 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 {
  background-color: #0a0c23;
  color: var(--color-primary);
  max-width: none;
  width: 100%;
}

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

.content a:visited {
  color: inherit;
}

.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 {
  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 */
.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;
}

/* SEND YOUR QUESTION FORM */
.row-form {
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 120px;
}

.container-form {
  background-color: rgba(0, 0, 0, 0.46);
  border-radius: 28px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.45);
  margin: 0 auto;
  max-width: 920px;
  overflow: visible;
  padding: 32px clamp(18px, 3vw, 42px);
  position: relative;
  transition: min-height 0.35s ease;
  width: 90%;
}

.container-form-step {
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
  width: 100%;
  z-index: 1;
}

.container-form-step:first-child {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  transform: translateX(0);
}

.container-form-step.is-before,
.container-form-step.is-after {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.container-form-step.is-before {
  transform: translateX(-100%);
}

.container-form-step.is-after {
  transform: translateX(100%);
}

.container-form-step.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  transform: translateX(0);
  z-index: 2;
}

.container-form-step-content {
  padding-left: clamp(24px, 4.8vw, 58px);
  position: relative;
}

.container-form-step-number {
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 100%;
  display: inline-flex;
  height: clamp(50px, 8.2vw, 115px);
  justify-content: center;
  left: calc((clamp(50px, 8.2vw, 115px) / -2) - clamp(18px, 3vw, 42px));
  position: absolute;
  top: 2px;
  width: clamp(50px, 8.2vw, 115px);
  z-index: 2;
}

.text-form-step-number {
  align-items: center;
  display: flex;
  font-size: clamp(42px, 7vw, 82px);
  height: 100%;
  justify-content: center;
  line-height: 1;
  margin-top: -12%;
  width: 100%;
}

.container-form-step.is-active .container-form-step-number {
  background: var(--color-accent);
}

.container-form-step.is-complete .container-form-step-number {
  background: var(--color-accent2);
}

.container-form-step.is-complete .text-form-step-number {
  color: #0a0c23;
}

.text-form-step-title {
  font-size: clamp(26px, 48px, 4vw);
  margin-bottom: 14px;
}

.text-form-step-description {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(15px, 18px, 1.3vw);
  line-height: 1.5em;
  max-width: 780px;
}

.container-form-step-fields {
  display: grid;
  gap: 18px;
  margin: 30px 0;
}

.container-form-step-fields-group {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.container-form-step-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.container-form-step-field .text-form-label {
  color: rgba(27, 34, 49, 0.62);
  font-size: 14px;
  font-weight: 600;
  left: 16px;
  letter-spacing: 0;
  pointer-events: none;
  position: absolute;
  text-transform: none;
  top: 22px;
  transform-origin: left top;
  transition: transform 0.2s ease, top 0.2s ease, color 0.2s ease;
}

.container-form-step-field input {
  appearance: none;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 14px;
  color: #151a23;
  font-size: 16px;
  line-height: 1.2em;
  padding: 24px 16px 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.container-form-step-field input:focus {
  border-color: #1d9eff;
  box-shadow: 0 0 0 3px rgba(29, 158, 255, 0.2);
  outline: none;
}

.container-form-step-field.is-focused .text-form-label,
.container-form-step-field.has-value .text-form-label {
  color: #3c475f;
  top: 7px;
  transform: scale(0.76);
}

.container-form-step-field .text-form-error {
  color: #ffb4b4;
  display: block;
  font-size: 13px;
  line-height: 1.2em;
  min-height: 16px;
}

.container-form-step-field.error input,
.container-form-step-field.error.container-form-step-field-video {
  border-color: #ff8383;
}

.container-form-step-field.error .container-form-video-drop-zone,
.container-form-step-field.error .text-form-label-form-video-upload,
.container-form-step-field.error .label-form-video-upload {
  border-color: #ff8383;
}

.container-form .button-primary,
.container-form .button-secondary,
.container-form .button-form-video-mode,
.container-form .button-form-video-record {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  font-size: clamp(14px, 21px, 1.5vw);
  font-weight: 700;
  gap: 10px;
  justify-content: center;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.container-form .button-primary,
.container-form .button-secondary {
  border-radius: 300px;
  min-width: 220px;
  padding: 18px 34px;
}

.button-secondary {
  background-color: rgba(255, 255, 255, 0.14);
  border: 5px solid var(--color-primary);
  color: var(--color-primary);
}

.container-form-step-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.container-form-step[data-step-id="1"] .container-form-step-buttons,
.container-form-step[data-step-id="3"] .container-form-step-buttons {
  margin-top: 30px;
}

.container-form-step[data-step-id="2"] .container-form-step-buttons {
  margin-top: 30px;
  justify-content: flex-end;
}

.button-form-step-back {
  margin-right: auto;
}

.button-form-step-continue.is-loading,
.button-form-video-record.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.container-form-step-field-video {
  background: rgba(0, 0, 0, 0.24);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 18px;
  padding: 18px;
}

.container-form-step-field-video .text-form-label {
  color: rgba(255, 255, 255, 0.9);
  left: auto;
  margin-bottom: 8px;
  position: static;
  top: auto;
  transform: none;
}

.container-form-video-mode-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.button-form-video-mode {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 200px;
  color: var(--color-primary);
  padding: 9px 16px;
}

.button-form-video-mode.is-active {
  background: var(--color-accent);
  border-color: var(--color-primary);
}

.container-form-video-panel {
  display: none;
}

.container-form-video-panel.is-active {
  display: block;
}

.text-form-label-form-video-upload,
.label-form-video-upload {
  align-items: center;
  border: 2px dashed rgba(255, 255, 255, 0.52);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 160px;
  padding: 18px;
  text-align: center;
}

.container-form-video-drop-zone {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.container-form-video-drop-zone.is-dragover {
  background: rgba(84, 216, 239, 0.14);
  border-color: var(--color-accent2);
}

.container-form-video-drop-zone.has-file {
  border-color: rgba(84, 216, 239, 0.85);
  border-style: solid;
}

.container-form-video-drop-zone[hidden],
.label-form-video-upload[hidden],
.text-form-label-form-video-upload[hidden] {
  display: none !important;
}

.text-form-label-form-video-upload small,
.label-form-video-upload small {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

.input-form-video-upload {
  display: none;
}

.text-form-video-upload-selected {
  color: rgba(255, 255, 255, 0.82);
  margin: 12px 0 0;
}

.container-form-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.container-form-video-actions[hidden] {
  display: none !important;
}

.button-form-video-action {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.48);
  border-radius: 200px;
  color: var(--color-primary);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  text-transform: uppercase;
}

.button-form-video-remove {
  border-color: rgba(255, 131, 131, 0.86);
  color: #ffd6d6;
}

.video-form-preview {
  background: #000;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  display: block;
  margin-top: 14px;
  max-height: 310px;
  width: 100%;
}

.video-form-preview[hidden] {
  display: none !important;
}

.container-form-video-panel [hidden] {
  display: none !important;
}

.container-form-video-record-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.button-form-video-record {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 200px;
  color: var(--color-primary);
  padding: 9px 16px;
}

.button-form-video-record-stop {
  background: rgba(255, 100, 15, 0.22);
}

.text-form-video-record-note {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  margin: 12px 0 0;
}

@media (max-width: 850px) {
  .container-form {
    padding: 24px 18px;
  }

  .container-form-step-content {
    padding-left: 0;
    padding-top: 30px;
  }

  .container-form-step-number {
    left: -5%;
    top: calc((clamp(50px, 8.2vw, 115px) / -2) - clamp(18px, 3vw, 42px));
  }

  .container-form .button-primary,
  .container-form .button-secondary {
    min-width: 0;
    width: 100%;
  }

  .button-form-step-back {
    margin-right: 0;
    order: 2;
  }
}