circles on circles on circles

make overlay clickable in parts

HTML

<body>
<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>
</body>

CSS

.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%;
}