@font-face {
  font-family: 'Six Caps';
  src: url("assets/fonts/SixCaps.woff2") format("woff2"), url("assets/fonts/SixCaps.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Fira Sans';
  src: url("assets/fonts/FiraSans-Light.woff2") format("woff2"), url("assets/fonts/FiraSans-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Fira Sans';
  src: url("assets/fonts/FiraSans-SemiBold.woff2") format("woff2"), url("assets/fonts/FiraSans-SemiBold.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Fira Mono';
  src: url("assets/fonts/FiraMono-Regular.woff2") format("woff2"), url("assets/fonts/FiraMono-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

.header-content__prev::after,
.header-content__next::after, .header-arrow, .index-arrow {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.690777 112.43136"><path fill="none" stroke="%23001b40" stroke-miterlimit="10" stroke-width="5" d="M5.28807 1.77443l54.85375 54.44125-54.85375 54.44125"/><path fill="none" stroke="%23fff" stroke-miterlimit="10" stroke-width="5" d="M1.7517 5.49643l51.93875 50.686246L1.7517 107.19018"/></svg>') no-repeat center;
  background-size: contain; }

.footer-share-link, .nav-share-link {
  display: inline-block;
  vertical-align: middle;
  color: inherit; }
  .footer-share-link > svg, .nav-share-link > svg {
    display: block;
    fill: currentColor; }

.nav, .signup-prompt {
  transition: opacity 0.5s ease-out; }
  .is-hidden.nav, .is-hidden.signup-prompt {
    opacity: 0;
    pointer-events: none; }

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Fira Sans", sans-serif;
  font-size: 20px;
  line-height: 1.5;
  color: #001b40;
  overflow-x: hidden; }

body {
  -ms-touch-action: manipulation;
      touch-action: manipulation; }
  body.no-scroll {
    -ms-touch-action: none;
        touch-action: none;
    position: fixed;
    left: 0;
    width: 100%;
    overflow-y: scroll; }

main, article, section, header, nav, footer, img {
  display: block; }

img {
  border: 0; }

h1, h2, h3, p {
  margin: 0 0 1rem; }
  h1:last-child, h2:last-child, h3:last-child, p:last-child {
    margin-bottom: 0; }

h1, .h1 {
  font-size: 1.5rem; }
  @media (min-width: 500px) {
    h1, .h1 {
      font-size: 2rem; } }
  @media (min-width: 768px) {
    h1, .h1 {
      font-size: 2.4rem; } }

h2,
h3 {
  font-size: 1.2rem; }
  @media (min-width: 768px) {
    h2,
    h3 {
      font-size: 1.5rem; } }

* {
  box-sizing: border-box; }

a {
  color: inherit; }

.hidden {
  display: none !important; }

.no-list, .castofcharacters-key {
  list-style: none;
  margin: 0;
  padding: 0; }

.no-btn, .content-video__play, .content-audio-controls__play, .btn, .signup-box-btn {
  border: 0;
  padding: 0;
  margin: 0;
  outline: 0;
  background: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

.talktous {
  overflow: hidden; }
  .talktous dt, .talktous dd {
    float: left;
    margin: 0; }
  .talktous dt {
    clear: left; }
  .talktous dd {
    margin-bottom: 0.5rem;
    clear: left; }
    @media (min-width: 768px) {
      .talktous dd {
        clear: none; } }

.t-h1,
.t-h2,
.content-block-hero-image .content-inline-quote-text {
  font-family: "Fira Mono", monospace;
  line-height: 1.6;
  margin: 0 0 0.7rem;
  padding-right: 0.8rem; }
  .t-h1 > span,
  .t-h2 > span,
  .content-block-hero-image .content-inline-quote-text > span {
    display: inline;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    padding: 0.15rem 0.8rem; }
    @media (min-width: 500px) {
      .t-h1 > span,
      .t-h2 > span,
      .content-block-hero-image .content-inline-quote-text > span {
        padding: 0.2rem 0.8rem; } }

.t-h1 {
  font-weight: bold;
  text-transform: uppercase; }
  .t-h1.t-h1--yellow > span {
    background-color: #ffec3e;
    color: #001b40; }
  .t-h1.t-h1--blue > span {
    background-color: #001b40;
    color: #ffec3e; }


.t-h2,
.content-block-hero-image .content-inline-quote-text {
  font-weight: normal; }
  .t-h2.t-h2--yellow > span, .content-block-hero-image .t-h2--yellow.content-inline-quote-text > span {
    background-color: #ffec3e;
    color: #001b40; }
  .t-h2.t-h2--white > span, .content-block-hero-image .content-inline-quote-text > span {
    background-color: white;
    color: #001b40; }
  .t-h2.t-h2--blue > span, .content-block-hero-image .t-h2--blue.content-inline-quote-text > span {
    background-color: #001b40;
    color: white; }

.t-h1 + .t-h2, .content-block-hero-image .t-h1 + .content-inline-quote-text {
  margin-top: -0.3rem; }

.cast {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
  border-radius: 10px;
  background: #ffec3e !important;
  padding-left: 1.5rem;
  padding-right: 0.5rem;
  cursor: pointer; }
  .cast::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1.2rem;
    height: 1.2rem;
    background-size: cover;
    border-radius: 100px; }
  .cast[data-cast="ab"]::before {
    background-image: url(assets/images/castofcharacters/ab.jpg); }
  .cast[data-cast="ah"]::before {
    background-image: url(assets/images/castofcharacters/ah.jpg); }
  .cast[data-cast="ateam"]::before {
    background-image: url(assets/images/castofcharacters/ateam.png); }
  .cast[data-cast="aw"]::before {
    background-image: url(assets/images/castofcharacters/aw.jpg); }
  .cast[data-cast="cn"]::before {
    background-image: url(assets/images/castofcharacters/cn.jpg); }
  .cast[data-cast="db"]::before {
    background-image: url(assets/images/castofcharacters/db.jpg); }
  .cast[data-cast="dd"]::before {
    background-image: url(assets/images/castofcharacters/dd.jpg); }
  .cast[data-cast="dw"]::before {
    background-image: url(assets/images/castofcharacters/dw.jpg); }
  .cast[data-cast="gw"]::before {
    background-image: url(assets/images/castofcharacters/gw.jpg); }
  .cast[data-cast="jg2"]::before {
    background-image: url(assets/images/castofcharacters/jg2.jpg); }
  .cast[data-cast="jg"]::before {
    background-image: url(assets/images/castofcharacters/jg.jpg); }
  .cast[data-cast="jp"]::before {
    background-image: url(assets/images/castofcharacters/jp.jpg); }
  .cast[data-cast="lw"]::before {
    background-image: url(assets/images/castofcharacters/lw.jpg); }
  .cast[data-cast="md"]::before {
    background-image: url(assets/images/castofcharacters/md.jpg); }
  .cast[data-cast="ms"]::before {
    background-image: url(assets/images/castofcharacters/ms.jpg); }
  .cast[data-cast="mw"]::before {
    background-image: url(assets/images/castofcharacters/mw.jpg); }
  .cast[data-cast="sn"]::before {
    background-image: url(assets/images/castofcharacters/sn.jpg); }

.content {
  overflow: hidden; }

.content-block-standard, .content-block-episode, .content-block-section {
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
  max-width: 40rem;
  margin: 0 auto; }
  @media (min-width: 500px) {
    .content-block-standard, .content-block-episode, .content-block-section {
      padding-left: 2rem; } }
  @media (min-width: 500px) {
    .content-block-standard, .content-block-episode, .content-block-section {
      padding-right: 2rem; } }

.content-inline-byline, .content-inline-box, .content-inline-quote {
  position: relative;
  z-index: 5;
  margin: 2rem 0; }
  @media (min-width: 768px) {
    .content-inline-byline, .content-inline-box, .content-inline-quote {
      margin: 1rem 2rem 1rem 0;
      width: 14rem;
      float: left; } }
  @media (min-width: 1024px) {
    .content-inline-byline, .content-inline-box, .content-inline-quote {
      margin-left: -5rem; } }
  @media (min-width: 1100px) {
    .content-inline-byline, .content-inline-box, .content-inline-quote {
      margin-left: -7rem; } }

.content-block-standard, .content-block-episode {
  margin-bottom: 1rem;
  color: #6d778a; }
  .content-block-standard:first-child, .content-block-episode:first-child {
    margin-top: 2rem; }
  .content-block-standard p a, .content-block-episode p a {
    color: inherit;
    text-decoration: none;
    background: linear-gradient(to bottom, transparent 0, transparent 0.5em, #ffec3e, 0.5em, #ffec3e 0.75em, transparent 0.75em, transparent 1em); }

@media (min-width: 768px) {
  .content-block-section.content-block-section--pin::before {
    content: "";
    position: absolute;
    margin-right: -1rem;
    right: 100%;
    top: 0.5rem;
    width: 6rem;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 163 473"><path fill="none" stroke="%23ffec3e" stroke-width="31.25" d="M82 412c23-89 65-257 65-308 0-65-34-88-65-88-32 0-66 23-66 88 0 51 42 219 66 308z"/><path fill="%23ffec3e" d="M82 123a28 28 0 1 0 0-56 28 28 0 0 0 0 56"/></svg>');
    opacity: 0.3;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 20rem; } }

.content-block-section__hero {
  line-height: 1;
  font-family: "Six Caps", sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  color: #ffec3e;
  opacity: 0.3;
  font-size: 10rem;
  height: 10rem; }
  @media (min-width: 500px) {
    .content-block-section__hero {
      font-size: 17rem;
      height: 17rem; } }
  @media (min-width: 768px) {
    .content-block-section__hero {
      font-size: 20rem;
      height: 20rem; } }

.content-block-section__title {
  position: absolute;
  bottom: 1rem; }
  @media (min-width: 500px) {
    .content-block-section__title {
      bottom: 2rem; } }

.content-inline-byline {
  font-family: "Fira Mono", monospace;
  font-size: 0.7rem;
  color: #001b40;
  margin-top: 0;
  margin-right: 1rem;
  margin-bottom: 1rem;
  background-color: #f8f8f8;
  padding: 0.5rem; }
  @media (min-width: 768px) {
    .content-inline-byline {
      width: 9rem; } }

.content-inline-box {
  color: white;
  font-family: "Fira Mono", monospace;
  font-size: 0.7rem;
  text-align: center; }
  .content-inline-box::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -ms-transform: rotate(-2.5deg);
        transform: rotate(-2.5deg);
    background-color: #001b40; }

.content-inline-box-content {
  padding: 1rem; }
  @media (min-width: 500px) {
    .content-inline-box-content {
      padding: 2rem; } }
  @media (min-width: 500px) and (max-width: 767px) {
    .content-inline-box-content {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      text-align: left; } }

@keyframes wobble {
  0% {
    transform: translate(0px, 0px) rotate(0deg); }
  15% {
    transform: translate(-15px, 0px) rotate(-5deg); }
  30% {
    transform: translate(11px, 0px) rotate(3deg); }
  45% {
    transform: translate(-7px, 0px) rotate(-3deg); }
  60% {
    transform: translate(4px, 0px) rotate(2deg); }
  75% {
    transform: translate(-2px, 0px) rotate(-1deg); }
  100% {
    transform: translate(0px, 0px) rotate(0deg); } }

.content-inline-box-image {
  max-width: 10rem;
  margin: 0 auto 1rem; }
  @media (min-width: 500px) and (max-width: 767px) {
    .content-inline-box-image {
      margin: 0 1rem 0 0; } }
  .content-inline-box-image.js-animate-css.is-visible {
    animation: wobble linear 1s;
    animation-iteration-count: 1; }

.content-inline-box-link {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -ms-transform: rotate(-2.5deg);
      transform: rotate(-2.5deg); }

.content-inline-box-action {
  font-weight: bold;
  color: #ffec3e; }
  .content-inline-box-action::before {
    content: "";
    display: block;
    width: 1rem;
    margin: 0 auto 0.5rem;
    border-top: 1px solid white; }
    @media (min-width: 500px) and (max-width: 767px) {
      .content-inline-box-action::before {
        margin-left: 0; } }

.content-inline-box-link:hover + .content-inline-box-action {
  text-decoration: underline; }

.content-inline-quote {
  font-family: "Fira Mono", monospace; }

.content-inline-quote-text {
  position: relative;
  font-size: 1.2rem;
  color: #001b40; }
  .content-inline-quote-text::before, .content-inline-quote-text::after {
    content: "";
    position: absolute;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 107 87"><path fill="%23f0f0f0" d="M44 66c0-7-2-13-8-17L47 0H27L6 44 1 56 0 66c0 6 2 11 6 15 5 4 10 6 16 6s11-2 16-6c4-4 6-9 6-15m61 0c0-7-3-13-9-17l11-49H87L66 44l-5 12-1 10c0 6 2 11 6 15 5 4 10 6 16 6s12-2 16-6 7-9 7-15"/></svg>');
    background-size: 100% 100%;
    width: 107px;
    height: 87px; }
  .content-inline-quote-text::before {
    top: -1.5rem;
    left: -0.5rem; }
    @media (min-width: 500px) {
      .content-inline-quote-text::before {
        left: -1rem; } }
    @media (min-width: 1024px) {
      .content-inline-quote-text::before {
        left: -2rem; } }
  .content-inline-quote-text::after {
    -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    bottom: -1.5rem;
    right: -0.5rem; }
    @media (min-width: 500px) {
      .content-inline-quote-text::after {
        right: -1rem; } }
    @media (min-width: 768px) {
      .content-inline-quote-text::after {
        right: 0; } }
  .content-inline-quote-text.is-hide-marks::before, .content-inline-quote-text.is-hide-marks::after {
    display: none; }
  .content-inline-quote-text > span {
    position: relative;
    z-index: 1;
    background: linear-gradient(to bottom, transparent 0, transparent 0.5em, #ffec3e, 0.5em, #ffec3e 0.75em, transparent 0.75em, transparent 1em); }

.content-inline-quote-author {
  font-size: 0.7rem; }
  .content-inline-quote-author::before {
    content: "";
    display: block;
    width: 2rem;
    height: 1px;
    background-color: #001b40;
    margin-bottom: 1rem; }
  .content-inline-quote-author .t-h2, .content-inline-quote-author .content-block-hero-image .content-inline-quote-text, .content-block-hero-image .content-inline-quote-author .content-inline-quote-text {
    margin-bottom: 0; }
    .content-inline-quote-author .t-h2 > span, .content-inline-quote-author .content-block-hero-image .content-inline-quote-text > span, .content-block-hero-image .content-inline-quote-author .content-inline-quote-text > span {
      color: #ffec3e; }

.content-image {
  position: relative;
  -webkit-clip-path: polygon(0 5px, 100% 0%, calc(100% - 3px) calc(100% - 3px), 3px 100%);
          clip-path: polygon(0 5px, 100% 0%, calc(100% - 3px) calc(100% - 3px), 3px 100%); }
  @media (min-width: 500px) {
    .content-image {
      -webkit-clip-path: polygon(0 10px, 100% 0%, calc(100% - 5px) calc(100% - 5px), 5px 100%);
              clip-path: polygon(0 10px, 100% 0%, calc(100% - 5px) calc(100% - 5px), 5px 100%); } }
  body.has-js .content-image.js-animate-css::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(assets/images/dots.svg);
    background-size: 100px;
    background-repeat: repeat; }

.content-image__main {
  width: 100%;
  max-width: 100%; }
  body.has-js .content-image.js-animate-css > .content-image__main {
    filter: url(#yellow); }

.content-image__animate {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: none; }
  body.has-js .content-image__animate {
    transition: opacity 0.4s linear;
    display: block; }
  body.has-js .content-image.is-visible > .content-image__animate {
    opacity: 1; }

.content-image-credit {
  margin-top: 0.1rem;
  font-size: 0.7rem;
  opacity: 0.8; }

.content-block-hero-image {
  background-size: cover;
  background-position: center;
  background-color: #f8f8f8;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center; }
  @media (min-width: 1024px) {
    .content-block-hero-image {
      background-attachment: fixed; } }
  .content-block-hero-image > .content {
    width: 100%; }
  @media (min-width: 768px) {
    .content-block-hero-image .content-inline-quote {
      width: 20rem; } }
  .content-block-hero-image .content-inline-quote-text > span {
    background-image: none;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem; }

.content-block-hero-image,
.content-block-video {
  max-height: 100vh;
  margin: 2rem 0; }
  @media (min-width: 500px) {
    .content-block-hero-image,
    .content-block-video {
      margin: 3rem 0; } }

.content-block-hero-image {
  position: relative;
  overflow: hidden;
  height: 100vh; }
  .content-block-hero-image::before, .content-block-hero-image::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    -ms-transform: rotate(-2.5deg);
        transform: rotate(-2.5deg);
    background-color: white;
    left: -50vw;
    width: 200vw;
    height: 20vh; }
  .content-block-hero-image::before {
    bottom: 100%;
    -ms-transform-origin: 150vw 0;
        transform-origin: 150vw 0; }
  .content-block-hero-image::after {
    top: 100%;
    -ms-transform-origin: 50vw 0;
        transform-origin: 50vw 0; }

.content-block-hero-image__credit,
.content-block-video__credit {
  position: absolute;
  z-index: 1;
  margin-top: 0.2rem;
  right: 1rem;
  font-family: "Fira Mono", monospace;
  font-size: 0.7rem; }

.content-block-hero-image__credit {
  bottom: 0; }

.content-block-video {
  position: relative;
  height: 56.25vw; }

.content-block-video__credit {
  top: 100%; }

.content-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  overflow: hidden;
  background: #00061e; }
  .content-video::before, .content-video::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    -ms-transform: rotate(-2.5deg);
        transform: rotate(-2.5deg);
    background-color: #ffec3e;
    left: -50vw;
    width: 200vw;
    height: 20vh;
    transition: opacity 0.2s ease-out; }
  .content-video::before {
    bottom: 100%;
    -ms-transform-origin: 150vw 0;
        transform-origin: 150vw 0; }
  .content-video::after {
    top: 100%;
    -ms-transform-origin: 50vw 0;
        transform-origin: 50vw 0; }
  .content-video.is-playing::before, .content-video.is-playing::after {
    opacity: 0;
    pointer-events: none; }
  .content-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }

.content-video__poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; }
  .has-loaded .content-video__poster {
    transition: opacity 0.5s ease-out;
    opacity: 0;
    pointer-events: none; }

.content-video__play {
  position: relative;
  width: 120px;
  height: 120px;
  border: 3px solid white;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 0 5px white;
  background-color: rgba(255, 255, 255, 0.05); }
  @media (min-width: 500px) {
    .content-video__play {
      border-width: 5px;
      width: 200px;
      height: 200px; } }
  .content-video__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48%;
    height: 54%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 95 109"><path fill="none" stroke="%23fff" stroke-linecap="square" stroke-miterlimit="10" stroke-width="5" d="M3 4l87 51-87 50V4z"/></svg>');
    background-size: 100% 100%;
    -ms-transform: translate(-36%, -50%);
        transform: translate(-36%, -50%); }
  .has-loaded .content-video__play {
    display: none; }

.content-video__caption {
  position: absolute;
  z-index: 2;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  transition: opacity 0.2s ease-out; }
  @media (min-width: 500px) {
    .content-video__caption {
      left: 2rem; } }
  @media (min-width: 500px) {
    .content-video__caption {
      right: 2rem; } }
  @media (min-width: 500px) {
    .content-video__caption {
      bottom: 2rem; } }
  @media (max-width: 767px) {
    .content-video__caption h3 {
      font-size: 0.7rem; } }
  .has-loaded .content-video__caption {
    opacity: 0; }

.content-audio {
  font-family: "Fira Mono", monospace;
  color: #001b40;
  margin: 2rem 0; }
  .content-audio audio {
    display: none; }
    .content-audio audio[controls] {
      width: 100%;
      display: block; }
  body.has-js .content-audio {
    background-color: #ffec3e; }

.content-audio-controls {
  padding: 0.25rem 0.5rem;
  -ms-flex-align: center;
      align-items: center;
  font-size: 0.6rem;
  border-bottom: 1px solid #001b40;
  display: none; }
  .content-audio-controls > div {
    margin: 0 0.5rem; }
  body.has-js .content-audio-controls {
    display: -ms-flexbox;
    display: flex; }

.content-audio-controls__play {
  position: relative;
  vertical-align: top;
  cursor: pointer;
  width: 37px;
  height: 40px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 95 109"><path fill="none" stroke="%23001b40" stroke-linecap="square" stroke-miterlimit="10" stroke-width="5" d="M3 4l87 51-87 50V4z"/></svg>');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  background-size: 17px 20px;
  padding: 0.5rem; }
  .content-audio-controls__play::after {
    content: "";
    position: absolute;
    display: none;
    top: 10px;
    left: 10px;
    width: 12px;
    height: 20px;
    border-left: 1px solid #001b40;
    border-right: 1px solid #001b40; }
  .is-playing .content-audio-controls__play {
    background: none; }
    .is-playing .content-audio-controls__play::after {
      display: block; }

.content-audio-controls__progress {
  -ms-flex: 1 1 0px;
      flex: 1 1 0px;
  padding: 0.75rem 0;
  -ms-touch-action: pan-x;
      touch-action: pan-x; }

.content-audio-bar {
  height: 5px;
  background-color: white; }

.content-audio-bar__done {
  position: relative;
  width: 0;
  height: 100%;
  background-color: #001b40; }
  .content-audio-bar__done::after {
    content: "";
    position: absolute;
    top: -7px;
    right: -10px;
    width: 20px;
    height: 20px;
    background-color: #001b40;
    border-radius: 100px; }

.content-audio-transcript {
  font-size: 0.8rem;
  padding-top: 1rem; }
  body.has-js .content-audio-transcript {
    padding: 1rem; }

.content-audio-transcript-word {
  position: relative;
  display: inline-block;
  white-space: pre; }
  .content-audio-transcript-word::after {
    content: " "; }
  .content-audio-transcript-word.is-person {
    font-weight: bold; }
  .content-audio-transcript-word::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: -1px;
    height: 100%;
    background-color: #001b40;
    transition: opacity 0.1s linear;
    opacity: 0; }
  body.has-js .content-audio-transcript-word:not(.is-revealed)::before {
    opacity: 1; }

.content-block-image {
  margin: 0; }
  @media (min-width: 1024px) {
    .content-block-image {
      margin-left: -5rem; } }
  @media (min-width: 1100px) {
    .content-block-image {
      margin-left: -7rem; } }
  .content-block-image.content-block-image--float {
    margin-top: 2rem;
    margin-bottom: 2rem; }
    @media (min-width: 768px) {
      .content-block-image.content-block-image--float {
        float: left;
        max-width: 14rem;
        margin-top: 1rem;
        margin-right: 2rem;
        margin-bottom: 1rem; } }
    @media (min-width: 1024px) {
      .content-block-image.content-block-image--float {
        max-width: 20rem; } }
  .content-block-image figcaption {
    font-family: "Fira Mono", monospace;
    font-size: 0.7rem;
    margin-top: 0.2rem; }

.content-block-episode {
  display: block;
  background-color: #001b40;
  color: white;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-decoration: none; }

.btn, .signup-box-btn {
  display: inline-block;
  border: 1px solid currentColor;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  font-family: "Fira Mono", monospace;
  font-size: 0.8rem;
  line-height: inherit;
  cursor: pointer;
  padding: 1rem 2rem; }
  .btn.btn--blue, .btn--blue.signup-box-btn {
    color: #001b40;
    box-shadow: 0 0 5px rgba(0, 27, 64, 0.6); }
    .btn.btn--blue:focus, .btn--blue.signup-box-btn:focus {
      box-shadow: 0 0 5px #001b40; }
  .btn.btn--white, .btn--white.signup-box-btn {
    color: white;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.6); }
    .btn.btn--white:focus, .btn--white.signup-box-btn:focus {
      box-shadow: 0 0 5px white; }
  .btn.btn--yellow, .btn--yellow.signup-box-btn {
    color: #ffec3e;
    box-shadow: 0 0 5px rgba(255, 236, 62, 0.6); }
    .btn.btn--yellow:focus, .btn--yellow.signup-box-btn:focus {
      box-shadow: 0 0 5px #ffec3e; }

.footer {
  position: relative;
  margin-top: 2rem;
  background-color: #001b40;
  font-family: "Fira Mono", monospace;
  padding: 1rem 0;
  font-size: 0.8rem; }
  @media (min-width: 500px) {
    .footer {
      padding: 1rem; } }
  @media (min-width: 768px) {
    .footer {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
          justify-content: center;
      padding: 4rem 2rem;
      font-size: 1rem; } }

.footer__left {
  width: 200px;
  margin: 0 auto;
  text-align: center;
  color: #ffec3e;
  padding: 1rem;
  box-sizing: content-box; }
  @media (min-width: 500px) and (max-width: 767px) {
    .footer__left {
      width: auto;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-pack: center;
          justify-content: center; } }
  @media (min-width: 768px) {
    .footer__left {
      margin: 0;
      padding: 0; } }
  .footer__left .btn, .footer__left .signup-box-btn {
    width: 100%; }

.footer__right {
  -ms-flex: 0 1 600px;
      flex: 0 1 600px;
  color: white;
  padding: 1rem; }
  @media (min-width: 768px) {
    .footer__right {
      padding: 0 0 0 2rem; } }

.footer-logo {
  display: block;
  margin-bottom: 1rem; }
  @media (min-width: 500px) and (max-width: 767px) {
    .footer-logo {
      margin-right: 1rem;
      margin-bottom: 0; } }
  .footer-logo > img {
    width: 200px; }

.footer-share-link {
  margin: 0 0.5rem; }
  .footer-share-link > svg {
    width: 32px;
    height: 32px; }

.footer-credits {
  padding: 1rem;
  background-color: #00061e;
  color: #9da7b8;
  font-family: "Fira Mono", monospace;
  font-size: 0.8rem;
  text-align: center; }
  .footer-credits a {
    color: inherit;
    display: inline-block; }

.header {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: end;
      justify-content: flex-end;
  background-position: center;
  background-size: cover;
  padding-top: 3rem; }
  @media (min-width: 768px) {
    .header {
      padding-top: 5rem; } }

.header-content {
  position: relative;
  max-width: 70rem;
  width: 100%;
  margin: 0 auto; }
  @media (min-width: 1024px) {
    .header-content {
      padding: 0 5rem; } }

.header-content__prev,
.header-content__next {
  position: absolute;
  top: 50%;
  margin-top: -2.5rem; }
  .header-content__prev::after,
  .header-content__next::after {
    display: block;
    content: "";
    width: 3rem;
    height: 5rem; }

.header-content__prev {
  left: 2rem;
  -ms-transform: rotate(180deg);
      transform: rotate(180deg); }

.header-content__next {
  right: 2rem; }

.header-title {
  padding: 1rem;
  max-width: 30rem;
  margin: 0 auto; }
  @media (min-width: 500px) {
    .header-title {
      padding: 2rem; } }
  @media (min-width: 768px) {
    .header-title {
      margin: 0; } }

.header-arrow {
  display: block;
  margin: 0 auto 3vw;
  width: 60px;
  height: 100px;
  -ms-transform: rotate(90deg);
      transform: rotate(90deg); }

.nav {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  width: 100%;
  height: 3rem; }
  @media (min-width: 768px) {
    .nav {
      height: 5rem; } }

.nav__col {
  -ms-flex: 1 1 100%;
      flex: 1 1 100%;
  padding: 1rem; }

.nav__logo {
  -ms-flex: 0 0 80px;
      flex: 0 0 80px;
  height: 100%; }
  @media (min-width: 768px) {
    .nav__logo {
      -ms-flex: 0 0 350px;
          flex: 0 0 350px; } }

.nav-logo {
  width: 100%;
  display: none; }
  @media (min-width: 768px) {
    .nav-logo {
      display: block; } }

.nav-logo-small {
  width: 100%; }
  @media (min-width: 768px) {
    .nav-logo-small {
      display: none; } }

.nav-toggle {
  position: absolute;
  right: 1rem;
  opacity: 0; }

.nav-burger {
  display: block;
  margin: 0 0 0 auto;
  padding: 0.5rem;
  width: 52px;
  cursor: pointer;
  transition: transform 0.2s ease-out; }

.nav-burger__line {
  display: block;
  height: 3px;
  margin-bottom: 14px;
  background-color: white;
  transition: all 0.2s ease-out; }
  .nav-burger__line:last-child {
    margin-bottom: 0; }

.nav-toggle:checked + .nav-burger {
  -ms-transform: rotate(-45deg);
      transform: rotate(-45deg); }
  .nav-toggle:checked + .nav-burger > .nav-burger__line:first-child {
    -ms-transform: translate(0, 17px) rotate(180deg);
        transform: translate(0, 17px) rotate(180deg); }
  .nav-toggle:checked + .nav-burger > .nav-burger__line:nth-child(2) {
    opacity: 0; }
  .nav-toggle:checked + .nav-burger > .nav-burger__line:last-child {
    -ms-transform: translate(0, -17px) rotate(270deg);
        transform: translate(0, -17px) rotate(270deg); }

.nav-share {
  display: inline-block;
  background-color: #ffec3e;
  color: #001b40;
  font-weight: bold;
  padding: 0.2rem 0.3rem; }

.nav-share-link {
  margin: 0 0.2rem; }
  @media (max-width: 499px) {
    .nav-share-link:first-child {
      display: none; } }

.signup-prompt {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center; }
  @media (min-width: 500px) {
    .signup-prompt {
      left: auto;
      right: 2rem; } }

.signup-prompt-btn {
  display: inline-block;
  background-color: #ffec3e;
  color: #001b40;
  text-decoration: none;
  line-height: 3.3rem;
  padding: 0 1rem;
  font-family: "Fira Mono", monospace;
  font-size: 0.6rem; }
  @media (min-width: 500px) {
    .signup-prompt-btn {
      font-size: 0.8rem; } }
  .signup-prompt-btn > svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem; }

.signup-box {
  padding: 1rem;
  background-color: #ffec3e;
  font-family: "Fira Mono", monospace;
  font-size: 0.8rem;
  max-width: 30rem;
  margin: 0 auto; }
  @media (min-width: 500px) {
    .signup-box {
      padding: 2rem; } }
  @media (min-width: 1024px) {
    .signup-box {
      max-width: 20rem; } }

.signup-box-title {
  font-size: 0.9rem; }
  @media (min-width: 500px) {
    .signup-box-title {
      font-size: 1.2rem; } }
  .signup-box-title > span {
    background-color: #001b40;
    color: #ffec3e; }

.signup-box-text,
.signup-box-btn {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: inherit; }
  .signup-box-text:focus,
  .signup-box-btn:focus {
    box-shadow: 0 0 3px #001b40; }

.signup-box-text {
  margin-bottom: 1rem;
  border: 0;
  height: 3rem;
  line-height: 3rem;
  padding: 0 1rem;
  outline: 0; }

.signup-box-radio {
  display: inline-block;
  vertical-align: top;
  margin-right: 1rem;
  cursor: pointer; }
  .signup-box-radio > input[type=radio] {
    position: absolute;
    opacity: 0; }
  .signup-box-radio > span {
    position: relative;
    display: inline-block;
    padding-left: 1.5rem; }
    .signup-box-radio > span::before, .signup-box-radio > span::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 1rem;
      height: 1rem;
      border-radius: 1rem;
      background-color: white; }
    .signup-box-radio > span::after {
      top: 0.2rem;
      left: 0.2rem;
      width: 0.6rem;
      height: 0.6rem;
      -ms-transform: scale(0);
          transform: scale(0);
      transition: transform 0.1s ease-out;
      background-color: #001b40; }
  .signup-box-radio > input[type=radio]:focus + span::before {
    box-shadow: 0 0 3px #001b40; }
  .signup-box-radio > input[type=radio]:checked + span::after {
    -ms-transform: scale(1);
        transform: scale(1); }

.signup-box-btn {
  background-color: #001b40;
  border-color: #001b40;
  color: #ffec3e;
  box-shadow: 0 0 5px rgba(0, 27, 64, 0.6); }

.castofcharacters-toggle {
  position: fixed;
  top: 0;
  left: -100vw; }

.castofcharacters-wrapper {
  padding-top: 3rem;
  background-color: #001b40;
  transition: transform 0.2s linear;
  width: 200%; }
  @media (min-width: 768px) {
    .castofcharacters-wrapper {
      padding-top: 5rem; } }
  @media (min-width: 768px) {
    .castofcharacters-wrapper {
      width: auto;
      -ms-transform: translate(0, 0) !important;
          transform: translate(0, 0) !important; } }
  .castofcharacters-wrapper.is-london {
    -ms-transform: translate(-35%, 0);
        transform: translate(-35%, 0); }

.castofcharacters {
  width: 85%;
  padding: 1rem;
  margin-top: 5rem; }
  @media (min-width: 500px) {
    .castofcharacters {
      padding: 2rem; } }
  @media (min-width: 768px) {
    .castofcharacters {
      margin: 2rem auto 0;
      width: auto;
      max-width: 50rem; } }

.castofcharacters-aspect {
  position: relative;
  height: 0;
  padding-bottom: 77.94118%; }
  .castofcharacters-aspect svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.castofcharacters-rank {
  position: absolute;
  height: 12.57862%;
  left: -100vw;
  right: -100vw;
  background-color: rgba(0, 6, 30, 0.3); }
  .castofcharacters-rank:nth-child(1) {
    top: 2.51572%; }
  .castofcharacters-rank:nth-child(2) {
    top: 27.67296%; }
  .castofcharacters-rank:nth-child(3) {
    top: 52.83019%; }
  .castofcharacters-rank:nth-child(4) {
    top: 77.98742%; }

.castofcharacters-popup {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 0.5rem 0.5rem 0.5rem 0;
  display: none; }
  @media (min-width: 500px) {
    .castofcharacters-popup {
      padding: 2rem; } }
  .castofcharacters-toggle:checked + .castofcharacters-popup {
    display: -ms-flexbox;
    display: flex; }

.castofcharacters-popup__close {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 27, 64, 0.4); }

.castofcharacters-character {
  position: absolute;
  width: 7.84314%;
  height: 10.06289%;
  background-color: #ffec3e;
  background-size: 100% 100%;
  border-radius: 100px;
  border: 2px solid white;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.1s ease-out; }
  @media (min-width: 500px) {
    .castofcharacters-character {
      border-width: 3px; } }
  .castofcharacters-character#ab {
    background-image: url(assets/images/castofcharacters/ab.jpg);
    top: 46.54088%;
    left: 50%; }
  .castofcharacters-character#ah {
    background-image: url(assets/images/castofcharacters/ah.jpg);
    top: 59.1195%;
    left: 19.11765%; }
  .castofcharacters-character#ateam {
    background-image: url(assets/images/castofcharacters/ateam.png);
    top: 8.80503%;
    left: 68.13725%; }
  .castofcharacters-character#aw {
    background-image: url(assets/images/castofcharacters/aw.jpg);
    top: 71.69811%;
    left: 38.72549%; }
  .castofcharacters-character#cn {
    background-image: url(assets/images/castofcharacters/cn.jpg);
    top: 84.27673%;
    left: 19.11765%; }
  .castofcharacters-character#db {
    background-image: url(assets/images/castofcharacters/db.jpg);
    top: 84.27673%;
    left: 74.01961%; }
  .castofcharacters-character#dd {
    background-image: url(assets/images/castofcharacters/dd.jpg);
    top: 46.54088%;
    left: 75.98039%; }
  .castofcharacters-character#dw {
    background-image: url(assets/images/castofcharacters/dw.jpg);
    top: 71.69811%;
    left: 6.37255%; }
  .castofcharacters-character#gw {
    background-image: url(assets/images/castofcharacters/gw.jpg);
    top: 33.96226%;
    left: 85.78431%; }
  .castofcharacters-character#jg2 {
    background-image: url(assets/images/castofcharacters/jg2.jpg);
    top: 84.27673%;
    left: 62.2549%; }
  .castofcharacters-character#jg {
    background-image: url(assets/images/castofcharacters/jg.jpg);
    top: 59.1195%;
    left: 62.2549%; }
  .castofcharacters-character#jp {
    background-image: url(assets/images/castofcharacters/jp.jpg);
    top: 21.38365%;
    left: 50%; }
  .castofcharacters-character#lw {
    background-image: url(assets/images/castofcharacters/lw.jpg);
    top: 84.27673%;
    left: 37.7451%; }
  .castofcharacters-character#md {
    background-image: url(assets/images/castofcharacters/md.jpg);
    top: 59.1195%;
    left: 81.86275%; }
  .castofcharacters-character#ms {
    background-image: url(assets/images/castofcharacters/ms.jpg);
    top: 84.27673%;
    left: 8.33333%; }
  .castofcharacters-character#mw {
    background-image: url(assets/images/castofcharacters/mw.jpg);
    top: 84.27673%;
    left: 27.94118%; }
  .castofcharacters-character#sn {
    background-image: url(assets/images/castofcharacters/sn.jpg);
    top: 33.96226%;
    left: 74.01961%; }
  .castofcharacters-character:hover,
  .castofcharacters-toggle:checked + .castofcharacters-popup + .castofcharacters-character {
    -ms-transform: translate(-50%, -50%) scale(1.5);
        transform: translate(-50%, -50%) scale(1.5);
    z-index: 1; }
  .castofcharacters-character.is-family::after, .castofcharacters-face.is-family::after {
    content: "";
    position: absolute;
    top: -2%;
    left: -2%;
    width: 30%;
    height: 30%;
    background-image: url(assets/images/castofcharacters/crest.png);
    background-size: 100% 100%;
    border-radius: 100px;
    border: 2px solid white; }

.castofcharacters-box {
  position: relative;
  background-color: #ffec3e;
  max-width: 25rem;
  max-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 0 0 1rem #ffec3e;
  padding: 1rem;
  outline: 0;
  scrollbar-color: #001b40 white;
  scrollbar-width: thin; }
  .castofcharacters-box::-webkit-scrollbar {
    width: 8px; }
  .castofcharacters-box::-webkit-scrollbar-track {
    background-color: white; }
  .castofcharacters-box::-webkit-scrollbar-thumb {
    background-color: #001b40; }

.castofcharacters-box__close {
  position: fixed;
  margin-top: -1rem;
  margin-left: -0.5rem;
  width: 30px;
  height: 30px;
  border-radius: 100px;
  color: #001b40;
  border: 1px solid currentColor;
  cursor: pointer;
  box-shadow: 0 0 0 0.5rem #ffec3e;
  background-color: #ffec3e; }
  @media (min-width: 500px) {
    .castofcharacters-box__close {
      margin-left: -1rem; } }
  .castofcharacters-box__close::before, .castofcharacters-box__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 1px;
    background-color: currentColor; }
  .castofcharacters-box__close::before {
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
        transform: translate(-50%, -50%) rotate(-45deg); }
  .castofcharacters-box__close::after {
    -ms-transform: translate(-50%, -50%) rotate(45deg);
        transform: translate(-50%, -50%) rotate(45deg); }

.castofcharacters-face {
  position: relative;
  margin: 0 auto 1rem;
  width: 200px; }
  .castofcharacters-face > img {
    border-radius: 100px;
    border: 4px solid white;
    width: 100%; }

.castofcharacters-info {
  margin: 0 0 0.75rem;
  font-family: "Fira Mono", monospace; }
  .castofcharacters-info::after {
    content: "";
    display: block;
    clear: both; }
  .castofcharacters-info dt, .castofcharacters-info dd {
    float: left;
    background-color: #001b40;
    margin: 0 0 0.25rem; }
  .castofcharacters-info dt {
    clear: left;
    color: #ffec3e;
    font-weight: bold;
    padding: 0 0.5rem;
    text-transform: uppercase;
    margin-right: -0.5rem; }
  .castofcharacters-info dd {
    color: white;
    padding: 0 0.5rem; }

.castofcharacters-bio {
  font-size: 0.8rem; }

.castofcharacters-key {
  position: absolute;
  top: -4rem;
  left: 0;
  padding: 0.5rem 0.5rem 0.25rem;
  background-color: #6d778a;
  font-family: "Fira Mono", monospace;
  font-size: 0.6rem;
  color: white; }
  @media (min-width: 768px) {
    .castofcharacters-key {
      top: -2rem; } }
  .castofcharacters-key li {
    margin-bottom: 0.25rem; }

.castofcharacters-key-icon {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  border-radius: 100px;
  margin-right: 0.5rem;
  border: 2px solid white; }

.castofcharacters-key-line {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 4px;
  margin-right: 0.5rem; }
  .castofcharacters-key-line.is-d {
    background-color: #0074ff; }
  .castofcharacters-key-line.is-a {
    background-color: #d97525; }
  .castofcharacters-key-line.is-b {
    background-color: #d14364; }

.episode-header {
  min-height: 100vh;
  overflow: hidden; }
  .episode-header::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    -ms-transform: rotate(-2.5deg);
        transform: rotate(-2.5deg);
    -ms-transform-origin: 50vw 0;
        transform-origin: 50vw 0;
    background-color: white;
    left: -50vw;
    width: 200vw;
    height: 20vh; }

.index-header {
  -ms-flex-pack: center;
      justify-content: center;
  min-height: 68vh;
  transition: min-height 0.5s ease-out; }
  .index-header.is-playing {
    min-height: 100vh; }
  .index-header.is-finished {
    -ms-flex-pack: end;
        justify-content: flex-end; }
  .index-header .btn, .index-header .signup-box-btn {
    background-color: #001b40;
    color: #ffec3e;
    border: 0; }

.index-header-video {
  padding: 1rem;
  position: static; }
  @media (min-width: 500px) {
    .index-header-video {
      padding: 2rem; } }
  .index-header-video::before, .index-header-video::after {
    display: none; }
  .is-started .index-header-video .content-video__play {
    display: none; }
  .index-header-video iframe {
    background-color: black;
    opacity: 0;
    transition: opacity 0.5s ease-out; }
    .is-started .index-header-video iframe {
      opacity: 1; }
  .is-finished .index-header-video iframe,
  .is-finished .index-header-video .content-video__play {
    display: none; }

.index-header-video-btn {
  position: relative;
  margin-top: 2rem; }
  .is-started .index-header-video-btn {
    display: none; }

.index-header-video-more {
  text-align: center;
  display: none; }
  .is-finished .index-header-video-more {
    display: block; }
  .index-header-video-more .header-arrow {
    margin-bottom: 0; }

.index-episodes {
  background-color: #001b40;
  color: white;
  padding: 0.5rem 0.25rem;
  margin-bottom: 1px;
  text-align: center;
  white-space: nowrap;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

.index-episodes__prev,
.index-episodes__next {
  background-color: #ffec3e;
  width: 5rem; }

.index-episode {
  display: inline-block;
  vertical-align: top;
  width: 230px;
  padding: 0 0.25rem;
  font-size: 0.7rem;
  text-align: left;
  white-space: normal;
  overflow: hidden; }

.index-episode-link {
  display: block;
  text-decoration: none;
  color: inherit; }

.index-episode-top {
  position: relative;
  margin-bottom: 0.5rem;
  padding-bottom: 60%; }
  .index-episode-top::before, .index-episode-top::after {
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%; }
  .is-featured .index-episode-top::before {
    content: "";
    top: 0;
    height: 5px;
    background-color: white; }
  .index-episode-top::after {
    content: "";
    bottom: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(0, 27, 64, 0) 0%, #001b40 100%); }

.index-episode-top__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  .is-future .index-episode-top__image {
    opacity: 0.4; }

.index-episode-top__date {
  position: absolute;
  top: 0;
  right: 0;
  background-color: white;
  color: #001b40;
  padding: 0.1rem 0.5rem; }

.index-episode-meta {
  position: relative;
  z-index: 2;
  transition: transform 0.2s ease-out; }
  .is-future .index-episode-meta {
    opacity: 0.4; }
  .is-published:hover .index-episode-meta,
  .is-featured .index-episode-meta {
    -ms-transform: translate(0, -4rem);
        transform: translate(0, -4rem); }
    @media (min-width: 900px) {
      .is-published:hover .index-episode-meta,
      .is-featured .index-episode-meta {
        -ms-transform: translate(0, -5rem);
            transform: translate(0, -5rem); } }

.index-episode-meta__extra {
  position: absolute;
  top: 100%;
  margin-top: 0.5rem; }

.index-episode-title {
  font-size: 0.8rem; }
  .index-episode-title > span {
    padding: 0.1rem 0.4rem; }

.index-episode-read {
  color: #ffec3e;
  font-weight: bold;
  margin-top: -0.5rem; }

.index-section-title {
  position: relative;
  margin-bottom: 1rem;
  text-align: center;
  padding: 2rem 1rem 0; }
  @media (min-width: 500px) {
    .index-section-title {
      padding-top: 3rem; } }

.index-section-bg-prologue,
.index-section-bg-bts,
.index-section-cast {
  position: relative; }
  .index-section-bg-prologue::before,
  .index-section-bg-bts::before,
  .index-section-cast::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50vw;
    width: 200vw;
    height: 100%;
    -ms-transform: rotate(-2.5deg);
        transform: rotate(-2.5deg);
    background-color: #ffec3e; }

.index-section-bg-prologue::before {
  top: 0;
  background-color: #ffec3e; }
  @media (min-width: 1024px) {
    .index-section-bg-prologue::before {
      top: 7rem; } }

.index-section-bg-bts::before {
  background-color: #f8f8f8; }

.index-section-bg-bts .content-block-standard, .index-section-bg-bts .content-block-episode {
  color: inherit; }

.index-section {
  position: relative; }
  @media (min-width: 1024px) {
    .index-section {
      display: -ms-flexbox;
      display: flex; } }

.index-section__col {
  position: relative; }
  .index-section__col:first-child {
    padding-top: 1rem; }
  .index-section__col:last-child {
    padding-bottom: 1rem; }
  @media (min-width: 1024px) {
    .index-section__col {
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: start;
          align-items: flex-start; }
      .index-section__col:first-child {
        padding-top: 0;
        -ms-flex-pack: end;
            justify-content: flex-end; }
      .index-section__col:last-child {
        padding-bottom: 0; } }

.index-section-content {
  padding: 1rem;
  position: relative;
  margin: 0 auto; }
  @media (min-width: 500px) {
    .index-section-content {
      padding: 2rem; } }
  @media (min-width: 768px) {
    .index-section-content {
      max-width: 40rem; } }
  @media (min-width: 1024px) {
    .index-section-content {
      margin: 0;
      padding-top: 4rem;
      max-width: 30rem; }
      .index-section-content > .image {
        margin-top: -1rem; } }

.index-section-cast {
  text-align: center;
  padding: 1rem;
  margin-top: 1rem; }
  .index-section-cast::before {
    background-color: #001b40; }
  @media (min-width: 1024px) {
    .index-section-cast {
      padding: 0;
      margin-top: 0; } }
  @media (min-width: 1024px) {
    .index-section-cast {
      background-color: #001b40; }
      .index-section-cast::before {
        display: none; } }

.index-section-cast-image {
  width: 100%;
  margin: 2rem auto; }

.index-section-btn, .index-section-cast-btn {
  width: 100%; }
  @media (min-width: 768px) {
    .index-section-btn, .index-section-cast-btn {
      max-width: 18rem; } }

.index-section-cast-btn {
  position: relative;
  color: rgba(255, 236, 62, 0.5) !important;
  box-shadow: none !important;
  cursor: auto; }
  .index-section-cast-btn::after {
    content: "Coming 16th Jan";
    font-family: "Fira Sans", sans-serif;
    text-transform: none;
    background: white;
    color: #001b40;
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem; }

.index-arrow {
  display: block;
  width: 60px;
  height: 100px;
  -ms-transform: rotate(90deg);
      transform: rotate(90deg);
  margin: 0 auto; }