img.moshe-img {max-width: 10vw !important;
              max-height: 20vh !important;
  }
 
  
  * {
    box-sizing: border-box;
  }
 

li.nav-box {border: white solid 1px;
    max-width: 20vw;
      margin-left: 3vw;
    margin-bottom: 1.5vh;
    font-size: 0.9rem;
    color: black;}
    .nav-col ul#js-menu {
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        width: 15vw;
        max-width: 20vw;
      font-size: 0.5rem;
      margin-top: -1vh;
      margin-left: -1vw;   
      z-index: 99;
   }
   #carousel-container {
    width: 80vw;
    position: relative;
}
.slick-carousel {margin-left: 20vw;
                  width: 50vw;
                  max-height: 80vh;

               }
.slick-slide {
  margin-top: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slick-slide img {
    width: 100%;
    height: auto;
    text-align: center;
}
.caption {
  position: absolute;
  top: 40px; /* Adjust this value as needed */
  left: 87vw;
  transform: translateX(-50%);
    color: black;
  padding: 10px;
  border-radius: 5px;
  white-space: nowrap;
  font-size: 1.25rem;
  margin-top: 10vh;
  width: 20vw;
  text-align: center
}
.hebCaption {direction: rtl}
#js-menu {top: 20vh}
  li.nav-item {font-size: 1rem;}
  .nav-col li {list-style: none;
              text-align: center;
      }
 
    #engTxt {display: none;}
  

  * {
    font-family: 'Lato', sans-serif;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
  } 

  
  .slick-prev {
      margin-left:  -20px;
     }
     .slick-next {
      margin-right: -20px;
     } 
     .slick-prev:before {
      content: "<";
    }
    .slick-next:before {
      content: ">";
    }
 
    .slick-next:hover, .slick-prev:hover {
      background-color:   rgb(7, 2, 7);
      color: white;
    }
       .slick-next:before, .slick-prev:before {
      background-color: rgb(189, 193, 249); 
      color: black;
      padding: 4px;
      padding-top: 2px;
      border: 1px solid black;
          font-size: 30px;
      font-weight: bold;
    } 
    ul.slick-dots {margin-bottom: -3vh;}

    .flex-container {
      position: absolute;
      top: 5vh;
      right: 5vw;
      text-align: center;
      overflow-wrap: break-word;
      display: flex;
      flex-direction: column;
    
      width: 14vw;
      color:  #CD853F;
      background-color: #f4eee49d;
      align-items: flex-start;
      border-top: 1px solid white;
      border-left: 1px solid white;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
      height: 40vh;
      max-height: 40vh;
      max-width: 15vw 

                 } 
      */  
    div.flex-items {
                    white-space: initial;
                    margin: 0 auto;
                    margin-top: -5vh;
                    text-align: center;
                    margin-bottom: 3vh;
                } 
    .slide {
            position: relative;
            }                
    hr {width: 75%;
        margin: auto;
        height: 2px;
        background-color: white;
        border: none; 
        margin-top: 15px;               
        margin-bottom: 15px}                

/* Caption styles */
#captions .caption {
  display: none;
  color: black;
  padding: 10px;
  border-radius: 5px;
  white-space: initial;
  font-size: 1.25rem;
  margin-top: 10vh;
  width: 100%;
  text-align: center;
}

#captions .caption.active {
  display: block;
}
.row {
  width: 95%;
  display: flex;
  margin: auto
}  
/*
uncomment for zoom
.slick-slide img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  cursor: zoom-in;
}
  */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.9); 
}
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
.modal-content, #caption {  
  animation-name: zoom;
  animation-duration: 0.6s;
}
@keyframes zoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
#zoomEngTxt {color: green;
           position: absolute;
           top: 0;
           left: 5vw;
          }