.quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 49rem;
  max-height: 49rem;
  overflow: hidden;
  overflow-x: hidden;
  cursor: default;
}
.quote a {
  color: var(--blue);
  text-decoration: underline;
}
.quoteHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 34rem;
  margin: 4rem 0;
}
.quoteHeader.heading-h1 {
  margin-bottom: 1.125rem;
  width: 29rem;
}

.quoteSlider {
  display: flex;
  flex-direction: row;
  margin-top: 1rem;
  padding-bottom: 2rem;
}
.quoteCard {
  width: 20.5rem;
  min-width: 20.5rem;
  min-height: 19.75rem;
  max-height: 19.75rem;
  background: var(--white);
  padding: 2rem;
  border-radius: 1rem;
  margin: 0 1.5rem 0.5rem 0;
  box-shadow: 0px 12px 32px -4px var(--box-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.quoteInfo {
  display: flex;
  flex-direction: row;
}
.quote .star-rating {
  margin-top: 1rem;
}
.quoteInfo img {
  width: 4.625rem;
  max-height: 4.625rem;
}
.quoteInfoText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0.95rem;
}
.quoteInfoText h3 {
  margin-bottom: 0.5rem;
  text-align: left;
  font-synthesis: none;
}
.quote p {
  margin: 0;
}
.quoteSliderContainer {
  position: relative;
  overflow-x: hidden;
}

.quoteAnimated {
  animation: marquee 50s linear infinite;
  -webkit-animation: marquee 50s linear infinite;
  -moz-animation: marquee 50s linear infinite;
  -o-animation: marquee 50s linear infinite;
  -ms-animation: marquee 50s linear infinite;
}
.quoteSlider span {
  display: flex;
}

.quoteSliderContainer {
  width: 328rem;
}
.quoteSlider:hover {
  animation-play-state: paused;
}

.hub-page-main .quoteHeader,
.hub-page-main .quote .heading-h1 {
  width: 43rem;
}
.quoteH1Mobile {
  display: none;
}
.hub-page-main .quote {
  max-height: 57rem;
  margin-bottom: 2rem;
}
@media (max-width: 1440px) {
  .quoteSlider {
    margin-left: 2rem;
  }
}
@media (max-width: 900px) {
  .quoteAnimated {
    animation: marqueeTablet 55s linear infinite;
    -webkit-animation: marqueeTablet 55s linear infinite;
    -moz-animation: marqueeTablet 55s linear infinite;
    -o-animation: marqueeTablet 55s linear infinite;
    -ms-animation: marqueeTablet 55s linear infinite;
  }
  .quoteSlider:hover {
    animation-play-state: running;
  }
}
@media (max-width: 775px) {
  .hub-page-main .quoteHeader,
  .hub-page-main .quote .heading-h1 {
    width: auto;
    padding: 0 1.5rem;
  }
  .hub-page-main .quoteHeader p {
    padding: 0 6rem;
  }
  .hub-page-main .quoteHeader {
    margin-top: 9rem;
  }
  .hub-page-main .quote {
    max-height: 73rem;
  }
}
@media (max-width: 640px) {
  .quote {
    margin-top: 13rem;
    min-height: 0;
  }
  .impact-main .usaBackground {
    background-image: none;
  }
  .impact-main .quoteHeader p {
    display: none;
  }
  .impact-main .quoteHeader {
    margin-bottom: 2rem;
  }
  .impact-main .quote .star-rating {
    margin-top: 0;
  }
  .hub-page-main .quoteHeader p {
    padding: 0;
  }
  .hub-page-main .quote {
    margin-top: 0;
  }
  .hub-page-main .quoteH1 {
    display: none;
  }
  .hub-page-main .quoteH1Mobile {
    display: block;
  }
  .hub-page-main .quote .heading-h1 {
    padding: 0;
    margin-bottom: 1rem;
  }
  .quoteAnimated {
    animation: marqueeMobile 70s linear infinite;
    -webkit-animation: marqueeMobile 70s linear infinite;
    -moz-animation: marqueeMobile 70s linear infinite;
    -o-animation: marqueeMobile 70s linear infinite;
    -ms-animation: marqueeMobile 70s linear infinite;
  }
}
@media (max-width: 500px) {
  .quoteHeader {
    width: 23rem;
  }
  .quoteHeader p {
    width: 20rem;
  }
  .quoteCard {
    width: 19.625rem;
    max-height: 18.125rem;
  }
}
@media (max-width: 450px) {
  .quoteSliderContainer {
    width: 100%;
  }
  .quoteSlider {
    margin-left: 2rem;
  }
  .quoteHeader {
    margin-top: 1rem;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-45vw);
  }
}
@keyframes marqueeTablet {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-255vw);
  }
}
@keyframes marqueeMobile {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-655vw);
  }
}