#lightbox {
   z-index: 2;
  }
  
  #lightnav {
   z-index: 3;
  }
  
  
  #lightbox {
   box-sizing: border-box;
   padding: 10px;
   height:100vh;
   cursor: pointer;
   position: fixed;
   top: 0;       
   left: 0;
   width: 100%;
   background-color: #000000aa;
   visibility: hidden;
  }
  
  #lightbox img {
  margin: auto;
  display: block;
  height: 100%; 
  border-radius: 20px;
  box-shadow: 0 0 20px 10px black;
  object-fit: contain;
  }
  
  #lightnav {
   box-sizing: border-box;
   cursor: pointer;
   position: fixed;
   top: 0;       
   visibility: hidden;
  }
  
  #lightnav div {
  width: 10%;
  height: 100vh;
  position: fixed;
  top: 0px;
  }
  
  #lightnav div:nth-child(1) {
  left: 0px;
  }
  
  #lightnav div:nth-child(2) {
  right: 0px;
  }
  
  #lightnav div img {
  position: absolute;
  top: 40%;
  filter: opacity(0.7);
  }
  
  #lightnav div:hover img {
  filter: opacity(1.0);
  }
  
  #lightnav div:nth-child(1) img {
  transform: rotateY(180deg);
  }
  

@media only screen and (min-width: 1000px) {

  #lightnav div::after {
  border-width: 50px;
  }
  
  #lightnav div:nth-child(1) {
      background-image: linear-gradient(90deg, #000000, transparent);
  }
  
  #lightnav div:nth-child(2) {
      background-image: linear-gradient(-90deg, #000000, transparent);
  }
  
}
     

@media only screen and (max-width: 999px) {    
  
  #lightnav div::after {
  border-width: 50px;
  }
  
  #lightnav div:nth-child(1) {
      background-image: linear-gradient(90deg, #000000, transparent);
  }
  
  #lightnav div:nth-child(2) {
      background-image: linear-gradient(-90deg, #000000, transparent);
  }
  
}


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

  #lightnav div:nth-child(1) {
      background-image: linear-gradient(90deg, black, transparent);
  }
  
  #lightnav div:nth-child(2) {
      background-image: linear-gradient(-90deg, black, transparent);
  }
  
}