/* Site-wide styles. Each component section is nested under its own class so
   class names like .wrapper or .title can be reused without leaking between components. */

@font-face {
  font-family: "typewriter";
  src: local("typewriter"), url(/assets/fonts/American_Typewriter_Regular/American_Typewriter_Regular.woff2) format("woff2");
}

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

/* Responsive visibility helpers. Breakpoints: xs < 600px <= sm < 960px <= md < 1280px <= lg < 1920px */
@media (max-width: 599.98px) {
  .hide-xs { display: none !important; }
}
@media (min-width: 600px) {
  .hide-gt-xs { display: none !important; }
}
@media (min-width: 600px) and (max-width: 959.98px) {
  .hide-sm { display: none !important; }
}
@media (max-width: 959.98px) {
  .hide-lt-md { display: none !important; }
}
@media (min-width: 960px) {
  .hide-gt-sm { display: none !important; }
}
@media (min-width: 960px) and (max-width: 1279.98px) {
  .hide-md { display: none !important; }
}
@media (min-width: 1280px) and (max-width: 1919.98px) {
  .hide-lg { display: none !important; }
}

/* Keep the hidden attribute working on elements that set their own display */
[hidden] {
  display: none !important;
}

a.card-holder, a.li-container, a.mainpanel, .site-header a.wrapper {
  color: inherit;
  text-decoration: none;
}

/* Typography previously applied by Angular Material (mat-typography) */
.typography { font: 400 14px/20px Roboto, sans-serif; letter-spacing: .0178571429em; }
.typography h1 { font: 400 24px/32px Roboto, sans-serif; letter-spacing: normal; margin: 0 0 16px; }
.typography h2 { font: 500 20px/32px Roboto, sans-serif; letter-spacing: .0125em; margin: 0 0 16px; }
.typography h3 { font: 400 16px/28px Roboto, sans-serif; letter-spacing: .009375em; margin: 0 0 16px; }
.typography h4 { font: 400 16px/24px Roboto, sans-serif; letter-spacing: .03125em; margin: 0 0 16px; }
.typography p { margin: 0 0 12px; }

/* Headings that keep the look of the element they replaced, so pages can have proper
   <h1>s without visual changes. Component rules later in this file still apply on top. */
.typography .as-div { margin: 0; font: inherit; letter-spacing: inherit; }
.typography .as-p { margin: 0 0 12px; font: inherit; letter-spacing: inherit; }
.typography .as-h1 { font: 400 24px/32px Roboto, sans-serif; letter-spacing: normal; margin: 0 0 16px; }
.typography .as-h2 { font: 500 20px/32px Roboto, sans-serif; letter-spacing: .0125em; margin: 0 0 16px; }

/* Readable by search engines and screen readers, but not shown */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Raised buttons, replacing Angular Material mat-raised-button */
.raised-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  color: white;
  font: 500 14px/36px Roboto, sans-serif;
  letter-spacing: .0892857143em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
}
.raised-button:hover { box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12); }
.raised-button.primary { background-color: #3f51b5; }
.raised-button.accent { background-color: #ff4081; }

@keyframes pulse-black {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(232, 235, 240);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(232, 235, 240);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(232, 235, 240);
  }
}

/* ---------- Header ---------- */
.site-header {
  .small-logo {
    height: 25%;
    display:block;
    margin:auto;
  }

  .donate {
    height: 25%;
    display:block;
    margin:auto;
  }

  .wrapper {
    background-color: black;
    padding-bottom: 1px;
    border-bottom: #41a2d8 5px solid;
    width: 100%;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
  }

  /* Each item is a flex child capped at a percentage of the header width */
  .spacer-start,
  .small-logo,
  .spacer-logo,
  .donate,
  .spacer-mid,
  .lettering,
  .spacer-end {
    flex: 1 1 100%;
    box-sizing: border-box;
  }

  .spacer-start { flex-basis: 0%; }
  .small-logo { max-width: 7%; }
  .spacer-logo { max-width: 2.5%; }
  .donate { max-width: 4.5%; }
  .spacer-mid { max-width: 25%; }
  .lettering { max-width: 37%; }
  .spacer-end { max-width: 39%; }

  @media (min-width: 600px) and (max-width: 959.98px) {
    .small-logo { max-width: 12%; }
    .spacer-logo { max-width: 1.5%; }
    .donate { max-width: 8%; }
    .spacer-mid { max-width: 6%; }
    .lettering { max-width: 65%; }
    .spacer-end { max-width: 27.5%; }
  }

  @media (max-width: 599.98px) {
    .small-logo { max-width: 17%; }
    .spacer-logo { flex-basis: 0%; max-width: none; }
    .donate { max-width: 3%; }
    .spacer-mid { max-width: 9%; }
    .lettering { max-width: 70%; }
    .spacer-end { max-width: 9%; }
  }

  .lettering {
    display:block;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 12.5%;
    margin-left: auto;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  .wrapper {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    border-top: #41a2d8 5px solid;
    background-color: black;
    margin-top: 100px;
  }

  .wrapper div {
    align-self: flex-end;
  }

  .logo-div {
    display: inline-block;
  }

  .large-logo {
    width: 220px;
  }

  .footer-links a {
    color: #41a2d8;
    font-family: "Roboto Condensed", sans-serif;
    text-decoration: none;
    font-size: 30px;
    line-height: 3.25rem;
  }

  .newsletter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }

  .newsletter img {
    cursor: pointer;
    border-radius: 150px;
    width: 150px;
  }

  .copyright-div {
    margin-left: auto;
    margin-right: 15px;
    width: 22%;
  }

  .copyright {
    color: white;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 17px;
  }

  .copyright a {
    text-decoration: none;
    color: #41a2d8;
  }

  @media (max-width: 959.98px) {
    .wrapper {
      flex-direction: column;
      margin-top: 40px;
    }

    .footer-links a {
      font-size: 18px;
      line-height: 2.25rem;
    }

    .links-div {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      align-content: center;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 10px;
    }

    .copyright-div {
      width: 85%;
    }
  }
}

/* ---------- Donation bar ---------- */
.donation-bar-spacer { height: 67px; }

.donation-bar {
  --slot-height: 48px;

  .fade {
    transition: opacity 200ms ease-in, transform 200ms ease-in;
  }

  .fade.faded {
    opacity: 0;
    transform: translateY(6px);
  }

  /* ---------- Wrapper ---------- */
  .wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 67px;
    background-color: #41a2d8;
    display: flex;
    align-items: center;
    z-index: 1000;
  }

  .close {
    position: absolute;
    left: 8vw;
    cursor: pointer;
    transform: scale(1.7) translateY(-2px);
    color: white;
    /* Same 24px box the Material Icons glyph used */
    width: 24px;
    font: 300 34px/24px Roboto, sans-serif;
    text-align: center;
  }

  /* ---------- Layout ---------- */
  .content {
    flex: 1;
    margin: 0 14vw;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* ---------- Progress ---------- */
  .progress-shell {
    position: relative;
    flex: 1;
    height: var(--slot-height);
    background-color: #2c7cb3;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background-color: #1f5f8a;
    width: 0%;
    transition: width 1.2s ease-out;
  }

  .progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
  }

  /* ---------- Donate ---------- */
  .appeal {
    height: var(--slot-height);
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ---------- Goal ---------- */
  .goal {
    color: white;
    font-size: 20px;
    white-space: nowrap;
    display: flex;
    align-items: center;
  }

  /* ---------- Desktop ---------- */
  @media (min-width: 960px) {
    .mobile { display: none; }
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 959.98px) {
    .desktop { display: none; }

    .content {
      margin: 0 10vw;
      gap: 12px;
    }

    .progress-label,
    .goal {
      font-size: 18px;
    }

    .appeal {
      font-size: 22px;
    }
  }
}

/* ---------- Home ---------- */
.home {
  @media only screen and (max-width: 959.98px) {
    .child {
    margin-left: 2.5%;
    margin-right: 2.5%;
    }
  }

  @media only screen and (max-width: 359px) {
    .child {
    margin-left: 0px;
    margin-right: 0px;
    }
  }

  .spacer {
    width: 2.5vw;
  }

  .parent {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  @media (min-width: 960px) {
    .parent {
      flex-direction: row;
      justify-content: center;
    }

    .parent > :not(:last-child) {
      margin-right: 25px;
    }
  }
}

.mainpanel {
  display: block;

  .top-text {
    font-family: "Roboto Condensed", sans-serif;
    line-height: 1.4em;
    font-size: 1.3rem;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 0.07em;
    color: #888888;
    padding-top: 50px;
    padding-bottom: 20px;
    text-align: left;
  }


  .image-div {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: 100px;
  }

  /* .image:hover{
    filter: brightness(50%);
  } */

  .panel:hover .dim-on-hover {
    filter: brightness(50%);
  }

  .play {
    position: absolute;
    width: 150px;
    height: 150px;
    /* top: 50%;
    margin-right: auto;
    margin-left: auto; */
  }



  @media (max-width: 959.98px) {
    .image-div {
      height: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      padding-bottom: 30px;
    }

    .image {
      background-image: url("/assets/paper.webp");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 99%;
      /* background-size: contain; */
      height: 100%;
      width: 100%;
      /* overflow: auto; */
      max-width: 100%;
    }
  }

  @media (min-width: 960px) {
    .image-div {
      height: 651px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      padding-bottom: 30px;
    }

    .image {
      background-image: url("/assets/paper.webp");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 621px;
      /* background-size: contain; */
      height: 100%;
      width: 100%;
      /* overflow: auto; */
      max-width: 100%;
    }

    .panel {
      width: 621px;
    }
  }
}

.sidepanel {
  img {
    display: block;
    width: 140px;
  }

  .img-container {
    /* max-width: 31.5%; */
  }

  .li-container {
    display: flex;
    padding-top: 7px;
    padding-bottom: 7px;
    border-top: 1px #888888 solid;
    width: 100%;
  }

  .last{
    border-top: 1px #888888 solid;
  }

  .description-text {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 15.3px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400
  }

  .subhead-text {
    font-family: "Roboto Condensed",
    sans-serif; font-size: 20.4px;
    font-weight: 400;
    color: #41a2d8;
    line-height: 1em;
    font-style: normal;
    font-variant: normal;
    padding-top: 7px;

  }

  .header-text {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 12.75px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 0.8925px;
    color: #888888;
    padding: 0;
    margin: 0;
    border: 0px none;
  }

  .top-text {
    font-family: "Roboto Condensed", sans-serif;
    line-height: 1.4em;
    font-size: 1.3rem;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 0.07em;
    color: #888888;
    padding-top: 50px;
    padding-bottom: 20px;
  }

  .text {
    padding-left: 7px;
    margin: 0;
    border: 0px none;
    vertical-align: top;
    position: relative;
    /* position: absolute; */
    top: -8px;
  }

  h2 {
    cursor: pointer;
  }

  p {
    cursor: pointer;
  }
}

/* ---------- Problems ---------- */
.problems {
  /* Rows of blue image cards, shared by the problems and six-stones components */

  .card-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  @media only screen and (max-width: 959.98px) {
    .card-row > :not(:last-child) {
      margin-bottom: 20px;
    }
  }

  @media only screen and (min-width: 960px) {
    .card-row {
      flex-direction: row;
    }

    /* Gap only between cards, so a trailing hidden spacer doesn't count as a card */
    .card-row > .card-holder:has(~ .card-holder) {
      margin-right: 20px;
    }
  }

  .card-holder {
    width: 90vw;
    height: 90vw;
    object-fit: contain;
    max-width: 400px;
    max-height: 400px;
    background-color: #41a2d8;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
  }

  .header {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 15px;
    width: fit-content;
    color: white;
  }

  .subhead {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2em;
  }

  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
  }

  .card-holder {
    cursor: pointer;
  }

  .card-holder:hover {
    filter: brightness(85%);
  }

  .title {
    padding-top: 18px;
    margin-top: 20px;
    text-align: center;
  }

  .main-text {
    text-align: center;
  }

  @media only screen and (min-width: 960px) {
    .title {
      font-size: 60px;
    }

    .main-text {
      font-size: 22px;
      margin-top: 35px;
    }
  }

  @media only screen and (max-width: 959.98px) {
    .title {
      font-size: 35px;
    }

    .main-text {
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 15px;
    }
  }
}

.problem-article {
  /* Layout shared by the problem detail pages (disease, endangered, hot, ...) */

  .article-title {
    text-align: center;
    font-size: 35px;
    padding-top: 20px;
  }

  .article-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60vw;
  }

  @media (max-width: 959.98px) {
    .article-image {
      width: 80vw;
    }
  }

  .para {
    width: 70vw;
    font-size: 18px;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* ---------- Conservation ---------- */
.conservation {
  .pulse-arrow {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
  }

  .info {
    font-family: "Roboto Condensed", sans-serif;
    padding-top: 35px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  .info-row {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
  }

  @media only screen and (min-width: 960px) {
    .info {
      font-weight: 400;
      font-size: 60px;
      margin-bottom: 50px;
    }

    .all {
      background-color: rgb(232, 235, 240);
    }
  }

  @media only screen and (max-width: 959.98px) {
    .info {
      font-weight: 550;
      font-size: 120%;
    }
  }

}

.prob-sol-part {
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
  }

  .problem-div h3 {
    color: white;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2em;
    font-family: "Roboto Condensed", sans-serif;
    text-align: center;
  }

  .problem-div h3.first {
    margin-top: 26px;
  }

  .error-icon {
    height: 16%;
  }

  .problem-div p {
    color: white;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2em;
    font-family: "Roboto Condensed", sans-serif;
    text-align: center;
  }

  .color-thing {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    border-top: 8px solid #41a2d8;
    border-bottom: 8px solid #41a2d8;
  }

  @media only screen and (min-width: 960px) {
    .problem-div {
      width: 20%;
      margin-bottom: 40px;
    }

    .problem-div h3,
    .problem-div h3.first {
      margin-top: 40px;
    }

    /* Takes up as much height as the other icons, so the text below lines up across columns,
       while the padding keeps the drawn icon at its smaller size */
    .error-icon {
      box-sizing: border-box;
      height: 20%;
      padding: 20px 0;
    }

    .color-thing {
      flex-direction: row;
      justify-content: space-between;
      height: 45%;
      background: linear-gradient(90deg, #e92f2f 0%, #d8aa10 50%, #41d853 100%);
    }
  }

  @media only screen and (max-width: 959.98px) {
    .problem-div {
      width: 88%;
      height: 28%;
    }

    .color-thing {
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      align-content: center;
      height: 100%;
      background: linear-gradient(180deg, #e92f2f 0%, #d8aa10 50%, #41d853 100%);
    }
  }
}

.cornerstones {
  .text {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    font-size: 20.4px;
    padding-top: 35px;
    line-height: 1.2em;
  }

  .title {
    font-size: 60px;
    line-height: 1.1;
  }

  .text-div {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 40%;
    border: 3px solid black;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
  }

  .guidelines {
    text-align: center;
    padding: 30px 0 10px;
  }

  .guidelines-label {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #41a2d8;
    margin: 0 0 10px;
  }

  .guidelines-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    background-color: #41a2d8;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(65, 162, 216, 0.35);
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
  }

  .guidelines-link:hover,
  .guidelines-link:focus-visible {
    background-color: #2f8bbf;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(65, 162, 216, 0.45);
  }

  .guidelines-link:focus-visible {
    outline: 3px solid #1d5f85;
    outline-offset: 3px;
  }

  .guidelines-link .arrow {
    transition: transform 0.2s;
  }

  .guidelines-link:hover .arrow {
    transform: translateX(4px);
  }

  @media only screen and (max-width: 959.98px) {
    .title {
      font-size: 30px;
    }

    .text-div {
      width: 80%;
    }

    .guidelines-link {
      font-size: 17px;
      padding: 12px 20px;
    }
  }
}

.six-stones {
  /* Rows of blue image cards, shared by the problems and six-stones components */

  .card-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  @media only screen and (max-width: 959.98px) {
    .card-row > :not(:last-child) {
      margin-bottom: 20px;
    }
  }

  @media only screen and (min-width: 960px) {
    .card-row {
      flex-direction: row;
    }

    /* Gap only between cards, so a trailing hidden spacer doesn't count as a card */
    .card-row > .card-holder:has(~ .card-holder) {
      margin-right: 20px;
    }
  }

  .card-holder {
    width: 90vw;
    height: 90vw;
    object-fit: contain;
    max-width: 400px;
    max-height: 400px;
    background-color: #41a2d8;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
  }

  .header {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 15px;
    width: fit-content;
    color: white;
  }

  .subhead {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2em;
  }

  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
  }
}

.cert {
  @media only screen and (min-width: 960px) {

    .wrapper {
      background: rgb(46, 44, 44);
      width: 100%;
      margin-top: 3%;
      padding-bottom: 3%;
      margin-bottom: 0%;
    }

    .humane-text {
      color: white;
      font-size: 20px;
      font-weight: 400;
      line-height: 1.2em;
      font-family: "Roboto Condensed", sans-serif;
    }

    .photo-wrapper {
      height: 18%; 
      justify-content: center; 
      margin-bottom: 
      20px; 
      margin-top: 20px;
    }

    .text-wrapper {
      width: 67em;
      margin-left: auto;
      margin-right: auto;
    }

    .chevron {
      height: 40%;
      margin-top: 4%;
      padding-right: 3%;
      padding-left: 3%;
    }
  }

  @media only screen and (max-width: 959.98px) {

    .wrapper {
      top: 120px;
      background: rgb(46, 44, 44);
      width: auto;
      padding-bottom: 10%;
    }

    .chevron {
      height: 40%;
      margin-top: 12%;
      padding-right: 3%;
      padding-left: 3%;
    }

    .humane-text {
      color: white;
      font-size: 20px;
      font-weight: 400;
      line-height: 1.2em;
      font-family: "Roboto Condensed", sans-serif;
    }

    .photo-wrapper {
      height: 15%; 
      justify-content: center; 
      margin-bottom: 
      20px; 
      margin-top: 20px;
    }

    .text-wrapper {
      width: 80%;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .wrapped-image {
      height: 100%;
    }
  }

  .photo-wrapper {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
  }
}

.signup {
  @media only screen and (min-width: 960px) {
    .lead-text {
    font-size: 22.4px;
    font-weight: 400;
    color: white;
    line-height: 1.25em;
    font-family: "Roboto Condensed", sans-serif;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .apply {
    font-size: 30px !important;
    border: 2px solid white;
    border-radius: 4px;
    text-align: center !important;
    padding: 5px;
  }

  .ornate-image {
    object-fit: 
    cover; height: 25rem; 
    width: 100%; 
    display: table-row;
  }
  }

  @media only screen and (max-width: 959.98px) {
      .lead-text {
      font-size: 22.4px;
      font-weight: 400;
      color: white;
      line-height: 1.25em;
      font-family: "Roboto Condensed", sans-serif;
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

    .apply {
      font-size: 30px !important;
      border: 2px solid white;
      border-radius: 4px;
      text-align: center !important;
      padding: 5px;
    }

    .ornate-image {
      object-fit: 
      cover; height: 25rem; 
      width: 800px;
      height: 140px;
      transform: translateX(-25%);
      overflow-y: hidden;
      object-fit: cover; 
      display: table-row;
    }
  }

  .signup-row {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  @media only screen and (min-width: 960px) {
    .signup-row {
      flex-direction: row;
    }
  }
}

/* ---------- About us ---------- */
.about-us {
  .paragraph {
      width: 230px;
      text-align: center;
  }

  .bio {
      margin-top: 35px;
  }

  .headshot {
      border: 8px solid  #41a2d8;
      border-radius: 12px;;
  }

  .name-text {
      text-align: center;
      font-weight: 600;
      font-size: 20px;
      margin-top: 0px;
      margin-bottom: 0;
      color: white;

  }

  .title-text {
      text-align: center;
      font-style: italic;
      color: white;
      margin-top: 4px;

  }

  .bio-border {
      height: 140px; 
      width: 240px; 
      background-color: rgb(66, 61, 66);
      margin-right: auto;
      margin-left: auto;
      margin-top: 0px;
      padding-top: 6px;
      border-bottom-right-radius: 7px;
      border-bottom-left-radius: 7px;
      color: rgb(209, 209, 209);
      line-height: 16px;
  }

  .bios,
  .supporters {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-evenly;
      box-sizing: border-box;
  }

  .bios {
      align-items: center;
      align-content: center;
  }
}

/* ---------- Newsletter ---------- */
.newsletter-page {
  @media only screen and (min-width: 960px) {

  #mc_embed_signup {
      background: #fff;
      clear:left; 
      font:14px Helvetica,
      Arial,
      sans-serif;  
      width:600px;
      margin-right: auto;
      margin-left: auto;
      }
  }

  @media only screen and (max-width: 959.98px) {

      #mc_embed_signup {
          background: #fff;
          clear:left; 
          font:14px Helvetica,
          Arial,
          sans-serif;  
          margin-right: auto;
          margin-left: auto;
          }
      }
}

/* ---------- Documentary ---------- */
.documentary {
  .video-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 40px;
        width: 100%;
      }

      iframe {
        width: 800px;
        height: 450px;
        max-width: 100%;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      @media (max-width: 768px) {
        iframe {
          width: 100%;
          height: 180px;
        }
        
        .video-container {
          padding: 10px;
        }
      }
}

/* ---------- Shop ---------- */
.shop {
  .color {
    display: block;
    box-sizing: content-box;
    padding: 0;
    border: 0;
    font-family: inherit;
  }

  .amount-field {
    display: flex;
    align-items: center;
    height: 56px;
    background-color: #f5f5f5;
    border-bottom: 1px solid rgba(0, 0, 0, .42);
    border-radius: 4px 4px 0 0;
    padding: 0 16px 0 0;
    margin-bottom: 22px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .amount-field:focus-within {
    border-bottom: 2px solid #3f51b5;
  }

  .amount-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    padding: 4px 0;
  }

  .prefix {
    padding-right: 8px;
  }

  .color {
      width: 200px; 
      height: 50px; 
      border-radius: 10px; 
      color: white; 
      font-size: 25px; 
      text-align: center; 
      line-height: 50px;
      margin-left: auto; 
      margin-right: auto; 
      margin-bottom: 15px;
      cursor: pointer;
    }
    
    @media only screen and (min-width: 960px) {
      .hat-photo {
        padding-left: 90px;
        height: 80%
      }

      .donation-text {
        padding-bottom: 15%;
      }
    }

    @media only screen and (max-width: 959.98px) {
      .hat-photo {
        height: 80%;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

      .donation-text {
        padding-bottom: 25px;
      }

      .hat-text {
        padding-top: 25px;
      }
    }

    .example-form {
      align-items: center;
      max-width: 260px;
      border: 2px solid black;
      border-radius: 10px;
      padding-top: 10px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 4px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .example-full-width {
      width: 100%;
    }

    .narrow-width {
      align-items: center;
      width: 110px;
      margin-bottom: 11%;
      margin-left: auto;
      margin-right: auto;
  }

  input:autofill {
    background: grey;
  }

  .right-side {
    width: 400px;
    height: 450px;
  }

  .shop-layout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  @media only screen and (min-width: 960px) {
    .shop-layout {
      flex-direction: row;
    }
  }

  .left-side {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
}