Make element underneath part of overlay clickable but not all of it

Question

I'm creating an overlay that will be transparent and allow the user to click on certain areas on the overlay and behind it.

In the upper right there is a piece cut out that should show the background and allow clicking on elements behind it. There should also be text on the overlay that the user can click to trigger an onclick event.

I've tried to mock this up but am having issues. How can I make it so the background is clickable through the circle as well as having the text clickable on the overlay?

I've tried to use point-event:none on the overlay which allows me to click EVERYTHING in the background but I only want to let users click on the exposed area in the upper right and/or on the text. I need to keep the overlay at a z-index of 5 so that it overlays EVERYTHING on the page.

Example fiddle: http://jsfiddle.net/h9bzqvx0/

.overlay {
  height: 100%;
  width: 100%;
  z-index: 5;
  position: fixed;
  background-color: blue;
  opacity: 0.95;
  top: 0;
  left: 0;
}


.circle-container {
  width: 40%;
  height: 40%;
  position: relative;
  float: right;
}


.circle {
  width: 100%;
  height: 100%;
  min-width: 50px;
  min-height: 50px;
  position: absolute;
  overflow: visible;
  float: right;
}


.circle:before {
  content: '';
  position: absolute;
  top: -28%;
  width: 100%;
  right: -10%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 0px 500% 0px 500% #448CCB;
  background: #FFF;
}


.text-container {
  width: 50px;
  float: right;
  top: -55%;
  right: -5%;
}

<p>
  some stuff on the background of the body to see
</p>

<div class="overlay">
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="text-container">
    <p class="text">Some text here</p>
  </div>
</div>