/* ========================== */
/* === Landscape/Portrait === */
/* ========================== */
.landscape {
  width: 97vh;
}
.portrait {
  width: 42vh;
}
/* ============= */
/* === Icons === */
/* ============= */
.close-icon,
.next-icon,
.prev-icon {
  width: 24px;
}
.close-icon {
  right: 40px;
  top: 40px;
}
.prev-icon {
  left: 40px;
}
.next-icon {
  right: 40px;
}
/* ============= */
/* === Panel === */
/* ============= */
.panel {
  height: 64vh;
  margin-bottom: 20vh;
  white-space: nowrap;
  font-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
}
.panel:first-child {
  margin-top: 11vh;
}
.panel::-webkit-scrollbar {
  height: 2px;
  background-color: transparent;
}
.panel::-webkit-scrollbar-thumb {
  background: #b1b0b0;
  border: 1px solid #b1b0b0;
  border-radius: 2px;
}
/* =================== */
/* === Panel Image === */
/* =================== */
.panel-image {
  vertical-align: top;
  margin-left: 32px;
}
.panel-image:last-child img {
  margin-right: 32px;
}
.panel-image img {
  transform: translate3d(0, 0, 0);
  transition: opacity 600ms;
}
.panel-image img:hover {
  opacity: 0.8;
  transition: opacity 400ms;
}
/* ======================== */
/* === Fullscreen Image === */
/* ======================== */
.fullscreen-image {
  transform: translate3d(0, 0, 0);
  transition: opacity 600ms;
}
.fullscreen-image.show {
  opacity: 1;
  transition: opacity 600ms;
}
.fullscreen-image.hide {
  opacity: 0;
  transition: opacity 0ms;
}
/**{outline:1px solid black;}*/