.cover-all {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: rgba(131,131,131,0.8);
    z-index: 10000; /*yes that is needed because someone used 9999 in the header...*/
    display: none;
}

.pop-up {
    max-width: 650px;
    max-height: 400px;
    width: 100%;
    background: #fff;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
}

#no-scroll {
    overflow: hidden;
}

.pop-up__close-button {
    grid-row: 1/2;
    grid-column: 12/13;
    text-align: right;
    padding-right: 6px;
    margin-bottom: 0;
    color: #666;
    font-size: 2rem;
    opacity: 1;
    transition: opacity .3s;
}

.pop-up_image {
  grid-column: 4/10;
  grid-row: 2/4;
  max-width: 325px;
}

.pop-up__close-button:hover,
.pop-up__button:hover {
    opacity: 0.8;
    cursor: pointer;
}

.pop-up__message {
    color: #000;

    color: #666;
    text-align: center;
    width: 100%;
    font-family: "Chronicle G2", Georgia, serif;
    height: fit-content;
    margin-bottom: 0;
}

.pop-up__message1 {
  grid-row: 4/6;
  grid-column: 2/12;
  font-size: 1.2em;
}

.pop-up__message2 {
  grid-column: 4/10;
  grid-row: 6/10;
  font-size: 1em;
}

.pop-up__button {
    background: #002e5d;
    color: #fff;
    display: flex;
    justify-content: center;
    align-content: center;
    grid-row: 10/11;
    grid-column: 4/10;
    opacity: 1;
    transition: opacity .3s;
}

.pop-up__opt-out {
  grid-row: 11/12;
  grid-column: 5/9;
  text-align: center;
  margin-bottom: 0;
  color: #666;
  font-size: .7em;
}

.pop-up__opt-out:hover {
  opacity: 0.8;
  cursor: pointer;
}

.pop-up__text {
      font-size: 1.5em;
      font-family: "Chronicle G2", Georgia, serif;
      text-align: center;
      margin: 1rem;
}