Can an element ignore the heights of properties in front of it?

I have 2 elements sharing one class .cta

. The CTA .casino-box

looks great on the inside, but it .header-box

counts on the inside of 165px of space used by .top-nav-bar

and .nav-bar

.

How can I get the top CTA to ignore the added spacing of these two nav bars without having to split the css code for the CTA?

Link to CodePen

.cta {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  top: 50%;
  margin-top: -80px;
}

.cta h1 {
  color: #fff;
  weight: 500;
  text-shadow: 0px 0px 4px black;
}

.cta .button {
  color: #fff;
  border-color: #fff;
  font-weight: bold;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
  text-shadow: 0px 0px 4px black;
}
.cta .button:hover {
  color: #90281F;
  background: #fff;
  text-shadow: none;
}

.cta hr {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
}