/* Hide scrollbar for Chrome, Safari and Opera */
.horizontal-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.horizontal-scroll-wrapper {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
} 
.horizontal-scroll-wrapper{
  position:absolute;
  display:block;
  top:0;
  left:0;
  width: calc(100vh - 80px);
  height:100vw;
  margin:0;
  padding: 30px;
  background: #FFFFFF;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transform: rotate(-90deg) translate3d(0, calc(-100vh + 80px), 0);
          transform: rotate(-90deg) translate3d(0, calc(-100vh + 80px), 0);
  transform-origin:right top;
}
.horizontal-scroll-wrapper > div{
  position: relative;
  display:block;
  width: calc(100vh - 140px);
  height: calc(100vh - 140px);
  background: no-repeat center center / cover;
  /*padding:5px;*/
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(90deg) translate3d(0, calc(-100vh + 140px), 0);
          transform: rotate(90deg) translate3d(0, calc(-100vh + 140px), 0);
  cursor: pointer;
}

.horizontal-scroll-wrapper > div:not(:first-child) {
  margin-top: 30px;
}


#wrap-img{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

/* Modal Content (Image) */
.modal-content-normal {
  max-width: 100%;
  max-height: 80%;
  cursor: zoom-in;
}

.modal-content-zoom {
  width: auto;
  height: auto;
  cursor: zoom-out;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  /*margin: auto;*/
  display: block;
  width: 80vw;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  box-sizing: border-box;
  /*height: 150px;*/
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}