.ip_modal_frame {
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-modal-shadow: rgba(0, 0, 0, 0.25);
  --color-modal-cta-bg: #000000;
  --color-modal-cta-fg: #ffffff;
  --gill-sans-font: 'Gill Sans MT';
}

.ip_modal_background,
.ip_modal_frame {
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: none;

  &.ip-modal-visible,
  &.ip-background-visible {
    display: inline;
  }

  &.ip-modal-hidden,
  &.ip-background-hidden {
    display: none;
  }
}

.ip_modal_background {
  background-color: var(--color-overlay);
}

.ip_modal {
  position: relative;
  z-index: 1001;
  margin: 0 auto;
  margin-top: 120px;
  width: 90%;
  max-width: 500px;
  box-shadow: 5px 5px 10px var(--color-modal-shadow);
  padding: 24px 91px 24px 92px;
  background-color: var(--color-modal-cta-fg);
  border: 1px solid #4F4F4F;

  p {
    font-size: .75rem;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .ip_modal_close_button {
    position: absolute;
    right: 15px;
    width: 15px;
    height: 15px;

    .icon--close {
      color: #124734;
    }
  }

  .ip_modal_contents {
    width: 100%;

    .ip_dialog_banner_image {
      display: flex;
      justify-content: center;

      img {
        object-fit: cover;
      }
    }

    .ip_modal_title {
      font-size: 28px;
      text-align: center;
      font-weight: 400;
      grid-area: heading;
      line-height: 36px;
      margin-top: 20px;
      margin-bottom: 15px;
      text-transform: lowercase;
      letter-spacing: 0.3px;
    }

    .ip_modal_points {
      padding: 0 0 0 1.1rem;
      text-align: center;
      padding-left: 0;
      margin-top: 0;
      text-transform: lowercase;
      list-style: none;
      margin-bottom: 20px;

      li {
        line-height: 20px;
        position: relative;
        font-size: 16px;
        font-weight: 400;

        &:before {
          content: "·";
          font-size: 32px;
          vertical-align: middle;
          position: absolute;
          top: -2px;
          margin-left: -15px;
        }

        .ip_modal_footnote {
          font-size: 15px;

          a {
            color: var(--color-modal-cta-bg);
            text-decoration: underline;
          }
        }
      }
    }

    .ip_modal_action_buttons{
      text-align: center;

      .ip_modal_button {
        width: 100%;
        margin-top: -1px;
        text-transform: uppercase;
        padding: 15px 15px 9px 15px;
        font-size: 12px;
        letter-spacing: 0.75px;
        font-weight: 600;
      }

      .ip_modal_button_primary {
        margin-bottom: 20px;
        background-color: var(--color-modal-cta-bg);
        color: var(--color-modal-cta-fg);
        font-family: var(--gill-sans-font);
        line-height: 14px;
      }

      .ip_modal_button_secondary {
        text-decoration: underline;
        font-family: var(--gill-sans-font);
        line-height: 12px;
        padding: 0;
        width: auto;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .ip_dialog_banner_image {
    width: 315px;
    height: 205px;
  }
}

@media screen and (max-width: 430px) {
  .ip_modal {
    padding: 20px 30px 30px 30px;

    .ip_modal_close_button {
      right: 30px;
    }

    .ip_modal_contents {
      padding-top: 40px;

      .ip_modal_points li:before {
        top: 0px;
      }
    }
  }
}