.tempModal {
    position: fixed;
    display: block;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2; 
    cursor: pointer;
    text-align: center;
}

.showModal {
  opacity: 1;
  transition: all 300ms ease-in;

}

.tempModalInner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: auto;
    background-color: var(--green);
    padding-bottom: 5%;
} 

.modalImage {
  width: 80%;
  margin-top: 3%;
}

.closeModal img {
    position:  absolute;
    top: 1%;
    right: 1%;
    padding: 3%;
    width: 5%;

}

.tempModalInner p {
  text-decoration: none;
  color: var(--black);
}

.modalButton {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2vw;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 35%;
    margin-right: 35%;
    margin-top: 5%;
    background-color: var(--black);
    color: var(--green);
    padding: 2%;
    text-align: center;
}

.tempModalInner a {
  color: var(--green);
  text-decoration: none;
}

@media (max-width: 720px) {

  .modalButton {
      font-family: 'Montserrat', sans-serif;
      font-size: 3vw;
      margin-top: 8%;
      margin-left: 20%;
      margin-right: 20%;
    }

  .tempModalInner {
      padding: 5% 0 10% 0;
    
    }