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

.player-overlay--show-controls {
  bottom: 2.5rem;
}

@media (min-width: 1280px) {
  .player-overlay--show-controls {
    bottom: 5.5rem;
  }
}

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

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

.passport__overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 12px 24px;
  color: #fff;
  background: rgba(10, 20, 90, 0.9);
  mix-blend-mode: normal;
}

@media (min-width: 500px) {
  .passport__overlay {
    padding: 24px;
  }
}

@media (min-width: 768px) {
  .passport__overlay {
    padding: 32px;
  }
}

@media (min-width: 1024px) {
  .passport__overlay {
    padding: 48px;
  }
}

/* ------------------------------- */
.passport__header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  color: #fff;
  font-size: 18px;
  line-height: 36px;
  vertical-align: middle;
  margin-bottom: 2px;
}

@media (min-width: 400px) {
  .passport__header {
    font-size: 24px;
  }
}

@media (min-width: 500px) {
  .passport__header {
    font-size: 36px;
    margin-bottom: 8px;
  }
}

@media (min-width: 1024px) {
  .passport__header {
    font-size: 45px;
    margin-bottom: 16px;
  }
}

/* ------------------------------- */
.passport__logo {
  width: 22px;
  height: 22px;
}

@media (min-width: 400px) {
  .passport__logo {
    width: 26px;
    height: 26px;
  }
}

@media (min-width: 500px) {
  .passport__logo {
    width: 38px;
    height: 38px;
  }
}

@media (min-width: 1024px) {
  .passport__logo {
    width: 45px;
    height: 45px;
  }
}

.passport__station {
  margin-left: 8px;
  font-weight: bold;
}

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

.passport__title {
  margin-left: 8px;
  padding-left: 8px;
  border-left: solid 1px #eef0f5;
  line-height: 20px;
}

@media (min-width: 400px) {
  .passport__title {
    line-height: 30px;
  }
}

@media (min-width: 500px) {
  .passport__title {
    margin-left: 16px;
    padding-left: 16px;
    line-height: 37px;
  }
}

@media (min-width: 1024px) {
  .passport__title {
    line-height: 42px;
  }
}

/* ------------------------------- */
.passport__subtitle {
  margin: 8px 0 16px 0;
  font-size: 14px;
  font-weight: bold;
}

@media (min-width: 400px) {
  .passport__subtitle {
    font-size: 16px;
    margin: 8px 0 32px 0;
  }
}

@media (min-width: 500px) {
  .passport__subtitle {
    margin-top: 16px;
    font-size: 20px;
  }
}

@media (min-width: 600px) {
  .passport__subtitle {
    margin: 24px 0;
    font-size: 22px;
  }
}

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

@media (min-width: 600px) {
  .passport__description-container {
    display: block;
    margin-bottom: 28px;
    font-size: 16px;
    width: 100%;
    line-height: 24px;
  }
}

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

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

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

/* ------------------------------- */
.passport__actions {
  margin-top: 2px;
  font-size: 14px;
}

@media (min-width: 400px) {
  .passport__actions {
    font-size: 16px;
  }
}

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

@media (min-width: 1024px) {
  .passport__actions {
    margin: 16px 0;
  }
}

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

@media (min-width: 768px) {
  .passport__check-membership-section {
    display: block;
    margin-top: 8px;
    font-size: 16px;
  }

  .passport__already-member {
    margin: 16px 0 8px 0;
  }

  .passport__check-link {
    padding-left: 10px;
    text-decoration: none;
    font-weight: bold;
    color: #486cd8;
  }
}

@media (min-width: 1024px) {
  .passport__check-membership-section {
    font-size: 22px;
  }

  .passport__already-member {
    font-size: 16px;
  }
}

/* ------------------------------- */
.passport__support {
  position: absolute;
  bottom: 6%;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #486cd8;
}

@media (min-width: 1024px) {
  .passport__support {
    font-size: 18px;
  }
}

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

.color-picker__color {
  min-width: 25px;
  min-height: 25px;
  margin: 5px;
  border: 1px solid #fff;
}

.color-picker__color--active {
  outline: 3px solid #2638c4;
}

@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;
  font-weight: normal;
}

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

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

.slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.slider-value {
  min-width: 45px;
  margin-left: 10px;
  text-align: right;
}

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

.cc-settings__modal {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: #2e2e2e;
  color: #e0e0e0;
  border: 1px solid #4b4b4b;
  z-index: 1;
}

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

.jw-button-container div[button="closed-captions"] {
  width: 20px;
  margin-left: 12px;
  margin-right: 12px;
}

@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: rgba(0, 0, 0, 0.8);
    z-index: 10;
  }

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

.cc-settings__modal-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  background-color: #646464;
}

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

.cc-settings__title {
  margin: 0;
  padding: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  text-transform: uppercase;
}

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

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

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

.cc-settings__close img {
  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 #4b4b4b;
}

@media (min-width: 600px) {
  .cc-settings__options {
    flex-direction: row;
    flex-wrap: 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-direction: row;
    flex-wrap: 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 auto;
}

@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 #4b4b4b;
  background: #2e2e2e;
}

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

.cc-settings__button {
  float: right;
  margin-left: 8px;
  padding: 8px 20px;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

@media (min-width: 600px) {
  .cc-settings__button {
    margin-left: 16px;
    padding: 10px 30px;
    font-size: 16px;
  }
}

.cc-settings__reset-button {
  background-color: #86898e;
}

.cc-settings__save-button {
  background-color: #2638c4;
}

/* below 420px width, jwplayer's control bar is
taller, and we don't want our info overlay
to cover up parts of the control bar OR the play button.
These styles are designed to accommodate a minimum width
of 320px. */

.info-overlay {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 20px 10px;
  color: #fff;
  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: #fff;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

@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 rgba(0, 0, 0, 0.8);
}

@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: #fff;
  font-size: 12px;
  pointer-events: none;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

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

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

/* this is an override for JW Player that seems to only
matter when the info overlay is present. For
some reason, IE11 doesn't display the control bar on load,
resulting in the info overlay being a random strip in
the lower section of the video. This forces the control bar
to appear. */
.jw-controlbar {
  display: table !important;
}

.info-screen {
  padding: 20px;
  background: #2c2c2c;
  color: #fff;
}

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

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

.info-screen__close {
  padding: 0;
  color: #2b92ff;
  background-color: transparent;
  border: 0;
  font-family: "PBS Sans";
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

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

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

.info-screen__show-title a {
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  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;
}

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

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

@media (min-width: 500px) {
  .info-screen__description {
    font-size: 14px;
    line-height: 21px;
  }
}

.info-screen__meta {
  display: flex;
  align-items: center;
  color: #b3b3b3;
  font-size: 9px;
  font-weight: bold;
}

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

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

.info-screen__premiere {
  border-right: 1px solid #b3b3b3;
  padding-right: 10px;
}

.info-screen__cc-issue a {
  color: #2b92ff;
}

.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: #2c2c2c;
  color: #fff;
}

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

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

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

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

.embed-screen__close {
  padding: 0;
  color: #2b92ff;
  background-color: transparent;
  border: 0;
  font-family: "PBS Sans";
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

@media (min-width: 500px) {
  .embed-screen__close {
    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;
    font-size: 14px;
  }
}

.embed-screen__duration {
  color: #9e9e9e;
}

.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-top: 15px;
    font-size: 12px;
  }
}

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

.embed-screen__options input {
  background: #4a4b4b;
  color: #ccc;
  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: 35px;
  margin-left: 5px;
}

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

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

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

@media (min-width: 500px) {
  .embed-screen__iframe input {
    width: 295px;
  }
}

.embed-screen__iframe span {
  position: absolute;
  right: 0;
  top: 28px;
  color: #9e9e9e;
  font-size: 8px;
}

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

.share-screen {
  height: 100%;
  padding: 20px;
  background: #2c2c2c;
  color: #fff;
}

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

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

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

.share-screen__close {
  padding: 0;
  color: #2b92ff;
  background-color: transparent;
  border: 0;
  font-family: "PBS Sans";
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

@media (min-width: 500px) {
  .share-screen__close {
    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;
    margin: 0 20px;
  }
}

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

.share-screen__button__label {
  color: #e0e0e0;
  font-size: 10px;
  font-family: "PBS Sans";
}

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

.share-screen__button:hover > .share-screen__button__label {
  display: block;
  color: #fff;
}

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

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

.share-screen__icon path {
  fill: #e0e0e0;
}

.share-screen__button:hover > .share-screen__icon path {
  fill: #fff;
}

.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: 250px;
  }
}

.share-screen__direct-link-field input {
  height: 22px;
  width: 100%;
  padding: 0 5px;
  font-size: 10px;
  background: #4a4b4b;
  color: #ccc;
  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: #9e9e9e;
  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: #2c2c2c;
  color: #fff;
}

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

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

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

.shop-screen__close {
  padding: 0;
  color: #2b92ff;
  background-color: transparent;
  border: 0;
  font-family: "PBS Sans";
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

@media (min-width: 500px) {
  .shop-screen__close {
    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 0;
  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: #fff;
  padding: 8px 16px;
  margin-right: 10px;
  font-size: 12px;
  text-transform: uppercase;
  background: #2638c4;
}

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

.topbar-screen {
  background: #2c2c2c;
  width: 100%;
}

.player-donate {
  height: 100%;
  color: white;
  background-color: #fff;
  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: #2638c4;
  }
}

.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: #666;
}
@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 #666;
  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: #666;
  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: #ac031f;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  border: 1px solid #ac031f;
  border-radius: 4px;
  font-weight: 600;
  -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: #2c2c2c;
  color: 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: #fff;
}

.player-related__show-title {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: bold;
  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 #2638c4 !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;
}

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

.upnext-close-icon {
  color: #eee;
  font-size: 20px;
  line-height: 1;
}

.upnext-content {
  background: #000;
  background: rgba(0, 0, 0, 0.6);
  color: #eee;
  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: 768px) {
  .upnext-main {
    max-width: 70%;
  }
}

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

.upnext-countdown-seconds {
  color: #2b92ff;
  font-weight: bold;
}

.upnext-show-title {
  font-size: 11px;
  font-weight: bold;
  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: 768px) {
  .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: #111;
}

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

.topbar__logo h1 {
  margin: 0;
}

.topbar__logo a {
  padding: 0 5px;
}

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

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

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

.topbar__screen-button:focus {
  outline: 3px solid #2b92ff !important; /* TODO temporary override until the rebrand */
}

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

.topbar__icon > path {
  fill: #f8f8f8;
}

.topbar__icon.selected > path {
  fill: #2b92ff;
}

.topbar__screen-button:hover > .topbar__icon > path {
  fill: #2b92ff;
}

.player-error {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  text-align: center;
  color: #fff;
  background: #000;
}

.player-error__wrapper {
  width: 100%;
}

.wrapper {
  position: relative;
}

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

/* control bar play button disappears from view by default at widths below 420px */
/* we want to override JW Player's styles in order to prevent this from happening */
@media (max-width: 419px) {
  .jw-button-container.jw-reset {
    padding: 0;
  }
  /* JW Player has a million class specificity rules pointing toward the playback */
  /* button and setting it to display: none. We need !important to override that. */
  .jw-icon-playback {
    display: flex !important;
  }
  .jw-icon.jw-icon-inline.jw-text-countdown {
    display: flex;
  }
  .jw-icon.jw-icon-inline.jw-text-duration,
  .jw-icon.jw-icon-inline.jw-text-elapsed {
    display: none;
  }
}

/* focus control highlight */
/* we need the !important because jwplayer sets outline: none in their styles */
/* needed to add styling for just the volume slider too */
button:focus,
div[role="button"]:focus,
div[role="slider"].jw-icon-volume:focus {
  outline: 3px solid #2638c4 !important;
}

/* adding a bit of padding around the big play icon so that it appears visually centered on focus */
.jw-display-icon-display .jw-icon-display {
  padding-right: 8px;
}

/* we don't want the padding or outline once playback is initiated */
.jw-state-buffering .jw-display-icon-display .jw-icon-display {
  padding-right: 0;
  outline: none !important;
}

/* override default jwplayer cc button colors */
.jw-controls .jw-controlbar .jw-toggle {
  color: #2638c4;
}

.jw-controls .jw-controlbar .jw-toggle.jw-off {
  color: #fff;
}

/* to make it more clear when cc settings are changed */
.jw-settings-submenu .jw-settings-item-active:after {
  content: " (Selected)";
}

.jw-settings-submenu .jw-settings-content-item:focus {
  outline-style: dashed !important;
  outline-width: 2px !important;
}

.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: #000525;
  color: #fff;
  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 24px;
  }

  .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: bold;
  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: #48d3cd;
  font-weight: 600;
}

.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%;
  }
}

.wrapper {
  position: relative;
}

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

.jw-logo {
  opacity: 0.3;
}
/* TODO migrate/copy over anything else that might apply to live player */

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

html {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "PBS Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
  color: #3eafe6;
  text-decoration: none;
}

p {
  margin: 0 0 8px 0;
}

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

.l-page-wrap {
  min-height: 100vh;
  background: #222;
}

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

/* ---------------------------------------------------------------------- */
.btn {
  border: transparent;
  padding: 8px 16px;
  margin-bottom: 0;
  margin-right: 8px;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease-in, border-color 0.3s ease-in,
    color 0.3s ease-in, transform 0.3s ease-in;
}

.btn:active {
  transform: scale(0.9);
}

@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: #fff;
  background-color: #fff;
  color: #2638c4;
}

.btn--fill--white:hover {
  background: #2638c4;
  border-color: #2638c4;
  color: #fff;
}

.btn--fill--white:focus {
  outline: 3px solid #2638c4;
}

.btn--fill--white:active {
  background: #fff;
}

/* ------------------------------- */
.btn--ghost--white,
.btn--ghost--white:visited {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #fff;
}

.btn--ghost--white:hover {
  background-color: #fff;
  border-color: #fff;
  color: #2638c4;
}

.btn--ghost--white:focus {
  outline: 3px solid #2638c4;
}

/* ------------------------------- */
.btn--fill--blue-digital,
.btn--fill--blue-digital:visited {
  border-color: #2638c4;
  background: #2638c4;
  color: #fff;
}

.btn--fill--blue-digital:hover,
.btn--fill--blue-digital:focus {
  border-color: #1e2d9d;
  background: #1e2d9d;
  color: #fff;
}

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

@font-face {
  font-family: "PBS Sans";
  font-weight: 300;
  /* stylelint-disable */
  src: url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Light.woff2")
      format("woff2"),
    url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Light.woff")
      format("woff");
  /* stylelint-enable */
  font-display: swap;
}

@font-face {
  font-family: "PBS Sans";
  font-weight: 400;
  /* stylelint-disable */
  src: url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans.woff2") format("woff2"),
    url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans.woff") format("woff");
  /* stylelint-enable */
  font-display: swap;
}

@font-face {
  font-family: "PBS Sans";
  font-weight: 500;
  /* stylelint-disable */
  src: url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Medium.woff2")
      format("woff2"),
    url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Medium.woff")
      format("woff");
  /* stylelint-enable */
  font-display: swap;
}

@font-face {
  font-family: "PBS Sans";
  font-weight: 700;
  /* stylelint-disable */
  src: url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Bold.woff2")
      format("woff2"),
    url("https://www-tc.pbs.org/pbsfonts/v1.2/PBSSans-Bold.woff") format("woff");
  /* stylelint-enable */
  font-display: swap;
}

/* ------ 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: #2638c4;
}

.btn:hover .loading-indicator__spinner div {
  background-color: #fff;
}

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

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

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


/*# sourceMappingURL=main.184335ff49635dd0590a.css.map*/