.modal-open {
  overflow: hidden;
  position: fixed;
} 

#navigation {
  z-index: 110;
  position: fixed;
  display: grid;
  justify-self: center;
  /* height: 100%; */
  width: 100%;
  max-width: 750px;
  /* background-color: #0000008f; */
  /* -webkit-backdrop-filter: blur(4px) opacity(1);
  backdrop-filter: blur(4px) opacity(1);*/
}

#navigation-opener{
  position: fixed;
  top:30px;
  /* left:20px; */
  max-width: 100%;
  z-index: 110;
  box-sizing: border-box;
  padding: 0 30px;
  width: 100%;
  max-width: 750px;
  display: grid;
  justify-content: left;
}
#navigation-opener div div{
  border-radius: 2px;
  height: 4px;
  background:#fff;
  box-shadow: 0px 0px 2px black;
  width: 30px;
  margin: 5px 0;
}
#navigation-list{
  /* background:#000; */
  position:fixed;
  top:55px;
  left:0;
  right:0;
  bottom:0;
  z-index: 100;
  display: grid;
  grid-template-columns: 30% 70%;
  color: #fff;
  justify-content: space-between;
  transform:translateX(-110%);
  margin-top: 10px;
  /* width: 100%;
  max-width: 750px; */
  opacity:0;
}

#navigation-content{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: auto;
  justify-items: center;
}
/* #navigation-mask{
  background:#000;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index: 120;
} */

#navigation-list a{
  height:100%; 
  display:flex; 
  flex-flow:column;
  justify-content:center; 
  align-items:center; 
  text-decoration:none; 
  color:#000;
  padding:2% 10%;
  text-align:center;
  width: 70%;
  max-width: 462px;
}

@media screen and (max-width: 1580px) {

  #navigation-list{
    /* background: #000000b5; */
    width: 100%;
    max-width: 750px;
    grid-template-columns: 100%;
    justify-self: center;
  }
  
  #navigation-content{
    justify-items: left;
  }

  #navigation-list a{
    padding: 2% 4%;
    width: 62%;
    max-width: 465px;
  }
}

@media screen and (max-width: 480px) {
  #navigation-content{
    height: 80%;
  }
}