/* block specific CSS goes here */

.hero-container > div {
  max-width: unset;
}

.hero-container,
.hero-container .hero-wrapper .hero.welcome-textcard div picture:last-of-type img {
  padding: 0;
  height: 480px;
}

.pfizerflex-overview .hero-container,
.hero-container .hero-wrapper .hero.graphic div picture img {
  height: 380px;
}

.hero h1 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  color: white;
}

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

.hero-container .hero-wrapper,
.hero-container .hero-wrapper .hero {
  height: 100%;
}

.hero-container .hero-wrapper .hero.welcome-textcard div picture:first-of-type {
  display: none;
}

.hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type {
  width: auto;
  background: var(--text-white);
  box-shadow: 2px 2px 5px rgb(0 0 0 / 35%);
  position: absolute;
  top: 480px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
  padding: 40px 45px 20px;
  text-align: center;
}
 
.hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type h1,
.hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type p {
  color: var(--pfizer-blue);
  font-family: var(--font-noto-sans);
  line-height: var(--line-height-24);
  font-weight: var(--font-weight-300);
}

.hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type h1 {
  font-size: var(--font-53);
  margin: 0 0 20px;
}

.hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type p {
  font-size: var(--font-18);
  max-width: 260px;
  margin: 10px auto;
}

@media (min-width: 1024px) {
  .hero-container,
  .pfizerflex-overview .hero-container,
  .hero-container .hero-wrapper .hero div picture img,
  .hero-container .hero-wrapper .hero.graphic div picture img {
    position: relative;
    height: auto;
  }

  .hero-container .hero-wrapper .hero {
    padding: 0;
    min-height: unset;
  }

  .hero-container .hero-wrapper .hero.welcome-textcard div picture:last-of-type {
    display: none
  }

  .hero-container .hero-wrapper .hero.welcome-textcard div picture:first-of-type {
    display: block;
  }

  .hero-container .hero-wrapper .hero.welcome-textcard div picture img {
    object-fit: fill;
    width: 100%;
  }

  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type {
    left: 20px;
    transform: translateY(-167%);
    padding: 25px;
  }

  .hero-container .hero-wrapper .banner-fr.hero.welcome-textcard > div:last-of-type {
    transform: translateY(-156%);
  }

  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type h1,
  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type p {
    line-height: var(--line-height-47);
   }

  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type h1 {
    font-size: var(--font-60);
    margin: 0;
    line-height: 1;
    font-weight: var(--font-weight-400);
  }

  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type p {
    font-size: var(--font-20);
    max-width: 460px;
    line-height: 1.5;
    margin-bottom: 0;
  }
}

@media (min-width: 1172px) {
  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type {
    left: 79px;
    transform: translateY(-151%);
  }

  .hero-container .hero-wrapper .banner-fr.hero.welcome-textcard > div:last-of-type {
    transform: translateY(-144%);
  }
}

@media (min-width: 1286px) {
  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type {
    transform: translateY(-142%);
  }

  .hero-container .hero-wrapper .banner-fr.hero.welcome-textcard > div:last-of-type {
    transform: translateY(-130%);
  }
}

@media (min-width: 1440px) {
  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type {
    transform: translateY(-117%);
  }

  .hero-container .hero-wrapper .banner-fr.hero.welcome-textcard > div:last-of-type {
    transform: translateY(-106%);
  }
}

@media (min-width: 1536px) {
  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type {
    transform: translateY(-147%);
    left: 8%;
  }

  .hero-container .hero-wrapper .banner-fr.hero.welcome-textcard > div:last-of-type {
    transform: translateY(-143%);
  }
}

@media (min-width: 1600px) {
  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type {
    left: 10%;
    transform: translateY(-106%);
  }

  .hero-container .hero-wrapper .banner-fr.hero.welcome-textcard > div:last-of-type {
    transform: translateY(-105%);
    left: 10%;
  }
}

@media (min-width: 1780px) {
  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type {
    left: 15%;
    transform: translateY(-80%);
  }

  .hero-container .hero-wrapper .banner-fr.hero.welcome-textcard > div:last-of-type {
    transform: translateY(-82%);
    left: 14%;
  }
}

@media (min-width: 1900px) {
  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type {
    left: 16%;
    transform: translateY(-60%);
  }

  .hero-container .hero-wrapper .banner-fr.hero.welcome-textcard > div:last-of-type {
    transform: translateY(-67%);
    left: 16%;
  }
}

@media (min-width: 2600px) {
  .hero-container .hero-wrapper .hero.welcome-textcard > div:last-of-type {
    left: 26%;
    transform: translateY(-5%);
  }

  .hero-container .hero-wrapper .banner-fr.hero.welcome-textcard > div:last-of-type {
    transform: translateY(18%);
    left: 26%;
  }
}