Top Menu with Modals

<!-- informational header -->
<div id="header_kit">
  <div class="header_kt">
    <!-- about us window -->
    <div class="about_us">
      <h3>We're Awesome</h3>
      Here's why we're awesome. The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg! The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!
      <p />
      The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!
      <div class="links">
        <div>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div>
          <a class="btn_kit" href="#open_1">Modal 1</a>
          <a class="btn_kit" href="#open_2">Modal 2</a>
          <a class="btn_kit" href="#open_3">Modal 3</a>
        </div>
      </div>
    </div>
    <!-- end about us window -->
    
    <!-- staff window -->
    <div class="staff">
      <a href="#"><img src="https://i.ibb.co/m0Dr6LB/kit-av-round.png"><div>Name</div></a>
      <a href="#"><img src="https://i.ibb.co/m0Dr6LB/kit-av-round.png"><div>Name</div></a>
      <a href="#"><img src="https://i.ibb.co/m0Dr6LB/kit-av-round.png"><div>Name</div></a>
    </div>
    <!-- end staff window -->
    
    <!-- events window -->
    <div class="events">
      <h3>Announcements</h3>
      <div>Announcement 1</div>
      The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg! The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg! The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!
    </div>
    <!-- end events window -->
    
  <!-- add modals here -->
<div id="open_1" class="kit_modal">
  <div>
    <a href="#" title="Close" class="kit_close">X</a>
    <h4>Hi!</h4>
    More information can go into here. <a href="https://rpginitiative.com">A link</a>
  </div>
</div>
  
  <div id="open_2" class="kit_modal">
  <div>
    <a href="#" title="Close" class="kit_close">X</a>
    <h4>Hi!</h4>
    More information can go into here.
  </div>
</div>
  
  <div id="open_3" class="kit_modal">
  <div>
    <a href="#" title="Close" class="kit_close">X</a>
    <h4>Hi!</h4>
    More information can go into here.
  </div>
</div>
  <!-- end modals -->
</div>
</div>
  <!-- end informational header -->

<style>
#header_kit {
  line-height: 150%;
  font-family: sans-serif;
  background: #1a1a1a;
  color: #efefef;
  text-shadow: 0 0 5px #000
}

#header_kit a {
  color: #ccc;
  text-decoration: none
}

.header_kt {
  display: flex
}

.about_us,
.events {
  padding: 10px;
}

.about_us h3,
.events h3 {
  margin: 0 0 1em 0;
  border-bottom: 1px solid #ccc
}

.events h3 {
  text-align: right
}

.events > div {
  text-transform: uppercase;
  color: #dbc5b6
}

.staff {
  padding: 1em 10px;
  flex-basis: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.staff a {
  opacity: .8;
  transition: 1s;
  display: block;
  padding: 5px;
  text-align: center
}

.staff a:hover {
  opacity: 1;
  transition: 1s
}

.staff img {
  height: 75px;
  border-radius: 100%
}

.links {
  display: table;
  width: 100%;
  border-spacing: 5px
}

.links > div {
  display: table-row
}

#header_kit .links > div > a {
  color: #ccc;
  transition: 1s;
  transition-timing-function: linear;
  display: table-cell;
  padding: 10px;
  background: rgba(0,0,0, .1);
  text-align: center;
  border: 1px solid rgba(0,0,0, .2);
  box-shadow: inset 0 0 5px rgba(0,0,0, .5)
}

#header_kit .links > div > a:hover {
  transition-timing-function: linear;
  transition: 1s;
  background: rgba(0,0,0, .3);
  color: #efefef
}

.kit_modal {
  position: fixed;
  z-index: 99;
  background: rgba(0,0,0, .8);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: all .5s
}

.kit_modal:target {
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}

.kit_modal > div {
  color: #aaa;
  border-radius: 5px;
  max-width: 900px;
  min-width: 300px;
  width: 50vw;
  background: #0a0a0a;
  padding: 1%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute
}

.kit_close {
  display: block;
  padding: 5px;
  float: right;
  clear: left
}

@media screen and (max-width: 767px) {
  .header_kt {
    flex-wrap: wrap
  }

  .staff {
    flex-direction: row
  }
</style>