.hero {
  margin-bottom: 50px; }
  .hero__container {
    height: 640px;
    display: flex;
    padding: 0; }
  .hero__left {
    width: 64%;
    justify-content: flex-end;
    flex-shrink: 1;
    background-image: url("/modules/Teva.QVAR/Client/Images/hero-1.png");
    background-size: cover; }
    .hero__left h2 {
      font-family: "Mystery Quest";
      font-weight: 500;
      font-size: 48px;
      letter-spacing: 4px;
      line-height: 55px; }
  .hero__right {
    display: block;
    width: 36%; }
  .hero__box {
    height: 50%; }
    .hero__box h2 {
      font-family: "Mystery Quest";
      font-weight: 500;
      font-size: 36px;
      letter-spacing: 2.6px;
      line-height: 44px; }
    .hero__box:not(.hero__box--grey) {
      background-image: url("/modules/Teva.QVAR/Client/Images/hero-2.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: right; }
    .hero__box--grey {
      background-image: url("/modules/Teva.QVAR/Client/Images/hero-3.png"), radial-gradient(circle 308px at 80%, #f6f6f6 0%, #9b9b9b 100%);
      background-position: 92.5% center, center;
      background-repeat: no-repeat; }
      @media screen and (max-width: 414px) {
        .hero__box--grey h2 {
          max-width: 205px; } }
  .hero__left, .hero__box {
    position: relative;
    display: flex;
    align-items: center; }
  .hero__text {
    position: relative;
    padding: 0 50px;
    z-index: 2;
    color: #ffffff; }
    .hero__text h2 span {
      font-family: "ProximaNova"; }
    .hero__text .qvar-redihiler-span {
      font-size: 23px; }
    .hero__text p {
      max-width: 250px;
      color: #ffffff;
      font-family: "ProximaNova";
      font-size: 20px;
      font-weight: 700;
      padding-bottom: 25px; }
  .hero__button {
    display: inline-block;
    min-width: 210px;
    padding: 11px 0;
    color: #ffffff;
    font-family: "ProximaNova";
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    background-image: linear-gradient(180deg, #c9073c 0%, #99031c 100%); }
    .hero__button:hover {
      background-image: linear-gradient(180deg, #f7f7f7 0%, #d2d2d2 100%);
      color: #99031c; }
    .hero__button:active {
      background: linear-gradient(180deg, #828282 0%, #2c2c2c 100%);
      color: white; }

@media only screen and (max-width: 1024px) {
  .hero__container {
    flex-direction: column;
    height: auto;
    max-width: 100%;
    margin-left: 0; }
  .hero__left, .hero__right {
    width: initial; }
  .hero__left {
    min-height: 410px; }
  .hero__box {
    min-height: 332px; }
    .hero__box:not(.hero__box--grey) {
      background-position: right 10%; }
  .pap-removal-toggle .hero__box:not(.hero__box--grey) {
    background-position: right; }
  .pap-removal-toggle .hero__box--grey {
    background-position: 45% center, center; } }

@media only screen and (max-width: 768px) {
  .hero__container {
    max-width: 100%;
    margin-left: 0; }
  .hero__left {
    min-height: 332px;
    background-position: 71% 26%; }
    .hero__left h2 {
      font-size: 34px;
      line-height: 38px;
      letter-spacing: initial; }
    .hero__left .hero__text {
      max-width: 270px;
      padding: 0; }
  .hero__right {
    max-width: 100%; }
  .hero__text p {
    font-size: 18px;
    line-height: 22px;
    max-width: 205px; }
  .hero__button {
    min-width: 180px;
    font-size: 16px; } }

@media only screen and (max-width: 420px) {
  .hero__container {
    max-width: 100%;
    margin-left: 0; }
  .hero__text {
    padding: 0 30px; }
    .hero__text h2 {
      margin-bottom: 10px; } }

@media only screen and (max-width: 375px) {
  .hero__container {
    max-width: 100%;
    margin-left: 0; }
  .hero__box:not(.hero__box--grey) {
    background-image: url("/modules/Teva.QVAR/Client/Images/hero-2-mobile.png"); } }

.pap-removal-toggle .hero__right {
  background-image: radial-gradient(circle 308px at 80%, #f6f6f6 0%, #9b9b9b 100%); }

.pap-removal-toggle .hero__box:not(.hero__box--grey) {
  background-image: none;
  justify-content: center; }

.pap-removal-toggle .hero__box--grey {
  background-image: url(/modules/Teva.QVAR/Client/Images/hero-3.png);
  background-position: 35% center, center; }