*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

body.gallery .header {
  z-index: 11;
}

body.gallery .header .headerRight {
  display: none;
}

body.gallery .header .headerLeft *{
  color: white !important;

}

body .header .headerLeft *:not(body.gallery .header .headerLeft *){
  color: black;
  transition: 0.2s color;

}

body .header svg:not(body.gallery .header svg){
  fill: black !important;
  transition: 0.2s fill;
  cursor: pointer;
}

body.gallery .header svg{
  fill: white;
}
body.gallery .header{
  mix-blend-mode: difference;
}
body .header:not(body.gallery .header){
  mix-blend-mode: normal !important;
}

#scrollContainer {
  height: 100%; overflow-y: scroll;
  position: relative;
  pointer-events: all !important;
}
#fakeScroll {
  height: 100000vh; /* Very large for infinite feel */
  width: 100vw;
  position: relative;
  user-select: none;
}
.panel {
  position: absolute; top: 0; left: 0;
  width: 100vw; height: 100%;
  transform-origin: center center;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  background: transparent;
  z-index: 10;
}
.panel img, .panel video {
  max-height: 80%; max-width: 100%;
  object-fit: contain;
  top: 10%; left: 10%;
  user-select: none;
  pointer-events: none;
  transition: filter 0.7s ease;
  width: 100%;
}
.panel.visible {
  display: flex !important;
}

.scrollParent{
/*  border: 1px solid red;*/
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  left: 0;
  z-index: 10;
}

.scrollParent .scrollController{
  pointer-events: all !important;
}

.scrollParent1{
  top: 0;
}

.scrollParent2{
  display: flex;
  align-items: center;
  justify-content: center;
  top: calc(100% - (var(--footer-h) / 2));
/*  background: black;*/
}
.scrollParent2 img.background,
.scrollParent2 video.background {
  position: absolute;
  width: 100%; height: 100%; object-fit: cover;
}
.scrollParent2 img.foreground,
.scrollParent2 video.foreground {
  position: absolute;
  max-height: 80%; max-width: 100%; object-fit: contain;
}

.bgPanel {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transform: translate(0px, 0px) scale(0);
  transition: none;
}

.bgPanel img, .bgPanel video{
  max-height: 80%; /* NOTE: change also Gallery::getBgShift */
  max-width: 100%; /* NOTE: change also Gallery::getBgShift */
  /* height: 100% !important; width: 100% !important; */
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

@media screen and (orientation:portrait){
  .scrollParent2 img.foreground, .scrollParent2 video.foreground, .panel img, .panel video{
    max-width: 80%
  }
}