#zoom,
#zoom .curtain,
#zoom .indicator,
#zoom .arrows {
  height: 100%;
  width: 100%;
  position: absolute;;
  top: 0;
}

#zoom {
  position: fixed;
  top: 0;
  z-index: 5;
}

#zoom[hidden] {
  display: none;
}

#zoom .curtain {
  background: #000;
  opacity: 0.6;
}

#zoom .arrows {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  will-change: transform;
}

#zoom .arrows.zooming {
  transition: transform var(--transition-duration);
}

#zoom .arrows.grow {
  background-image: url(/style/images/arrows_grow.png);
  transform: scale(1);
}

#zoom .arrows.shrink {
  background-image: url(/style/images/arrows_shrink.png);
  transform: scale(0.4);
}

#zoom .indicator {
  background-repeat: no-repeat;
  background-position: center;
}

#zoom .indicator[data-cols="3"] {
  background-image: url(/style/images/3_col_grid.png);
}

#zoom .indicator.active[data-cols="3"] {
  background-image: url(/style/images/3_col_grid_active.png);
}

#zoom .indicator[data-cols="4"] {
  background-image: url(/style/images/4_col_grid.png);
}

#zoom .indicator.active[data-cols="4"] {
  background-image: url(/style/images/4_col_grid_active.png);
}