<p>This is a example of a <a class="cta" href="#google">css modal</a></p>
<div id="google" class="modaloverlay">
  <div class="modal">
    <a href="#close" class="close">&times;</a>
    <div>
      <h1>Here is some content inside the Modal.</h1>
      <p>If the modal shrinks below the breakpoint then the modal goes full screen for mobile use.</p>
    </div>
  </div>
</div>

body{ background-color:tomato; font-family:sans-serif; padding:5em;}
h1, p{text-align:center;}
.cta{
    background-color: white; 
    border:1px solid lightgrey; 
    border-radius:6px; 
    color: tomato;
    display:inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 1em;
    padding:.3em 1em; 
    text-decoration:none; 
    &:hover{
      background-color:lightgrey;
      color:slategrey;
      text-decoration:none; 
    } 
}

// Modal
.modaloverlay{
  background:rgba(0,0,0,0.8);
  bottom:0;
  left:0;
  opacity:0;
  pointer-events:none;
  position:fixed;
  right:0;
  top:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  z-index:-1;
  display: none;
  &:target{
    display: block;
    opacity:1;
    pointer-events:auto;
    z-index:99999;
  }
  .modal{
    background-color:white;
    height: 100%;
    position:relative;
    margin:0 auto;
    padding:3em;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    @media (min-width: 60em) {
      height:75%;
     margin:5% auto;
     max-height: 57em;
      max-width:66em;
      width:85%;
    }
  > iframe, > div{
    border:none;
    width:100%;
    height:100%;
    }
  }
  .close{
    background-color:turquoise;
    color:white;
    font-size:24px;
    padding:8px 12px;
    position:absolute;
    right:0;
    text-align:center;
    text-decoration:none;
    top:0;
    z-index: 1;
  }
}