:root {
  --bs-primary: #1471b9;
  --bs-primary-rgb: 20, 113, 185;
  --bs-link-color: #1471b9;
  --sky: #1471b9;
  --sky-dark: #0d4f84;
  --sky-pale: #e8f2fa
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #13212c
}

.btn-primary {
  --bs-btn-bg: #1471b9;
  --bs-btn-border-color: #1471b9;
  --bs-btn-hover-bg: #0d4f84;
  --bs-btn-hover-border-color: #0d4f84;
  --bs-btn-active-bg: #0d4f84
}

.btn-outline-primary {
  --bs-btn-color: #1471b9;
  --bs-btn-border-color: #1471b9;
  --bs-btn-hover-bg: #1471b9
}

.navbar {
  background: var(--sky)
}

.navbar .nav-link {
  color: #fff;
  opacity: .9
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px
}

.navbar-brand {
  font-weight: 800;
  letter-spacing: -.02em
}

.navbar-brand span {
  background: #fff;
  color: var(--sky);
  border-radius: 6px;
  padding: 0 6px;
  margin-left: 6px;
  font-size: .8em
}

.hero {
  background: linear-gradient(160deg, var(--sky) 0%, var(--sky-dark) 100%);
  color: #fff;
  padding: 72px 0
}

.policy-content {
      background: white;
      padding: 35px;
      border-radius: 10px;
      box-shadow: 0 3px 15px rgba(0,0,0,.06);
    }

    .policy-content h2 {
      color: var(--mpm-blue);
      font-size: 1.35rem;
      margin-top: 30px;
      margin-bottom: 12px;
    }

    .policy-content a {
      color: var(--mpm-blue);
    }


  @media (max-width: 576px) {
      .policy-content {
        padding: 22px;
      }
    }

.hero h1 {
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: clamp(2.4rem, 6vw, 4.5rem)
}

.player-card {
  background: #fff;
  color: #13212c;
  border-radius: 20px;
  padding: 28px
}

.freq {
  font-size: 4rem;
  font-weight: 800;
  color: var(--sky);
  line-height: 1
}

.eq {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 48px
}

.eq i {
  flex: 1;
  background: var(--sky);
  border-radius: 3px;
  height: 10%
}

.playing .eq i {
  animation: eq 1s ease-in-out infinite alternate
}

.eq i:nth-child(3n) {
  animation-delay: -.3s
}

.eq i:nth-child(3n+1) {
  animation-delay: -.6s
}

.eq i:nth-child(4n) {
  animation-duration: .7s
}

@keyframes eq {
  to {
    height: 100%
  }
}

.round {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 1.4rem
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--sky-pale);
  color: var(--sky);
  font-weight: 800;
  font-size: 1.4rem;
  display: grid;
  place-items: center
}

.page-head {
  background: var(--sky-pale);
  padding: 48px 0
}

.page-head h1 {
  font-weight: 800;
  letter-spacing: -.02em
}

.nav-pills .nav-link {
  color: var(--sky)
}

.nav-pills .nav-link.active {
  background: var(--sky)
}

.slot time {
  font-weight: 800;
  color: var(--sky);
  font-size: 1.2rem
}

@media(prefers-reduced-motion:reduce) {
  .playing .eq i {
    animation: none;
    height: 60%
  }
}

.slot {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 16px;
  padding: 12px 14px;
  margin-bottom: 6px;
  border-left: 6px solid var(--k, #1471b9);
  background: #f7fafd
}

.slot time {
  font-weight: 800;
  color: #13212c
}

.k-music {
  --k: #1471b9
}

.k-conf {
  --k: #F39C1F
}

.k-prop {
  --k: #7B3FA8
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  background: var(--k)
}

@media(max-width:480px) {
  .slot {
    grid-template-columns: 1fr;
    gap: 2px
  }
}

.slot.live {
  background: #e1eefa;
  box-shadow: inset 0 0 0 2px #1471b9
}

.slot.live time::after {
  content: "On air now";
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: #1471b9
}

html {
  scroll-padding-top: 100px
}

.navbar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15)
}

:root {
  --sky-light: #3b8fd9
}

.mpm-foot {
  margin-top: 4rem;
  color: #fff;
  background: #111
}

.mpm-foot a {
  color: inherit;
  text-decoration: none
}

.mpm-foot a:hover {
  text-decoration: underline
}

.mpm-left {
  background: var(--sky);
  padding: 48px 40px
}

.mpm-right {
  background: #111;
  padding: 48px 48px 0
}

.mpm-left p {
  font-size: 1.05rem;
  line-height: 1.9
}

.mpm-foot ul li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px
}

.mpm-foot ul li svg {
  flex: none;
  margin-top: 6px
}

.soc {
  display: flex;
  gap: 12px;
  margin-top: 24px
}

.soc a {
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff
}

.soc svg {
  width: 18px;
  height: 18px;
  fill: currentColor
}

.sub {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid #333
}

.sub h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  max-width: 260px
}

.subform {
  flex: 1;
  display: flex;
  gap: 16px;
  min-width: 260px
}

.subform input[type=email] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 2px solid #444;
  border-radius: 40px;
  padding: 14px 22px;
  color: #fff
}

.subform input::placeholder {
  color: #ccc
}

.subform button {
  background: var(--sky);
  color: #fff;
  border: 0;
  border-radius: 40px;
  padding: 14px 28px;
  font-weight: 700;
  white-space: nowrap
}

.fh {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  border-bottom: 2px solid var(--sky-light);
  padding: 0 28px 8px 0;
  margin-bottom: 24px;
  font-size: 1.5rem;
  font-weight: 700
}

.fl li {
  padding: 6px 0;
  margin: 0;
  align-items: center
}

.fl svg {
  width: 10px;
  height: 14px;
  margin: 0;
  color: #fff
}

.store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px solid #333;
  border-radius: 50px;
  padding: 14px 20px;
  line-height: 1.1
}

.store small {
  display: block;
  font-size: 1rem;
  color: #ddd
}

.store b {
  font-size: 1.35rem
}

.copy {
  border-top: 1px solid #333;
  margin-top: 48px;
  padding: 24px 0;
  color: #ddd
}

.totop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sky);
  display: grid;
  place-items: center;
  z-index: 1030;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

@media(max-width:991px) {
  .mpm-left {
    padding: 36px 24px
  }

  .mpm-right {
    padding: 36px 24px 0
  }
}

.navbar-brand img {
  height: 72px;
  border-radius: 0 !important
}

.navbar-brand {
  padding: 0
}

@media(max-width:575px) {
  .navbar-brand img {
    height: 56px
  }
}

.navbar {
  padding-top: 0;
  padding-bottom: 0
}

.navbar>.container {
  align-items: stretch
}

.navbar-brand {
  display: flex;
  margin-right: 1rem
}

.navbar-collapse {
  align-items: center
}

.navbar-toggler {
  align-self: center
}

@media(max-width:1199px) {

  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    padding-bottom: .75rem
  }
}

.mpm-foot {
  overflow: hidden
}

.mpm-left {
  background: none;
  position: relative;
  z-index: 0;
  padding: 36px 0
}

.mpm-left::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  background: var(--sky);
  z-index: -1
}

.mpm-right {
  padding: 36px 0 0
}

@media(min-width:992px) {
  .mpm-left {
    padding: 48px 40px 48px 0
  }

  .mpm-left::before {
    right: 0
  }

  .mpm-right {
    padding: 48px 0 0 48px
  }
}

.hero {
  margin-top: 2.5rem
}

.slot time {
  white-space: nowrap
}

.contact-panel {
  background: var(--sky);
  color: #fff;
  border-radius: 18px;
  padding: 48px 40px
}

.contact-panel h1 {
  font-size: 2.4rem;
  font-weight: 700
}

.contact-panel p {
  line-height: 1.8
}

.crow {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 32px
}

.crow b {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 4px
}

.crow a {
  color: #fff;
  text-decoration: none
}

.ci {
  width: 64px;
  height: 64px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none
}

.talk h2 {
  font-size: 2.4rem;
  font-weight: 700
}

.talk .form-control {
  border-radius: 4px;
  padding: 1rem 1.25rem
}

.cta {
  background: var(--sky-pale);
  border-radius: 18px;
  padding: 28px 32px
}

.qn {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--sky);
  color: #fff;
  font-size: .8rem;
  margin-right: .5rem
}

.award {
  margin-top: 3rem;
  overflow: hidden
}

.award-text {
  padding: 40px
}

.award-pill {
  display: inline-block;
  align-self: flex-start;
  background: var(--sky);
  color: #fff;
  border-radius: 36px;
  padding: 26px 36px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 36px;
  max-width: 360px
}

.award-name {
  font-size: 1.2rem;
  letter-spacing: .1em;
  color: #555;
  font-weight: 600;
  margin: 0 0 .5rem
}

.award-quote {
  color: #666;
  font-size: 1.2rem;
  margin: 0
}

.onair-pic {
  width: 150px;
  height: 165px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sky-pale);
  display: grid;
  place-items: center
}

.onair-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.onair-pic.ph {
  background: var(--sky);
  color: #fff;
  font-weight: 800;
  font-size: 2.2rem;
  text-align: center;
  padding: 8px
}

.onair-pic.ph.sm {
  font-size: 1.2rem
}

@media(max-width:480px) {
  .onair-pic {
    width: 110px;
    height: 121px
  }
}

.evbox {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid #dde6ee;
  border-radius: 6px;
  padding: 16px 20px;
  height: 100%
}

.evbox b {
  min-width: 6.5rem
}

.evbox span {
  color: #777;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere
}

.evbox a {
  color: var(--sky);
  text-decoration: none
}

.mpm-left img {
  height: 56px;
  width: auto;
}

@media (max-width: 575px) {
  .mpm-left img {
    height: 40px;
  }
}