.popup-section {
  display: none; }
  .popup-section .modal-dialog {
    max-width: 824px;
    width: 100%; }
  .popup-section .popup-section-content {
    display: flex;
    flex-direction: row-reverse;
    border: 1px solid #17325e;
    border-radius: 8px; }
    .popup-section .popup-section-content > div {
      padding-left: 0px;
      padding-right: 0px; }
    .popup-section .popup-section-content .close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      padding: 8px;
      font-weight: 500;
      border-radius: 50% !important;
      opacity: 1;
      background: #ffffff;
      color: #000000;
      font-size: 1.5rem;
      line-height: 0.8125rem;
      text-transform: uppercase;
      z-index: 400; }
    .popup-section .popup-section-content .popup-btn:focus {
      outline-offset: 3px;
      outline: 3px solid #007ACC; }
    .popup-section .popup-section-content .close-btn:focus {
      outline: 2px solid #ffffff;
      outline-offset: 3px;
      border-radius: 2px; }
    .popup-section .popup-section-content .popup-section-hero {
      position: relative;
      overflow: hidden;
      border-radius: 0px 8px 8px 0;
      display: flex;
      background-repeat: no-repeat;
      background-size: auto, cover;
      background-position: bottom right, top center; }
    .popup-section .popup-section-content .popup-section-body {
      background: #17325e;
      border-radius: 8px 0px 0px 8px;
      padding: 30px 40px; }
      .popup-section .popup-section-content .popup-section-body h2 {
        color: #ffffff;
        font-size: 1.5rem;
        line-height: 2.25rem;
        margin-bottom: 15px; }
      .popup-section .popup-section-content .popup-section-body p {
        font-size: 1rem;
        line-height: 1.5rem;
        color: #ffffff;
        font-weight: 400;
        margin-bottom: 20px; }
      .popup-section .popup-section-content .popup-section-body .button {
        width: 100%;
        display: block;
        margin-bottom: 20px; }
        .popup-section .popup-section-content .popup-section-body .button:not(.outline) {
          background: #E20886;
          font-weight: 700;
          border: 1px solid #ffffff; }
          .popup-section .popup-section-content .popup-section-body .button:not(.outline):hover:not(:active) {
            background: #ffffff; }
            .popup-section .popup-section-content .popup-section-body .button:not(.outline):hover:not(:active) .button-label {
              color: #E20886; }
        .popup-section .popup-section-content .popup-section-body .button.redirect span:after {
          font-size: 0.75rem; }
      .popup-section .popup-section-content .popup-section-body .popup-no-thanks {
        font-size: 1rem;
        line-height: 1.5rem;
        color: #ffffff;
        font-weight: 400;
        margin: 0 auto;
        display: block;
        border: none;
        background: none;
        text-decoration: underline; }
        .popup-section .popup-section-content .popup-section-body .popup-no-thanks:focus {
          outline: 2px solid #ffffff;
          outline-offset: 3px;
          border-radius: 2px; }

@media only screen and (max-width: 768px) {
  .popup-section {
    padding: 17px; }
    .popup-section .modal-dialog {
      max-width: 500px;
      margin: 0 auto; }
    .popup-section .popup-section-content {
      display: block; }
      .popup-section .popup-section-content .popup-section-hero {
        border-radius: 8px 8px 0px 0px;
        max-height: 300px;
        height: 50vw;
        width: 100%;
        background-size: 40%, 110%; }
      .popup-section .popup-section-content .popup-section-body {
        padding: 20px 20px 26px;
        border-radius: 0px 0px 8px 8px; } }