.player-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}

.player-overlay--show-controls {
  z-index: 1;
}

.player-overlay--show-replay {
  z-index: auto;
}

.player-overlay__inner {
  display: flex;
  width: 100%;
  height: 100%;
}

.player-error {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: var(--white);
  background: var(--midnight);
}

.player-error__wrapper {
  width: 100%;
  max-width: 720px;
  margin: 0 18px;
}

.player-error__message {
  line-height: 30px;
  font-size: 20px;
  font-weight: bold;
}

/* The small breakpoint ("tablet") has changed from 768px to 760px to accommodate updated component spacing used throughout PBS.org. */

.passport-screen {
  width: 100%;
  height: 100%;
  background-size: cover;
}

.passport__overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 12px;
  color: var(--white);
  background: rgb(10 20 90 / 80%);
  mix-blend-mode: normal;
}

/* We set opacity to 100% when it is the Lite Portal Player since the upsell won't have a background poster and the player controls would otherwise be showing, which we don't want. */
.lite-portal-player.passport__overlay {
  background-color: rgb(10 20 90 / 100%);
}

@media (min-width: 376px) {
  .passport__overlay {
    padding: 18px;
  }
}

@media (min-width: 760px) {
  .passport__overlay {
    padding: 28px;
  }
}

/* ------------------------------- */
.passport__header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  vertical-align: middle;
  margin: 4px 0;
}

@media (min-width: 760px) {
  .passport__header {
    margin: 8px 0 16px;
    font-size: 22px;
    line-height: 28px;
  }
}

/* ------------------------------- */
.passport__logo {
  width: 18px;
  height: 18px;
  margin: 0 4px;
}

@media (min-width: 760px) {
  .passport__logo {
    width: 25px;
    height: 25px;
  }
}

/* ------------------------------- */

.passport__arrow {
  margin-bottom: -1px;
}

/* ------------------------------- */

.passport-link {
  text-decoration: none;
  font-weight: 700;
  color: var(--yellow);
}

/* ------------------------------- */
.passport__subtitle {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  margin: 4px 0;
}

@media (min-width: 376px) {
  .passport__subtitle {
    max-width: 100%;
    margin: 8px 0;
  }
}
@media (min-width: 760px) {
  .passport__subtitle {
    font-size: 32px;
    line-height: 40px;
    max-width: 70%;
  }
}

/* ------------------------------- */
.passport__description-container {
  display: none;
  width: 75%;
}

.passport__description-container > .passport__learn-more-link {
  padding-left: 8px;
}

@media (min-width: 760px) {
  .passport__description-container {
    display: block;
    margin: 8px 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    width: 76%;
  }
}

@media (min-width: 1024px) {
  .passport__description-container {
    width: 55%;
  }
}

@media (min-width: 1280px) {
  .passport__description-container {
    width: 46%;
  }
}

/* ------------------------------- */
.passport__actions {
  margin: 12px 0;
  font-size: 14px;
}

.passport__actions > .btn {
  padding: 5px 25px;
}

@media (min-width: 376px) {
  .passport__actions > .btn {
    padding: 6px 25px;
  }

  .passport__actions {
    margin: 18px 0 12px;
  }
}

@media (min-width: 500px) {
  .passport__actions {
    margin: 24px 0 18px;
  }
}

@media (min-width: 760px) {
  .passport__actions {
    margin: 32px 0 18px;
    font-size: 16px;
  }
}

/* ------------------------------- */
.passport__check-membership-section {
  display: none;
}

.passport__footer {
  display: inline-flex;
  height: 100%;
  align-items: flex-end;
  font-size: 14px;
}

.passport__footer > .passport__learn-more {
  margin-right: 32px;
}

@media (min-width: 760px) {
  .passport__footer {
    display: none;
  }

  .passport__check-membership-section {
    display: inline-flex;
    margin-top: 8px;
    font-size: 16px;
    height: 100%;
    align-items: flex-end;
  }

  .passport__already-member {
    margin: 16px 48px 8px 0;
    font-weight: 500;
  }

  .passport__check-link {
    padding-left: 10px;
  }
}

/* ------------------------------- */
.passport__support {
  display: inline-flex;
  justify-content: center;
  font-size: 14px;
}

.passport__support-link {
  font-size: 14px;
}

@media (min-width: 760px) {
  .passport__support-link {
    font-size: 16px;
  }
}

.color-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.color-picker__color {
  min-width: 25px;
  min-height: 25px;
  margin: 5px;
  border: 1px solid var(--white);
}

/* The !important is necessary to override videojs CSS classes 
on focusable children of vjs-modal. */
.color-picker__color--active,
.color-picker__color:active,
.color-picker__color:focus {
  outline: 3px solid var(--light-blue) !important;
}

@media (min-width: 600px) {
  .color-picker {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .color-picker__color {
    min-width: 30px;
    min-height: 30px;
  }
}

@media (min-width: 768px) {
  .color-picker {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: none;
  }
}

/* CSS Grid fixes for IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .color-picker {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .color-picker__color:nth-of-type(1) {
    -ms-grid-column: 1;
  }

  .color-picker__color:nth-of-type(2) {
    -ms-grid-column: 2;
  }

  .color-picker__color:nth-of-type(3) {
    -ms-grid-column: 3;
  }

  .color-picker__color:nth-of-type(4) {
    -ms-grid-column: 4;
  }

  .color-picker__color:nth-of-type(5) {
    -ms-grid-column: 5;
  }

  .color-picker__color:nth-of-type(6) {
    -ms-grid-column: 6;
  }

  .color-picker__color:nth-of-type(7) {
    -ms-grid-column: 7;
  }

  .color-picker__color:nth-of-type(8) {
    -ms-grid-column: 8;
  }
}

@media (min-width: 600px) and (-ms-high-contrast: none),
  (-ms-high-contrast: active) {
  .color-picker {
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr;
  }
  .color-picker__color:nth-of-type(1) {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
  }
  .color-picker__color:nth-of-type(2) {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
  }
  .color-picker__color:nth-of-type(3) {
    -ms-grid-column: 3;
    -ms-grid-row: 1;
  }
  .color-picker__color:nth-of-type(4) {
    -ms-grid-column: 4;
    -ms-grid-row: 1;
  }
  .color-picker__color:nth-of-type(5) {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
  }
  .color-picker__color:nth-of-type(6) {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
  }
  .color-picker__color:nth-of-type(7) {
    -ms-grid-column: 3;
    -ms-grid-row: 2;
  }
  .color-picker__color:nth-of-type(8) {
    -ms-grid-column: 4;
    -ms-grid-row: 2;
  }
}

@media (min-width: 768px) and (-ms-high-contrast: none),
  (-ms-high-contrast: active) {
  .color-picker {
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: none;
  }
  .color-picker__color:nth-of-type(1) {
    -ms-grid-column: 1;
  }
  .color-picker__color:nth-of-type(2) {
    -ms-grid-column: 2;
  }
  .color-picker__color:nth-of-type(3) {
    -ms-grid-column: 3;
  }
  .color-picker__color:nth-of-type(4) {
    -ms-grid-column: 4;
  }
  .color-picker__color:nth-of-type(5) {
    -ms-grid-column: 5;
    -ms-grid-row: 1;
  }
  .color-picker__color:nth-of-type(6) {
    -ms-grid-column: 6;
    -ms-grid-row: 1;
  }
  .color-picker__color:nth-of-type(7) {
    -ms-grid-column: 7;
    -ms-grid-row: 1;
  }
  .color-picker__color:nth-of-type(8) {
    -ms-grid-column: 8;
    -ms-grid-row: 1;
  }
}

.cc-settings__preview-header {
  margin: 16px;
  font-size: 1em !important;
  font-weight: 400;
}

.cc-settings__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  margin: 16px;
  background: url("88b19270c1f7d879f94b75b689b3a384.7cac10df7d26.png");
}

.cc-settings__preview-text {
  padding: 20px;
}

.cc-settings {
  width: 100%;
  height: 100%;
}

.cc-settings__modal {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  font-size: 1.4em !important;
  background: var(--charcoal);
  color: var(--fog);
  box-shadow: 0 4px 35px 2px var(--onyx);
  z-index: 1;
}

.cc-settings__form {
  position: relative;
  max-height: calc(100% - 78px);
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width: 1025px) {
  .cc-settings {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cc-settings__overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--shadow-black);
    z-index: 10;
  }

  .cc-settings__modal {
    width: 1024px;
    max-height: 576px;
    margin-bottom: 32px;
    z-index: 11;
  }
}

.cc-settings__modal-header {
  display: flex;
  padding: 10px;
  width: 100%;
  justify-content: space-between;
  background-color: var(--shadow);
}

@media (min-width: 600px) {
  .cc-settings__modal-header {
    min-height: 52px;
    padding: 20px 16px 16px;
  }
}

.cc-settings__title {
  margin: 0;
  color: var(--fog);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}

@media (min-width: 600px) {
  .cc-settings__title {
    font-size: 16px !important;
  }
}

.cc-settings__close {
  font-size: 10px;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

@media (min-width: 600px) {
  .cc-settings__close {
    font-size: 16px;
  }
}

.cc-settings__close img {
  display: block;
  margin: auto;
  width: 16px;
  height: 16px;
}

@media (min-width: 450px) {
  .cc-settings__form {
    padding: 0 32px;
  }
}

@media (min-width: 600px) {
  .cc-settings__form {
    max-height: calc(100% - 106px);
    padding: 0;
  }
}

.cc-settings__options {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0 16px;
  border-top: 1px dashed var(--shadow);
}

@media (min-width: 600px) {
  .cc-settings__options {
    flex-flow: row wrap;
  }
}

@media (min-width: 768px) {
  .cc-settings__options {
    flex-wrap: nowrap;
  }
}

.cc-settings__basic-styles {
  margin-bottom: 16px;
}

.cc-settings__colors {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 16px;
}

@media (min-width: 600px) {
  .cc-settings__colors {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    order: -1;
  }

  .cc-settings__colors > .cc-settings__option {
    width: 200px;
    margin: 0;
  }
}

@media (min-width: 768px) {
  .cc-settings__colors {
    display: block;
    min-width: 400px;
    max-width: 400px;
    order: 0;
  }

  .cc-settings__colors > .cc-settings__option {
    width: auto;
    margin: 0 16px;
  }
}

.cc-settings__opacity {
  margin: 0 5px 16px 0;
}

@media (min-width: 600px) {
  .cc-settings__basic-styles,
  .cc-settings__opacity {
    width: 48%;
  }
}

.cc-settings__option {
  width: 100%;
  margin: 0 auto 20px;
}

@media (min-width: 600px) {
  .cc-settings__option {
    padding: 0 16px;
  }
}

.cc-settings__option p {
  margin-bottom: 10px;
}

.cc-settings__option select {
  display: block;
  width: 100%;
  height: 30px;
}

.cc-settings__option input[type='range'] {
  width: 100%;
  height: 30px;
  padding: 0;
}

.cc-settings__button-container {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 40px;
  padding: 3px;
  border-top: 1px dashed var(--shadow);
  background: var(--charcoal);
}

@media (min-width: 600px) {
  .cc-settings__button-container {
    height: 72px;
    padding: 16px;
  }
}

.cc-settings__button {
  float: right;
  margin-left: 8px;
}

@media (min-width: 600px) {
  .cc-settings__button {
    margin-left: 16px;
  }
}

.info-overlay {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 20px 10px;
  color: var(--white);
  white-space: nowrap;
}

@media (min-width: 420px) {
  .info-overlay {
    padding: 20px;
  }
}

@media (min-width: 768px) {
  .info-overlay {
    padding: 40px;
  }
}

.info-overlay__header {
  display: flex;
  margin-bottom: 5px;
}

@media (min-width: 420px) {
  .info-overlay__header {
    flex-direction: column;
  }
}

.info-overlay__show {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  color: var(--white);
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px var(--shadow-black);
}

@media (min-width: 420px) {
  .info-overlay__show {
    font-size: 18px;
  }
}

.info-overlay__show::after {
  content: ':';
}

@media (min-width: 420px) {
  .info-overlay__show::after {
    content: '';
  }
}

.info-overlay__show a {
  color: currentColor;
}

.info-overlay__title {
  margin: 0;
  padding-left: 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 1px var(--shadow-black);
}

@media (min-width: 420px) {
  .info-overlay__title {
    max-width: 100%;
    margin: 5px 0;
    font-size: 22px;
    font-weight: 700;
    padding: 0;
    pointer-events: none;
  }
}

@media (min-width: 600px) {
  .info-overlay__title {
    max-width: 100%;
    margin: 10px 0;
    font-size: 28px;
    font-weight: 700;
    padding: 0;
    pointer-events: none;
  }
}

.info-overlay__details {
  color: var(--white);
  font-size: 12px;
  pointer-events: none;
  text-shadow: 1px 1px 1px var(--shadow-black);
}

@media (min-width: 420px) {
  .info-overlay__details {
    font-size: 16px;
  }
}

@media (min-width: 600px) {
  .info-overlay__details {
    font-size: 18px;
  }
}

.info-screen {
  padding: 20px;
  background: var(--charcoal);
  color: var(--white);
}

.info-screen__header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
}

@media (min-width: 500px) {
  .info-screen__header {
    font-size: 14px;
    margin-bottom: 15px;
  }
}

.info-screen__show-title {
  margin-bottom: 0;
}

.info-screen__show-title a {
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (min-width: 500px) {
  .info-screen__show-title a {
    font-size: 14px;
  }
}

.info-screen__video-title {
  margin-top: 5px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 500px) {
  .info-screen__video-title {
    font-size: 22px;
    overflow: visible;
    white-space: normal;
  }
}

.info-screen__description {
  font-size: 14px;
  line-height: 1.42;
  max-width: 700px;
}

@media (max-width: 600px) {
  .info-screen__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  @supports (display: -webkit-box) {
    .info-screen__description {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      white-space: normal;
    }
  }
}

.info-screen__meta {
  display: flex;
  align-items: center;
  color: var(--pebble);
  font-size: 12px;
  font-weight: 700;
}

@media (min-width: 500px) {
  .info-screen__meta {
    font-size: 14px;
  }
}

.info-screen__meta span {
  display: inline-block;
}

.info-screen__premiere {
  border-right: 1px solid var(--pebble);
  padding-right: 10px;
}

.info-screen__cc-issue a {
  color: var(--yellow);
}

.info-screen__cc-issue a:focus {
  outline: 3px solid var(--yellow);
}

.info-screen__cc-icon {
  padding-left: 10px;
  width: 20px;
  max-height: 26px;
}

@media (min-width: 500px) {
  .info-screen__cc-icon {
    width: 36px;
  }
}

.embed-screen {
  padding: 10px;
  background: var(--charcoal);
  color: var(--white);
}

@media (min-width: 500px) {
  .embed-screen {
    padding: 20px;
  }
}

.embed-screen__header {
  display: flex;
  justify-content: space-between;
}

.embed-screen__heading {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}

@media (min-width: 500px) {
  .embed-screen__heading {
    font-size: 14px;
  }
}

.embed-screen__title {
  font-size: 12px;
  margin: 5px 0;
}

@media (min-width: 500px) {
  .embed-screen__title {
    font-size: 18px;
    margin-top: 16px;
  }
}

.embed-screen__description {
  display: none;
}

@media (min-width: 500px) {
  .embed-screen__description {
    display: block;
    margin-bottom: 24px;
    font-size: 14px;
  }
}

.embed-screen__duration {
  color: var(--pebble);
}

.embed-screen__thumbnail {
  width: 40%;
}

@media (min-width: 500px) {
  .embed-screen__thumbnail {
    display: block;
    width: 35%;
  }
}

@media (min-width: 768px) {
  .embed-screen__thumbnail {
    display: block;
    width: unset;
  }
}

.embed-screen__options {
  display: flex;
  margin-top: 8px;
  font-size: 8px;
}

@media (min-width: 500px) {
  .embed-screen__options {
    margin-bottom: 8px;
    font-size: 12px;
  }
}

.embed-screen__options-title {
  width: 100%;
  margin-bottom: 4px;
  margin-top: 0;
  flex-grow: 1;
  font-size: 14px;
  text-transform: uppercase;
}

.embed-screen__dimensions {
  display: flex;
  margin-bottom: 10px;
}

.embed-screen__options input {
  background: var(--shadow);
  color: var(--fog);
  border: none;
  text-align: center;
  height: 22px;
  padding: 0 5px;
}

.embed-screen__width,
.embed-screen__height {
  margin-right: 10px;
}

.embed-screen__width input,
.embed-screen__height input {
  width: 45px;
  margin-left: 5px;
}

.embed-screen__iframe {
  position: relative;
  flex-grow: 1;
}

@media (min-width: 500px) {
  .embed-screen__iframe {
    display: flex;
    flex-direction: column;
  }
}

.embed-screen__iframe input {
  display: block;
  width: 100%;
  margin: 0 0 5px;
  text-align: left;
}

.embed-responsive-iframe {
  flex-grow: 1;
  width: 100%;
}

.embed-screen__iframe span {
  position: absolute;
  right: 0;
  top: 28px;
  color: var(--pebble);
  font-size: 8px;
}

@media (min-width: 500px) {
  .embed-screen__iframe span {
    position: relative;
    top: 0;
    text-align: right;
    font-size: 10px;
  }
}

.share-screen {
  height: 100%;
  padding: 20px;
  background: var(--charcoal);
  color: var(--white);
}

.share-screen__header {
  display: flex;
  justify-content: space-between;
}

.share-screen__heading {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}

@media (min-width: 500px) {
  .share-screen__heading {
    font-size: 14px;
  }
}

.share-screen__links {
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  text-align: center;
}

.share-screen__option {
  position: relative;
  width: 20%;
  padding: 0;
}

@media (min-width: 768px) {
  .share-screen__option {
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
  }
}

.share-screen__button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.share-screen__button-label {
  color: var(--fog);
  font-size: 10px;
  font-family: 'PBS Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin-bottom: 0;
}

@media (min-width: 500px) {
  .share-screen__button-label {
    font-size: 12px;
  }
}

.share-screen__button:focus {
  outline: 3px solid var(--light-blue);
}

.share-screen__button:hover > .share-screen__button-label {
  display: block;
  color: var(--white);
}

.share-screen__icon {
  width: 16px;
  height: 16px;
}

@media (min-width: 500px) {
  .share-screen__icon {
    width: 30px;
    height: 30px;
  }
}

.share-screen__icon path {
  fill: var(--fog);
}

.share-screen__button:hover > .share-screen__icon path {
  fill: var(--white);
}

.share-screen__direct-link-field {
  position: absolute;
  top: 60px;
  right: 0;
  width: 200px;
}

@media (min-width: 500px) {
  .share-screen__direct-link-field {
    top: 100px;
    width: 300px;
  }
}

.share-screen__direct-link-field input {
  height: 22px;
  width: 100%;
  padding: 0 5px;
  font-size: 10px;
  background: var(--shadow);
  color: var(--fog);
  border: none;
  text-align: left;
}

@media (min-width: 500px) {
  .share-screen__direct-link-field input {
    font-size: 12px;
  }
}

.share-screen__direct-link-field p {
  color: var(--fog);
  font-size: 8px;
  text-align: right;
}

@media (min-width: 500px) {
  .share-screen__direct-link-field p {
    font-size: 10px;
  }
}

.hidden {
  display: none;
}

.shop-screen {
  padding: 20px;
  background: var(--charcoal);
  color: var(--white);
}

.shop-screen__header {
  display: flex;
  justify-content: space-between;
}

.shop-screen__heading {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}

@media (min-width: 500px) {
  .shop-screen__heading {
    font-size: 14px;
  }
}

.shop-screen__logo {
  padding-top: 12px;
  height: 60px;
}

@media (min-width: 500px) {
  .shop-screen__logo {
    padding-top: 25px;
  }
}

.shop-screen__message {
  margin: 8px 0 16px;
  font-size: 12px;
}

@media (min-width: 500px) {
  .shop-screen__message {
    margin: 25px 0;
    font-size: 14px;
  }
}

.shop-screen__cta {
  padding-top: 10px;
}

.shop-screen__buy-link {
  color: var(--white);
  padding: 8px 16px;
  margin-right: 10px;
  font-size: 12px;
  text-transform: uppercase;
  background: var(--pbs-blue);
}

@media (min-width: 500px) {
  .shop-screen__buy-link {
    padding: 10px 20px;
    margin-right: 16px;
    font-size: 14px;
  }
}

.topbar-screen {
  background: var(--charcoal);
  width: 100%;
}

.player-donate {
  height: 100%;
  color: var(--white);
  background-color: var(--white);
  font-family: 'PBS Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: 10px;
}

.player-donate__header {
  display: none;
}
@media (min-width: 600px) {
  .player-donate__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 29%;
    background-color: var(--pbs-blue);
  }
}

.player-donate__title {
  margin: 0;
  padding-top: 3%;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .player-donate__title {
    font-size: 26px;
  }
}
@media (min-width: 1024px) {
  .player-donate__title {
    font-size: 32px;
  }
}

.player-donate__subtitle {
  font-size: 16px;
  padding-top: 2%;
}
@media (min-width: 768px) {
  .player-donate__subtitle {
    font-size: 18px;
  }
}
@media (min-width: 1024px) {
  .player-donate__subtitle {
    font-size: 22px;
  }
}

.player-donate__content {
  padding-top: 2%;
  color: var(--slate);
}
@media (min-width: 768px) {
  .player-donate__content {
    padding-top: 4%;
  }
}

.player-donate__lg-text {
  display: none;
}
@media (min-width: 600px) {
  .player-donate__lg-text {
    display: block;
    margin: 0;
    font-size: 16px;
    line-height: 20px;
  }
}
@media (min-width: 768px) {
  .player-donate__lg-text {
    font-size: 21px;
    line-height: 28px;
  }
}
@media (min-width: 1024px) {
  .player-donate__lg-text {
    font-size: 24px;
    line-height: 40px;
  }
}

.player-donate__sm-text {
  margin: 5px 8px 8px;
  font-size: 10px;
  line-height: 14px;
}
@media (min-width: 350px) {
  .player-donate__sm-text {
    margin: 2% 5%;
    font-size: 14px;
    line-height: 18px;
  }
}
@media (min-width: 600px) {
  .player-donate__sm-text {
    display: none;
  }
}

.player-donate__station-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px;
}

.player-donate__station-logo {
  border-right: 1px solid var(--slate);
  padding-right: 10px;
  margin-right: 10px;
  max-width: 50px;
}
@media (min-width: 400px) {
  .player-donate__station-logo {
    max-width: 90px;
  }
}
@media (min-width: 600px) {
  .player-donate__station-logo {
    padding-right: 20px;
    margin-right: 20px;
    max-width: 160px;
  }
}
@media (min-width: 768px) {
  .player-donate__station-logo {
    max-width: 200px;
  }
}

.player-donate__station-name {
  color: var(--slate);
  font-size: 10px;
  line-height: 24px;
}
@media (min-width: 400px) {
  .player-donate__station-name {
    font-size: 16px;
  }
}
@media (min-width: 600px) {
  .player-donate__station-name {
    font-size: 20px;
    line-height: 70px;
  }
}
@media (min-width: 768px) {
  .player-donate__station-name {
    font-size: 24px;
    line-height: 90px;
  }
}

.player-donate__btn-container {
  padding-top: 3.8%;
}

.player-donate__btn {
  height: auto;
  background-color: var(--red);
  color: var(--white);
  text-decoration: none;
  font-size: 12px;
  border: 1px solid var(--red);
  border-radius: 4px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  padding: 5px 16px;
}
@media (min-width: 400px) {
  .player-donate__btn {
    font-size: 14px;
  }
}
@media (min-width: 600px) {
  .player-donate__btn {
    padding: 16px 32px;
    font-size: 17px;
  }
}

.player-related {
  width: 100%;
  height: 100%;
  background-color: var(--charcoal);
  color: var(--white);
  font-family: 'PBS Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: center;
}

.player-related__title {
  padding: 4px;
  font-size: 14px;
  margin: 0;
  text-transform: uppercase;
  text-align: left;
}
@media (min-width: 600px) {
  .player-related__title {
    padding: 24px 0 0 16px;
    font-size: 18px;
  }
}

.player-related__videos {
  display: flex;
  justify-content: space-between;
  margin: 2px;
}
@media (min-width: 600px) {
  .player-related__videos {
    margin: 8% 16px;
  }
}

.player-related__video {
  width: 46%;
}

.player-related__video:nth-of-type(3) {
  display: none;
}

@media (min-width: 600px) {
  .player-related__video {
    width: 30%;
  }

  .player-related__video:nth-of-type(3) {
    display: block;
  }
}

.player-related__image {
  width: 100%;
}

.player-related__video a {
  color: var(--white);
}

.player-related__show-title {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
@media (min-width: 600px) {
  .player-related__show-title {
    font-size: 14px;
  }
}

.player-related__video-title {
  font-size: 12px;
}
@media (min-width: 600px) {
  .player-related__video-title {
    font-size: 14px;
  }
}

.end-screen {
  width: 100%;
  height: 100%;
}

.end-screen__modal {
  position: relative;
  height: 100%;
  z-index: 100;
  padding: 0;
}

.clickable {
  display: inline-block;
  border: none;
  margin: 0;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.clickable:focus {
  outline: 3px solid var(--light-blue) !important;
}

.circular-progress circle {
  transition: stroke-dashoffset 1s linear;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.thumbnail-progress {
  position: relative;
  width: 120px;
  height: 80px;
}

.thumbnail-progress-play {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.thumbnail-progress-play-inner {
  position: relative;
}

.thumbnail-progress-play-fg {
  z-index: 1;
}

.thumbnail-progress-play-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

/* Small breakpoint set to 760px to account for PBS.org spacing refactor. */

@media (min-width: 760px) {
  .upnext-close {
    align-self: flex-start;
  }
}

.upnext-close-icon {
  color: var(--fog);
  font-size: 20px;
  line-height: 1;
}

.upnext-content {
  background: var(--shadow-black);
  color: var(--fog);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.upnext-main {
  text-align: right;
  flex-grow: 1;
  max-width: 50%;
  padding-right: 20px;
  padding-left: 20px;
}

@media (min-width: 760px) {
  .upnext-main {
    max-width: 70%;
  }
}

.upnext-countdown {
  margin-bottom: 15px;
}

.upnext-countdown-seconds {
  color: var(--light-blue-lighten-20);
  font-weight: 700;
}

.upnext-show-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 3px;
  overflow: hidden;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upnext-overlay {
  position: absolute;
  bottom: 72px;
  left: 10px;
  right: 10px;
  z-index: 2;
}

@media (min-width: 760px) {
  .upnext-overlay {
    left: auto;
    width: 540px;
  }
}

.topbar-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

.topbar {
  display: flex;
  max-height: 43px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: var(--onyx);
}

.topbar__logo {
  height: 20px; /* need defined heights for vertical alignment in IE */
}

.topbar__logo h1 {
  margin: 0;
}

.topbar__logo a {
  display: block;
  padding: 0 55px 0 5px;
  height: 20px;
}

.topbar__logo img {
  position: absolute; /* IE */
  height: 20px; /* IE */
}

.topbar__controls {
  display: flex;
  align-items: center;
}

.topbar__screen-button {
  display: inline-flex;
  padding: 0 12px;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

.topbar__logo a:focus {
  outline: 3px solid var(--light-blue);
}

.topbar__screen-button:focus {
  outline: 3px solid var(--yellow);
}

.topbar__icon {
  width: 16px;
  max-height: 20px;
}

.topbar__icon > path {
  fill: var(--cloud);
}

.topbar__icon.selected > path {
  fill: var(--yellow);
}

.topbar__screen-button:hover > .topbar__icon > path {
  fill: var(--yellow);
}

/* Text-based button for closing UI */
.topbar__close-btn {
  padding: 0;
  color: var(--yellow);
  background-color: transparent;
  border: 0;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 500px) {
  .topbar__close-btn {
    font-size: 14px;
  }
}

.topbar__close-btn:focus {
  outline: 3px solid var(--yellow);
}

.vjs-ad-playing.vjs-ad-playing .vjs-progress-control{pointer-events:none}.vjs-ad-playing.vjs-ad-playing .vjs-play-progress{background-color:#ffe400}.vjs-ad-loading .vjs-loading-spinner{display:block;visibility:visible}.vjs-ad-playing .vjs-captions-button{display:none}.vjs-ad-playing .vjs-audio-button{display:none}.vjs-ad-loading .vjs-loading-spinner:before,.vjs-ad-loading .vjs-loading-spinner:after{-webkit-animation:vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite,vjs-spinner-fade 1.1s linear infinite;animation:vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite,vjs-spinner-fade 1.1s linear infinite}.vjs-ad-loading .vjs-loading-spinner:before{border-top-color:#fff}.vjs-ad-loading .vjs-loading-spinner:after{border-top-color:#fff;-webkit-animation-delay:0.44s;animation-delay:0.44s}.vjs-ad-loading .vjs-big-play-button,.vjs-ad-loading .vjs-poster,.vjs-ad-content-resuming .vjs-big-play-button,.vjs-ad-content-resuming .vjs-poster{display:none}

/**
 * Copyright 2014 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.ima-ad-container {
  top: 0em;
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
}

/* Move overlay if user fast-clicks play button. */
.video-js.vjs-playing .bumpable-ima-ad-container {
  margin-top: -4em;
}

/* Move overlay when controls are active. */
.video-js.vjs-user-inactive.vjs-playing .bumpable-ima-ad-container {
  margin-top: 0em;
}

.video-js.vjs-paused .bumpable-ima-ad-container,
.video-js.vjs-playing:hover .bumpable-ima-ad-container,
.video-js.vjs-user-active.vjs-playing .bumpable-ima-ad-container {
  margin-top: -4em;
}

.ima-controls-div {
  bottom: 0em;
  height: 1.4em;
  position: absolute;
  overflow: hidden;
  display: none;
  opacity: 1;
  background-color: rgba(7, 20, 30, .7);
  background: -moz-linear-gradient(
      bottom,
      rgba(7, 20, 30, .7) 0%,
      rgba(7, 20, 30, 0) 100%); /* FF3.6+ */
  background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0%,rgba(7, 20, 30, .7)),
      color-stop(100%,rgba(7, 20, 30, 0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
      bottom,
      rgba(7, 20, 30, .7) 0%,
      rgba(7, 20, 30, 0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(bottom,
    rgba(7, 20, 30, .7) 0%,
    rgba(7, 20, 30, 0) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(bottom,
    rgba(7, 20, 30, .7) 0%,
    rgba(7, 20, 30, 0) 100%); /* IE10+ */
  background: linear-gradient(to top,
    rgba(7, 20, 30, .7) 0%,
    rgba(7, 20, 30, 0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#0007141E',
    endColorstr='#07141E',GradientType=0 ); /* IE6-9 */
}

.ima-controls-div.ima-controls-div-showing {
  height: 3.7em;
}

.ima-countdown-div {
  height: 1em;
  color: #FFFFFF;
  text-shadow: 0 0 0.2em #000;
  cursor: default;
}

.ima-seek-bar-div {
  top: 1.2em;
  height: 0.3em;
  position: absolute;
  background: rgba(255, 255, 255, .4);
}

.ima-progress-div {
  width: 0em;
  height: 0.3em;
  background-color: #ECC546;
}

.ima-play-pause-div, .ima-mute-div, .ima-slider-div, .ima-fullscreen-div {
  width: 2.33em;
  height: 1.33em;
  top: 0.733em;
  left: 0em;
  position: absolute;
  color: #CCCCCC;
  font-size: 1.5em;
  line-height: 2;
  text-align: center;
  font-family: VideoJS;
  cursor: pointer;
}

.ima-mute-div {
  left: auto;
  right: 5.667em;
}

.ima-slider-div {
  left: auto;
  right: 2.33em;
  width: 3.33em;
  height: 0.667em;
  top: 1.33em;
  background-color: #555555;
}

.ima-slider-level-div {
  width: 100%;
  height: 0.667em;
  background-color: #ECC546;
}

.ima-fullscreen-div {
  left: auto;
  right: 0em;
}

.ima-playing:before {
  content: "\00f103";
}

.ima-paused:before {
  content: "\00f101";
}

.ima-playing:hover:before, .ima-paused:hover:before {
  text-shadow: 0 0 1em #fff;
}

.ima-non-muted:before {
  content: "\00f107";
}

.ima-muted:before {
  content: "\00f104";
}

.ima-non-muted:hover:before, .ima-muted:hover:before {
  text-shadow: 0 0 1em #fff;
}

.ima-non-fullscreen:before {
  content: "\00f108";
}

.ima-fullscreen:before {
  content: "\00f109";
}

.ima-non-fullscreen:hover:before, .ima-fullscreen:hover:before {
  text-shadow: 0 0 1em #fff;
}

.vjs-marker{position:absolute;left:0;bottom:0;opacity:1;height:100%;transition:opacity .2s ease;-webkit-transition:opacity .2s ease;-moz-transition:opacity .2s ease;z-index:100}.vjs-marker:hover{cursor:pointer;-webkit-transform:scale(1.3,1.3);-moz-transform:scale(1.3,1.3);-o-transform:scale(1.3,1.3);-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.vjs-tip{visibility:hidden;display:block;opacity:.8;padding:5px;font-size:10px;position:absolute;bottom:14px;z-index:100000}.vjs-tip .vjs-tip-arrow{background:url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left;bottom:0;left:50%;margin-left:-4px;background-position:bottom left;position:absolute;width:9px;height:5px}.vjs-tip .vjs-tip-inner{border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px 8px;background-color:#000;color:#fff;max-width:200px;text-align:center}.vjs-break-overlay{visibility:hidden;position:absolute;z-index:100000;top:0}.vjs-break-overlay .vjs-break-overlay-text{padding:9px;text-align:center}
.wrapper {
  position: relative;
}

.wrapper--error {
  min-height: 100vh;
}

.video-js-marker {
  background-color: darkgray !important;
}

.vjs-tip {
  bottom: 25% !important;
}

.vjs-poster::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgb(0 0 0 / 45%);
}

/* Custom Skin for PBS Player --------------------------- */

.vjs-pbs.video-js {
  font-family: 'PBS Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.vjs-pbs.video-js.lite-portal-player {
  font-family: system-ui !important;
}

/* All player controls should start slightly darker and only brighten up on hover or on focus  */
.vjs-pbs button.vjs-control,
.vjs-pbs div.vjs-playback-rate,
.vjs-pbs div.vjs-quality-selector > button,
.vjs-pbs div.vjs-chapter-selector > button,
.vjs-pbs div.vjs-audio-button > button,
.vjs-pbs button.vjs-pbs-cc-button {
  filter: brightness(90%);
}

.vjs-pbs button.vjs-control:hover,
.vjs-pbs div.vjs-chapter-selector > button:hover,
.vjs-pbs div.vjs-playback-rate:hover,
.vjs-pbs button.vjs-pbs-cc-button:hover,
.vjs-pbs div.vjs-audio-button > button:hover,
.vjs-pbs div.vjs-quality-selector > button:hover {
  filter: brightness(100%);
}

.vjs-pbs button.vjs-control:focus,
.vjs-pbs button.vjs-big-play-button:focus,
.vjs-pbs div.vjs-playback-rate:focus,
.vjs-pbs div.vjs-playback-rate > button.vjs-playback-rate:focus,
.vjs-pbs button.vjs-pbs-cc-button:focus,
.vjs-pbs div.vjs-chapter-selector > button:focus,
.vjs-pbs div.vjs-audio-button > button:focus,
.vjs-pbs div.vjs-quality-selector > button:focus {
  filter: brightness(100%);
  outline: 3px solid var(--light-blue) !important;
}

.vjs-pbs .vjs-control {
  margin: 0 !important;
}

@media (max-width: 500px) {
  .vjs-pbs .vjs-control {
    width: 3em !important;
  }
}

/* Control Bar --------------------------- */

.vjs-pbs div.vjs-control-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 7em;
  background: linear-gradient(
    180deg,
    rgb(4 21 95 / 0%) 0%,
    var(--midnight) 100%
  );
  padding: 3em 1em 2em;
}

.vjs-pbs.vjs-ad-playing div.vjs-control-bar {
  z-index: -1;
}

@media (min-width: 375px) {
  .vjs-pbs div.vjs-control-bar {
    padding: 3em 2.5em 2em;
  }
}

@media (min-width: 500px) {
  .vjs-pbs div.vjs-control-bar {
    height: 9em;
    margin: 1em 0 0;
    padding: 4em 2.5em 3em;
  }
}

/* Show control bar on load (before hitting play) */
:not(.vjs-has-started) .vjs-control-bar {
  display: flex;
}

/* Popup Menus */

.vjs-pbs.lite-portal-player .vjs-menu li {
  font-family: system-ui !important;
}

:not(.vjs-pbs.lite-portal-player) .vjs-menu li {
  font-family: 'PBS Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.vjs-menu li.vjs-menu-title {
  font-size: 14px;
  text-align: left;
  line-height: 24px;
  padding-left: 0.3em;
  padding-bottom: 5px;
}

.vjs-menu li.vjs-menu-item {
  text-align: left;
  font-size: 12px;
  line-height: 18px;
  padding: 0.5em;
}

/* Selected element in the list */
.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus {
  background-color: transparent;
  color: var(--white);
  font-weight: 700;
}

.vjs-menu-button-popup .vjs-menu {
  height: 4.5em;
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background-color: var(--navy-blue);
  opacity: 0.9;
  bottom: 4.5em;
  padding: 0.75em;
  width: auto;
  max-height: 20em;
  min-width: 12em;
}

.vjs-menu-button-popup
  .vjs-menu
  .vjs-menu-content
  .vjs-menu-item
  .vjs-menu-item-text {
  font-size: 1.4em;
  text-transform: capitalize;
}

@media (min-width: 375px) {
  .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    padding: 1.3em;
  }
}

/* ------------------------------------------------------ */

/* Text Track Display Safe Area (captions) */

/* When player controls are shown, move the captions safe area up so it doesn't collide with the progress bar or controls. */
.vjs-pbs.vjs-user-active .vjs-text-track-display {
  bottom: 8em;
}

/* When player controls are hidden, move the captions safe area back to their default bottom of 3em. */
.vjs-pbs.vjs-user-inactive .vjs-text-track-display {
  bottom: 3em;
}

/* Progress Bar (Slider) --------------------------- */

/* Place the progress bar floating at the top of the control bar with icons placed underneath */
.vjs-pbs .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: 100% !important;
  height: 1em;
  top: 0.5em;
  transition: all 0.4s;
  border-radius: 1em;
  padding: 0 0.5em;
}

@media (min-width: 375px) {
  .vjs-pbs .vjs-progress-control {
    /* We set !important to override stock videojs settings that negatively affect trick play thumbnail positioning. */
    padding: 0 2em !important;
  }

  /* We want to remove the internal margin for the progress "line" inside of the progress container in order to best support trick play. */
  .video-js .vjs-progress-control .vjs-progress-holder {
    margin: 0 !important;
  }
}

/* Play / Pause Icon --------------------------- */

/* disable VideoJS play icon (control bar and big play centered */
.vjs-icon-play::before,
.video-js .vjs-play-control .vjs-icon-placeholder::before,
.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
  content: '';
}

/* disable VideoJS pause icon */
.vjs-icon-pause::before,
.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder::before {
  content: '';
}

/* disable VideoJS replay icon */
.vjs-icon-replay::before,
.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder::before {
  content: '';
}

.vjs-pbs .vjs-control-bar button.vjs-play-control,
button.vjs-big-play-button {
  background-image: url("309fe60227cca1f1a6e62e70ae95e2f1.cad1cf10fa95.svg");
  background-color: transparent !important;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  /* no transition so that when the icon switches from play to pause,
  we don't get an overlap of the two. */
  transition: none;
}

/* when video is playing, width is <375px, and user controls are
on screen, show the pause icon in the big centered spot. */
.vjs-pbs.vjs-playing.vjs-user-active .vjs-big-play-button {
  display: block;
  background-image: url("e41eafa1092cc31b57c23ef23bfca6a5.967cccef3d18.svg");
  pointer-events: none;
  transition: opacity 0.5s;
}

/* anytime the video is in a paused state, show the play icon in the big centered spot. */
.vjs-pbs.vjs-paused .vjs-big-play-button {
  display: block;
  pointer-events: all;
  transition: opacity 0.5s;
  background-image: url("309fe60227cca1f1a6e62e70ae95e2f1.cad1cf10fa95.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Big Play Centered button */
.vjs-pbs button.vjs-big-play-button {
  border: none !important;
  font-size: 2.5em;
  filter: brightness(90%);
}

/* at < 375px width, hide the play/pause in the controlbar. */
.vjs-pbs .vjs-control-bar button.vjs-play-control {
  display: none;
  align-self: center;
  height: 2.3em;
}

@media (min-width: 375px) {
  .vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
  }

  /* don't show the big paused on >375px players */
  .vjs-pbs.vjs-playing.vjs-user-active .vjs-big-play-button {
    display: none;
  }

  /* at >375px widths, show the controlbar play/pause control */
  .vjs-pbs .vjs-control-bar button.vjs-play-control {
    display: block;
  }
}

@media (min-width: 600px) {
  .vjs-pbs button.vjs-big-play-button {
    font-size: 4em;
  }
}

.video-js .vjs-big-play-button:focus,
.video-js .vjs-big-play-button:hover {
  filter: brightness(100%);
}

/* Replace big play centered with replay when ended */
.vjs-pbs.vjs-ended button.vjs-big-play-button,
.vjs-pbs.vjs-ended button.vjs-play-control {
  background-image: url("8f9be64f00cf489c59d4cb22c29427d4.bd919adc35f3.svg");
}

/* Replace with Pause icon when playing */
.vjs-pbs.vjs-playing button.vjs-play-control {
  background-image: url("e41eafa1092cc31b57c23ef23bfca6a5.967cccef3d18.svg");
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  border: 0;
}

/* Rewind 10 Seconds --------------------------- */
.vjs-pbs .vjs-control-bar button.vjs-pbs-back-10 {
  background-image: url("653e8bd4c900b7c8f849b6a599bf63d0.e6aacaf749eb.svg");
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  align-self: center;
  background-position: center;
  border: 0;
  cursor: pointer;
  height: 2.4em;
}

/* Volume panel  --------------------------- */

/* Disable VideoJS volume icons: High, Mid, Low, and Mute */
.vjs-icon-volume-high::before,
.video-js .vjs-mute-control .vjs-icon-placeholder::before,
.vjs-icon-volume-mid::before,
.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder::before,
.vjs-icon-volume-low::before,
.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder::before,
.vjs-icon-volume-mute::before,
.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder::before {
  content: '';
}

.vjs-pbs .vjs-control-bar .vjs-mute-control.vjs-vol-3,
.vjs-pbs .vjs-control-bar .vjs-mute-control.vjs-vol-2,
.vjs-pbs .vjs-control-bar .vjs-mute-control.vjs-vol-1,
.vjs-pbs .vjs-control-bar .vjs-mute-control.vjs-vol-0 {
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Muted */
.vjs-pbs .vjs-control-bar button.vjs-vol-0 {
  background-image: url("6b2ec490912f8fce04013b7dcfbd2b68.574ef5eae19e.svg");
}

/* Mid and Low */
.vjs-pbs .vjs-control-bar button.vjs-vol-2,
.vjs-pbs .vjs-control-bar button.vjs-vol-1 {
  background-image: url("0696a008b0ab57852dc6ac5d6ca1f1b0.257f3f41ecf9.svg");
}

/* High */
.vjs-pbs .vjs-control-bar button.vjs-vol-3 {
  background-image: url("098c41cdb4bb271bedb2afe780f9d6b8.1c29b1047c2d.svg");
}

/* Shared properties */
button.vjs-vol-3,
button.vjs-vol-2,
button.vjs-vol-1,
button.vjs-vol-0 {
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
}

/* Volume slider background */
.video-js .vjs-volume-vertical {
  background-color: var(--navy-blue);
  opacity: 0.9;
  z-index: 1;
}

.vjs-pbs div.vjs-volume-panel.vjs-volume-panel-vertical {
  height: 3em;
  align-self: center;
  padding-left: 0.5em;
}

@media (min-width: 500px) {
  .vjs-pbs div.vjs-volume-panel.vjs-volume-panel-vertical {
    padding-left: 0;
  }
}

/* Progress - Time --------------------------- */

.video-js .vjs-time-control {
  min-width: 1em;
}

.video-js .vjs-current-time {
  margin-right: 0;
  padding-right: 0;
}

.video-js .vjs-time-control.vjs-time-divider {
  padding: 0;
  width: 1em;
}

.video-js .vjs-duration {
  margin-left: 0;
  padding-left: 0;
  padding-right: 1em;
  width: 0.25em;
}

.video-js .vjs-time-control,
.video-js .vjs-current-time,
.video-js .vjs-time-divider,
.video-js .vjs-duration {
  display: inline-block;
  font-size: 1.4em;
  line-height: 1.4em;
  align-items: center;
  text-align: center;
}
@media (max-width: 300px) {
  .vjs-pbs .vjs-control-bar button.vjs-pbs-back-10 {
    width: 2.5em !important;
  }

  .vjs-pbs div.vjs-volume-panel.vjs-volume-panel-vertical {
    padding-left: 0;
  }

  .video-js .vjs-current-time {
    padding-left: 0;
    width: 2em !important;
  }

  .video-js .vjs-time-divider {
    width: 0.5em !important;
  }
}

@media (min-width: 375px) {
  .video-js .vjs-time-control {
    min-width: 2em;
  }

  .video-js .vjs-time-control .vjs-control {
    width: 2em;
  }

  .video-js .vjs-time-control.vjs-time-divider {
    width: 0.5em;
    min-width: 1.5em;
    padding: 0;
  }
}

.video-js .vjs-remaining-time {
  display: none;
}

/* Spacer --------------------------- */

.vjs-pbs div.vjs-spacer {
  flex-grow: 1;
}

/* Playback Rate --------------------------- */

/* We didn't use the provided icon from design but instead just changed the font for what is there. One less override. */
.vjs-playback-rate .vjs-playback-rate-value {
  font-size: 1.6em;
  line-height: 1.2em;
  font-weight: 700;

  /* positioning hack for the control bar */
  right: 0;
  width: 3.5em;
  left: unset;
}

.vjs-playback-rate button {
  right: 0;
  width: 45px;
  left: unset;
}

.vjs-playback-rate .vjs-menu-button {
  left: -2em;
}

.vjs-pbs div.vjs-playback-rate {
  display: none;
}

.vjs-pbs .vjs-playback-rate .vjs-menu {
  left: unset;
  right: 0;
  width: 8em;
}

.vjs-pbs .vjs-playback-rate .vjs-menu-content {
  max-height: 14em;
  width: 16em;
}

@media (min-width: 420px) {
  .vjs-pbs div.vjs-playback-rate {
    display: inline-flex;
  }

  .vjs-pbs div.vjs-playback-rate .vjs-playback-rate-value {
    padding-right: 0.5em;
  }
}

@media (min-width: 500px) {
  .vjs-pbs .vjs-playback-rate .vjs-menu-content {
    max-height: 20em;
    left: -4em;
  }

  .vjs-pbs div.vjs-playback-rate .vjs-playback-rate-value {
    padding-right: 1em;
  }
}

/* Closed Captions --------------------------- */

/* Disable the VideoJS icon */
.vjs-icon-captions::before,
.video-js .vjs-pbs-cc-button .vjs-icon-placeholder::before {
  content: '';
}

.vjs-pbs .vjs-control-bar button.vjs-pbs-cc-button {
  right: 6px;
  width: 40px;
  left: unset;
  background-image: url("864fafd5b3f49108f6b612b133539763.17d2eb858b49.svg");
  background-color: transparent;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  position: absolute;
}

.vjs-pbs .vjs-captions-off button.vjs-pbs-cc-button {
  background-image: url("08e3c252670c10c00da44704d7bf2255.a2b08b172a63.svg");
}

.vjs-pbs div.vjs-pbs-cc-button .vjs-menu {
  left: -9em;
  width: 15em;
}

.vjs-pbs div.vjs-pbs-cc-button .vjs-menu .vjs-menu-content {
  padding: 1em;
  bottom: 2em;
}

/* Closed Captions Settings Button */

.vjs-menu-button-popup
  .vjs-menu
  .vjs-menu-content
  .vjs-menu-item.vjs-pbs-cc-customize
  .vjs-menu-item-text {
  background-image: url("88dd6eb918c1daf7fb58f8532f7f15e9.1c7690bc9491.svg");
  background-color: transparent;
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  border: 0;
  padding-left: 2em;
}

@media (min-width: 375px) {
  .vjs-pbs button.vjs-pbs-cc-button {
    right: 3px;
    background-position: center !important;
  }

  .vjs-pbs div.vjs-pbs-cc-button .vjs-menu .vjs-menu-content {
    padding: 1.2em;
    bottom: 3.5em;
  }
}

@media (min-width: 500px) {
  .vjs-pbs button.vjs-pbs-cc-button {
    right: 6px;
  }

  .vjs-pbs div.vjs-pbs-cc-button .vjs-menu .vjs-menu-content {
    bottom: 4.5em;
  }

  .vjs-pbs div.vjs-pbs-cc-button .vjs-menu {
    left: -6em;
  }
}

.vjs-subtitles-button {
  display: none;
}

/* Chapters --------------------------- */
.video-js .vjs-control-bar div.vjs-chapter-selector > button {
  background-image: url("758a5fc2f96ad969d109d7355d995b3f.9ad6e4723592.svg");
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  right: 1em;
  left: unset;
  position: absolute;
}

.video-js .vjs-control-bar div.vjs-chapter-selector .vjs-menu {
  left: -3em;
}

.video-js
  .vjs-control-bar
  div.vjs-chapter-selector
  .vjs-menu
  .vjs-menu-content {
  width: max-content;
  min-width: 11em;
  max-width: 18em;
  max-height: 13em;
}

@media (min-width: 375px) {
  .video-js .vjs-control-bar div.vjs-chapter-selector > button {
    right: 18px;
  }
}

@media (min-width: 530px) {
  .video-js
    .vjs-control-bar
    div.vjs-chapter-selector
    .vjs-menu
    .vjs-menu-content {
    max-height: 20em;
  }
}

/* Playback Quality selector --------------------------- */

.video-js.vjs-hls-quality-selector {
  display: block;
}

.video-js .vjs-control-bar div.vjs-quality-selector > button {
  background-image: url("20840c8e21d524bceddeff0151990ed8.7994bd3c61ac.svg");
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
}

/* Disable HLS Quality Selector plugin's icon */
.vjs-icon-cog::before,
.vjs-icon-hd::before,
.video-js .vjs-icon-cog .vjs-icon-placeholder::before,
.video-js .vjs-icon-hd .vjs-icon-placeholder::before {
  content: '';
}

/* Quality popup menu placement */
.vjs-pbs .vjs-quality-selector .vjs-menu .vjs-menu-content {
  left: -5em;
  padding: 1.5em 6em 2em 1em;
  max-height: 15em;
}

@media (min-width: 500px) {
  .vjs-pbs .vjs-quality-selector .vjs-menu .vjs-menu-content {
    max-height: 22em;
  }
}

/* Fullscreen --------------------------- */

/* Disable VideoJS fullscreen icon */
.vjs-icon-fullscreen-enter::before,
.vjs-icon-fullscreen-exit::before,
.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder::before,
.video-js .vjs-fullscreen-control .vjs-icon-placeholder::before {
  content: '';
}

.vjs-pbs button.vjs-fullscreen-control.vjs-button {
  background-image: url("80d862d1f5bbe19d8ae01c40bcb2d10f.517b5bad2a73.svg");
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Switch to the exit icon when the player is in fullscreen */
.vjs-pbs.vjs-fullscreen button.vjs-fullscreen-control.vjs-button {
  background-image: url("2ab7d0dcfee8302c1dd5bd24ce95a8e8.f23527c91bc3.svg");
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* ------------------------------------------ */

/* Audio Track Selector */

.vjs-pbs div.vjs-audio-button .vjs-menu {
  left: -10em;
  top: -2em;
  width: 17em;
}

@media (min-width: 400px) {
  .vjs-pbs div.vjs-audio-button .vjs-menu {
    left: -8em;
    top: unset;
  }
}

/* ------------------------------------------ */

/* Picture-in-Picture */
.vjs-pbs .vjs-picture-in-picture-control {
  display: none;
}

.vjs-texttrack-settings {
  display: none;
  z-index: 1;
}

/* Ads overrides */

/* PLYR-424 this prevents a weird stuttering on preroll ads */
/* stylelint-disable-next-line */
#player-videojs_ima-ad-container {
  overflow: hidden;
}

/* Ad controls are much much smaller than our player controls. This bumps them up in size. */
.ima-controls-div.ima-controls-div-showing {
  height: 7em;
}

.ima-play-pause-div,
.ima-mute-div,
.ima-slider-div,
.ima-fullscreen-div {
  font-size: 2.5em;
}

/* ------------------------------------------ */

/* Micro Layout */

/* PLYR-662 this removes some elements from the control bar when player is viewed at super-tiny sizes. */
@media (max-width: 301px) {
  .micro-layout .vjs-pbs-back-10,
  .micro-layout .vjs-time-control,
  .micro-layout .vjs-time-divider,
  .micro-layout .vjs-chapter-selector,
  .micro-layout .vjs-quality-selector,
  .micro-layout .vjs-pbs-cc-button,
  .micro-layout .vjs-subs-caps-button,
  .micro-layout .vjs-audio-button,
  .micro-layout .vjs-text-track-display,
  .micro-layout .vjs-vtt-thumbnail-display {
    display: none;
  }
}

/* ------------------------------------------ */

/* Loading Indicator */

/* PLYR-628 We want to override the VideoJS loading spinner with our own. */
.vjs-loading-spinner {
  display: none !important;
}

/* also, make sure the play button isn't still in the way when loading is happening */
.vjs-waiting .vjs-big-play-button,
.vjs-seeking .vjs-big-play-button {
  display: none !important;
}

/* #player-videojs is the ID for all non-livestream players. the livestream player has its own loading behavior */
#player-videojs + .loading-indicator {
  display: none;
}

#player-videojs.vjs-waiting + .loading-indicator,
#player-videojs.vjs-seeking + .loading-indicator {
  display: flex;
  position: absolute;
  z-index: 1;
  inset: 0 0 0 0;
  pointer-events: none;
}

/* the dots should be white, per designers */
#player-videojs + .loading-indicator .loading-indicator__spinner div {
  background-color: var(--white);
}

/* Trick Play */
.video-js .vjs-vtt-thumbnails {
  display: block;
}

.vjs-vtt-thumbnail-display {
  /* For more responsive thumbnails, we adjust each thumbnail's scale dynamically from within the plugin using the videojs breakpoints applied to the Player. Simply changing the width and height here doesn't work well since the VTT file hardcodes the size of each thumbnail to be extracted from the sprite image. */
  width: 160px;
  height: 90px;
  position: absolute;
  inset: -100px 0;
  transition: transform 0.1s, opacity 0.2s;
  pointer-events: none;
}

/* Thumbnail gradient */
.vjs-vtt-thumbnail-display::after {
  content: '';
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Restrict the box shadow and thumbnail gradient to be allowed only when the progress bar is being hovered and not scrubbed. Otherwise, a phantom box shadow and thumbnail gradient will float above the progress bar without a thumbnail. */
.vjs-progress-control:hover .vjs-vtt-thumbnail-display::after {
  background: linear-gradient(
    180deg,
    rgb(4 21 95 / 0%) 60%,
    rgb(0 5 37 / 80%) 100%
  );
}

.vjs-progress-control:hover .vjs-vtt-thumbnail-display {
  box-shadow: 0 4px 35px 2px var(--onyx);
}

/* Hide the play progress time tooltip that appears over playback position. Using trick play thumbnail timestamp instead. */
.vjs-play-progress > .vjs-time-tooltip {
  display: none !important;
}

/* Timestamp inside the thumbnail preview */
:not(.lite-portal-player) .vjs-mouse-display .vjs-time-tooltip {
  background-color: transparent !important;
  font-family: 'PBS Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* We need to override the default videojs setting for tooltip font size. */
  font-size: 14px !important;
  line-height: 2.5;
  top: -2.5em;

  /* We override the VideoJS default padding for time tooltip so that we reduce the
  occurrence of a timestamp overflowing the player container from jittering back and forth.
  */
  padding: 0 !important;
}

@media (min-width: 500px) {
  .vjs-mouse-display .vjs-time-tooltip {
    font-size: 16px !important;
  }
}

/* Progress bar mouse hover state line */
.video-js .vjs-progress-control .vjs-mouse-display {
  background-color: var(--white);
  width: 2.5px;
  height: 13px;
  border-radius: 5px;
  bottom: -4px;
}

.wrapper {
  position: relative;
}

.wrapper--error {
  min-height: 100vh;
}

div.vjs-logo-content {
  opacity: 0.3;
  position: absolute;
  max-width: 11vw;
  margin: 6vw 10vw;
}

div.vjs-logo-content img {
  width: 100%;
}

/* Custom Skin for PBS Livestream Player */

/* PLYR-430 making control bar appear above logo */
.vjs-control-bar {
  z-index: 2;
}

/* Progress - Time --------------------------- */

.vjs-liveui .vjs-time-control,
.vjs-liveui .vjs-current-time,
.vjs-liveui .vjs-remaining-time,
.vjs-liveui .vjs-time-divider,
.vjs-liveui .vjs-duration {
  display: none;
}

/*  Live UI  */
.video-js .vjs-seek-to-live-control {
  line-height: 2em;
}

/* Closed Captions --------------------------- */

/* Disable the VideoJS icon */
.vjs-icon-captions::before,
.video-js
  .vjs-subs-caps-button
  + .vjs-menu
  .vjs-captions-menu-item
  .vjs-menu-item-text
  .vjs-icon-placeholder::before,
.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder::before,
.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder::before {
  content: '' !important;
}

.vjs-pbs div.vjs-subs-caps-button {
  flex-grow: 1;
  display: inline-flex !important;
}

.vjs-pbs button.vjs-subs-caps-button {
  right: 7px;
  width: 40px;
  left: unset;
  background-image: url("864fafd5b3f49108f6b612b133539763.17d2eb858b49.svg") !important;
  background-color: transparent !important;
  background-size: contain !important;
  background-position: right !important;
  background-repeat: no-repeat !important;
  position: absolute;
}

.vjs-pbs .vjs-captions-off button.vjs-subs-caps-button {
  background-image: url("08e3c252670c10c00da44704d7bf2255.a2b08b172a63.svg") !important;
}

.vjs-pbs div.vjs-subs-caps-button .vjs-menu {
  left: 1em;
  width: 14em;
}

/* Closed Captions Settings Button */
.vjs-liveui .vjs-pbs button.vjs-pbs-cc-settings {
  background-image: url("88dd6eb918c1daf7fb58f8532f7f15e9.1c7690bc9491.svg");
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 40px;
  display: none;
}

@media (min-width: 375px) {
  .vjs-pbs button.vjs-pbs-cc-settings {
    display: block;
  }

  .vjs-pbs button.vjs-subs-caps-button {
    right: 3px;
    background-position: center !important;
  }

  .vjs-pbs div.vjs-subs-caps-button {
    flex-grow: 0;
  }

  .vjs-pbs div.vjs-subs-caps-button .vjs-menu {
    left: -4em;
  }
}

/* Native Text Track Settings Modal - Hide it */

.vjs-texttrack-settings {
  display: none;
  z-index: 1;
}

/* Audio Button --------------------------- */

.vjs-pbs button.vjs-audio-button > .vjs-icon-placeholder::before {
  font-size: 2.2em;
  line-height: 1em;
}

.vjs-liveui .vjs-pbs div.vjs-audio-button .vjs-menu {
  left: -14em;
  width: 19em;
}

/* PLYR-624 for non-Safari web browsers, sometimes this pseudo element appears, but we want to hide it */
.hide-webkit-media-text-track-container::-webkit-media-text-track-container {
  display: none;
}

/* PLYR-634 this element had a weird 1.5% margin applied inline that was causing scrollbars */
.vjs-text-track-display-ttml {
  margin: 0 !important;
}

/* We hide all captions from displaying over the player in the micro layout (floating player).
We must override the inline CSS that is applied by our DRM plugin. */
@media (max-width: 301px) {
  .micro-layout .vjs-text-track-display-ttml,
  .micro-layout ::-webkit-media-text-track-container {
    display: none !important;
  }
}

/* For the live-player, there is a moment where we need to show a centered loading indicator that is different from when it appears inside of the Start Watching button. */

.livestream-loading-spinner {
  display: grid;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  grid-gap: 1fr;
  width: 100%;
  height: 100%;
  padding: 24px;
  background-color: var(--midnight);
  color: var(--white);
  text-align: center;
  justify-items: center;
  grid-template-rows: 1fr;
}

@media (min-width: 768px) {
  .livestream-loading-spinner {
    grid-template-rows: 4fr;
    padding: 24px;
  }
}

.location-request,
.livestream-rejected {
  display: grid;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  grid-gap: 1fr;
  width: 100%;
  height: 100%;
  padding: 24px;
  background-color: var(--midnight);
  color: var(--white);
  text-align: center;
  justify-items: center;
  grid-template-areas: 'message';
  grid-template-rows: 1fr;
}

@media (min-width: 768px) {
  .location-request {
    grid-template-areas:
      'message'
      'image';
    grid-template-rows: 3fr 1fr;
    padding: 24px 24px 0;
  }

  .livestream-rejected {
    grid-template-areas: 'message';
    grid-template-rows: 4fr;
    padding: 24px;
  }
}

.location-request__message {
  grid-area: message;
  align-self: center;
}

.location-request__message-header {
  display: inline-grid;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  margin-bottom: 12px;
}

.message-unavailable {
  width: 95%;
}

@media (min-width: 768px) {
  .message-unavailable {
    max-width: 480px; /* Taken from designs */
  }
}

@media (min-width: 768px) {
  .location-request__message-header {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 24px;
  }
}

/* ----------------------------------- */
.location-request__message-details,
.location-request__message-coverage {
  display: inline-grid;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 4px;
}

.location-request__message-details {
  width: 70%;
}

.location-request__message-coverage {
  width: 85%;
}

.location-request__message-action {
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .location-request__message-details,
  .location-request__message-coverage {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;
  }

  .location-request__message-details {
    width: 100%;
  }

  .location-request__message-coverage {
    width: 100%;
  }
}

/* ----------------------------------- */
.location-request__message-more-information a {
  color: var(--teal);
  font-weight: 700;
}

.location-request__message-more-information a:hover,
.location-request__message-more-information a:focus {
  text-decoration: underline;
}

.location-request__message-more-information {
  display: inline-grid;
  align-self: center;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 24px;
  width: 75%;
}

@media (min-width: 768px) {
  .location-request__message-more-information {
    width: 100%;
  }
}

/* ----------------------------------- */
.location-request__image {
  grid-area: image;
  align-self: end;
}

.location-request__image img {
  margin-bottom: -3px;
}

@media (max-width: 767px) {
  .location-request__image {
    display: none;
  }
}
@media (min-width: 768px) {
  .location-request__image img {
    height: 160px;
  }
}
@media (min-width: 1024px) {
  .location-request__image img {
    height: 100%;
  }
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

:root {
  /* Core Colors */
  --pbs-blue: #2638c4;
  --medium-blue: #0f1e8c;
  --navy-blue: #0a145a;
  --white: #fff;

  /* Brand Neutrals */
  --onyx: #040613;
  --midnight: #000525;
  --charcoal: #1e2030;
  --shadow: #363846;
  --blue-gray: #3d4a6b;
  --slate: #5c6e85;
  --pebble: #94a1b2;
  --fog: #eef0f5;
  --cloud: #f6f6fa;

  /* Other Neutrals */
  --shadow-black: rgb(0 0 0 / 80%);
  --shadow-gray: rgb(96 115 138 / 25%);

  /* Hues */
  --teal: #46d4cd;
  --yellow: #ffcf00;
  --light-blue: #486cd8;
  --light-blue-lighten-20: #6d89e0;
  --red: #d6383a;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background: var(--white);
  font-family: 'PBS Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a {
  color: var(--light-blue);
  text-decoration: none;
}

p {
  margin: 0 0 8px;
}

.l-page-wrap,
.l-player-wrap {
  position: relative;
}

.l-page-wrap {
  min-height: 100vh;
  background: var(--onyx);
}

.u-hidden {
  display: none !important;
}

/* ---------------------------------------------------------------------- */
.btn {
  border: transparent;
  padding: 8px 16px;
  margin-bottom: 0;
  margin-right: 8px;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 700;
}

.btn:focus,
.btn:active {
  outline: 3px solid var(--light-blue) !important;
}

@media (min-width: 400px) {
  .btn {
    margin-right: 16px;
  }
}

@media (min-width: 500px) {
  .btn {
    padding: 8px 32px;
  }
}

/* ------------------------------- */
.btn--fill--white,
.btn--fill--white:visited {
  border-color: var(--white);
  background-color: var(--white);
  color: var(--pbs-blue);
}

.btn--fill--white:hover {
  background: var(--pbs-blue);
  border-color: var(--pbs-blue);
  color: var(--white);
}

.btn--fill--white:active {
  background: var(--white);
}

/* ------------------------------- */
.btn--ghost--white,
.btn--ghost--white:visited {
  background-color: transparent;
  border: 2px solid var(--fog) !important;
  color: var(--fog);
}

.btn--ghost--white:hover {
  background-color: var(--fog) !important;
  border-color: var(--fog) !important;
  color: var(--pbs-blue);
}

.btn--ghost--white:active {
  background-color: var(--fog) !important;
  border-color: var(--fog) !important;
  color: var(--pbs-blue);
}

/* ------------------------------- */
.btn--fill--blue-digital,
.btn--fill--blue-digital:visited {
  border-color: var(--pbs-blue) !important;
  background: var(--pbs-blue) !important;
  color: var(--fog);
}

.btn--fill--blue-digital:focus,
.btn--fill--blue-digital:active {
  background-color: var(--pbs-blue) !important;
}

.btn--fill--blue-digital:hover {
  border-color: var(--light-blue) !important;
  background-color: var(--light-blue) !important;
  color: var(--fog);
}

/* ------ Loading Indicator --------- */
@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes bouncing {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

.loading-indicator {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .loading-indicator {
    animation: pulse 1s linear infinite;
  }
}

/* Based on a CodePen by Daniel Morosan https://codepen.io/danielmorosan/pen/XmYBVx */
.loading-indicator__spinner {
  width: 70px;
  text-align: center;
}

.loading-indicator__spinner div {
  display: inline-block;
  width: 18px;
  height: 18px;
  animation: bouncing 1.4s infinite ease-in-out both;
  border-radius: 100%;
  background-color: var(--pbs-blue);
}

.btn:hover .loading-indicator__spinner div {
  background-color: var(--white);
}

.loading-indicator__spinner .bounce1 {
  animation-delay: -0.32s;
}

.loading-indicator__spinner .bounce2 {
  animation-delay: -0.16s;
}

/* --------------------------------------------------------------- */


/*# sourceMappingURL=main_videojs.966e6a02c410144c724e.css.map*/