.cta {
  display: flex;
  position: relative; }
  .cta.promote-product-catalog {
    width: 100%;
    max-width: 100%;
    height: 31.75em;
    margin: 0;
    /*background-color: $color-14;*/ }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .cta.promote-product-catalog {
        height: 23.75em; } }
    .font-size-xl .cta.promote-product-catalog .cta-content .cta-text,
    .font-size-large .cta.promote-product-catalog .cta-content .cta-text {
      max-width: calc(100% - 40px); }
      @media (max-width: 767px) {
        .font-size-xl .cta.promote-product-catalog .cta-content .cta-text p,
        .font-size-large .cta.promote-product-catalog .cta-content .cta-text p {
          font-size: 0.8em; } }
      .font-size-xl .cta.promote-product-catalog .cta-content .cta-text h2,
      .font-size-large .cta.promote-product-catalog .cta-content .cta-text h2 {
        margin-bottom: 16px; }
    @media (max-width: 1440px) {
      .cta.promote-product-catalog {
        padding: 0; } }
    @media (max-width: 767px) {
      .cta.promote-product-catalog {
        height: auto;
        flex-wrap: wrap; } }
    .cta.promote-product-catalog .cta-img, .cta.promote-product-catalog .cta-content {
      width: 50%;
      height: 100%;
      position: relative; }
      @media (max-width: 767px) {
        .cta.promote-product-catalog .cta-img, .cta.promote-product-catalog .cta-content {
          width: 100%; } }
    .cta.promote-product-catalog .cta-img {
      overflow: hidden; }
      @media (max-width: 767px) {
        .cta.promote-product-catalog .cta-img {
          height: 282px; } }
      .cta.promote-product-catalog .cta-img img {
        width: auto;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
    .cta.promote-product-catalog .cta-content {
      padding: 48px 44px;
      background-image: linear-gradient(235deg, #afcb36, #00A03B); }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .cta.promote-product-catalog .cta-content {
          padding: 48px 30px; } }
      @media (max-width: 767px) {
        .cta.promote-product-catalog .cta-content {
          height: auto;
          padding: 40px 20px; } }
      .cta.promote-product-catalog .cta-content .cta-text {
        width: calc(100% - 40px);
        max-width: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
        .cta.promote-product-catalog .cta-content .cta-text h2, .cta.promote-product-catalog .cta-content .cta-text p {
          color: #FFFFFF; }
        .cta.promote-product-catalog .cta-content .cta-text h2 {
          margin-bottom: 8px; }
        .cta.promote-product-catalog .cta-content .cta-text p {
          margin-bottom: 27px; }
        @media (max-width: 1024px) {
          .cta.promote-product-catalog .cta-content .cta-text {
            top: 50%;
            left: auto;
            transform: translate(0, -50%); }
            .cta.promote-product-catalog .cta-content .cta-text p {
              font-size: 1em; } }
        @media (max-width: 767px) {
          .cta.promote-product-catalog .cta-content .cta-text {
            width: 100%;
            position: static;
            transform: translate(0, 0); }
            .cta.promote-product-catalog .cta-content .cta-text p {
              margin-bottom: 16px; }
            .cta.promote-product-catalog .cta-content .cta-text .primary-btn-small {
              margin: 0; } }
  .cta.cta-banner {
    width: 100%;
    max-width: 100%;
    height: 31.75em;
    margin: 0;
    position: relative; }
    @media only screen and (min-width: 1024px) and (max-width: 1204px) {
      .cta.cta-banner {
        padding: 0 24px; } }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .cta.cta-banner {
        padding: 0 24px;
        height: 23.75em; } }
    @media (max-width: 767px) {
      .cta.cta-banner {
        height: 35.875em;
        padding: 0 20px; } }
    .ltr .cta.cta-banner .cta-img::after {
      background: linear-gradient(to right, white 20%, rgba(255, 255, 255, 0) 50%); }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .ltr .cta.cta-banner .cta-img::after {
          background: linear-gradient(to right, white 25%, rgba(255, 255, 255, 0) 65%); } }
    .font-size-xl .cta.cta-banner .cta-content .cta-text,
    .font-size-large .cta.cta-banner .cta-content .cta-text {
      max-width: 50%; }
      @media (max-width: 767px) {
        .font-size-xl .cta.cta-banner .cta-content .cta-text,
        .font-size-large .cta.cta-banner .cta-content .cta-text {
          max-width: 100%; }
          .font-size-xl .cta.cta-banner .cta-content .cta-text p,
          .font-size-large .cta.cta-banner .cta-content .cta-text p {
            font-size: 0.8em; } }
      .font-size-xl .cta.cta-banner .cta-content .cta-text h2,
      .font-size-large .cta.cta-banner .cta-content .cta-text h2 {
        margin-bottom: 16px; }
    .high-contrast .cta.cta-banner .cta-content .cta-text h2, .high-contrast .cta.cta-banner .cta-content .cta-text p {
      background-color: #FFFFFF; }
    .cta.cta-banner .cta-img {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0; }
      .cta.cta-banner .cta-img img {
        width: 100%;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
      .cta.cta-banner .cta-img::after {
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(to left, white 15%, rgba(255, 255, 255, 0.5) 35%, rgba(255, 255, 255, 0) 65%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1; }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .cta.cta-banner .cta-img::after {
            background: linear-gradient(to left, white 25%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0)); } }
        @media (max-width: 767px) {
          .cta.cta-banner .cta-img::after {
            background: linear-gradient(to top, white 25%, rgba(255, 255, 255, 0) 75%); } }
    .cta.cta-banner .cta-content {
      width: 100%;
      max-width: 1204px;
      margin: 0 auto;
      padding: 48px 0;
      position: relative;
      z-index: 5; }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .cta.cta-banner .cta-content {
          padding: 48px 0; } }
      @media (max-width: 767px) {
        .cta.cta-banner .cta-content {
          padding: 40px 0; } }
      .cta.cta-banner .cta-content .cta-text {
        width: calc(100% - 40px);
        max-width: 350px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%); }
        @media (max-width: 1024px) {
          .cta.cta-banner .cta-content .cta-text {
            max-width: 300px; }
            .cta.cta-banner .cta-content .cta-text p {
              font-size: 1em; } }
        .cta.cta-banner .cta-content .cta-text .primary-btn-small {
          margin: 38px 0 0; }
          @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .cta.cta-banner .cta-content .cta-text .primary-btn-small {
              margin: 32px 0 0; } }
          @media (max-width: 767px) {
            .cta.cta-banner .cta-content .cta-text .primary-btn-small {
              margin: 40px 0 0; } }
        .cta.cta-banner .cta-content .cta-text h2, .cta.cta-banner .cta-content .cta-text p {
          color: #357875; }
        .cta.cta-banner .cta-content .cta-text h2 {
          margin-bottom: 6px; }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .cta.cta-banner .cta-content .cta-text {
            max-width: 320px; } }
        @media (max-width: 1024px) {
          .cta.cta-banner .cta-content .cta-text p {
            font-size: 1.125em; } }
        @media (max-width: 767px) {
          .cta.cta-banner .cta-content .cta-text {
            text-align: center;
            top: auto;
            left: 50%;
            bottom: 44px;
            transform: translate(-50%, 0); }
            .cta.cta-banner .cta-content .cta-text p {
              font-weight: bold; }
            .cta.cta-banner .cta-content .cta-text p {
              font-weight: bold; } }