/* -- gallery_bookmarks.css -- */
/* -- Parallax gallery bookmark styling -- */
.parallax-bookmark-container {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 50vh;

  z-index: 1;

  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    rgba(0, 0, 0, 0) 100%
  );

  transition: all 0.5s ease, top 0s ease !important;
  pointer-events: none;
}
.parallax-bookmark-container.no-bookmarks {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0) 60%
  );
}
.parallax-bookmark-container.minimised > .project-parallax-preview-container > .parallax-item-preview {
  pointer-events: none;
}
.project-parallax-dots-container {
  position: absolute;
  top: 90%;
  height: 10%;
  width: 100%;

  display: flex;
  justify-content: center;

  pointer-events: all;
}
.project-parallax-preview-wrapper {
  position: absolute;
  top: 0%;
  height: 90%;
  width: 100%;

  display: flex;
  justify-content: center;
  overflow: visible;
}

/* -- Bookmark interface -- */
.project-parallax-text-container {
  display: flex;
  position: absolute;
  top: 20%;
  left: 0px;
  height: 10%;
  width: 100%;

  justify-content: center;
  transition: all 0.5s ease;
}
.no-bookmarks .project-parallax-text-container {
  top: 60%;
}
.project-parallax-preview-container {
  display: flex;
  position: absolute;
  top: 35%;
  left: 0px;
  height: 40%;
  width: 100%;
}
.parallax-bookmark-dot {
  width: 2dvh;
  height: 2dvh;

  border-radius: 50%;
  border: 0.1dvh solid white;
  margin-left: 2dvh;

  transition: all 1s ease;
}
.parallax-bookmark-dot.fade-in {
  animation: bookmark-dot-fade-in 1s forwards;
}
.parallax-bookmark-dot.fade-out {
  animation: bookmark-dot-fade-out 0.5s forwards;
  pointer-events: none;
}
.parallax-bookmark-dot.filled {
  background-color: white;
}
.parallax-bookmark-dot:first-child {
  margin-left: 0px;
}
.project-parallax-preview-container {
  transition: all 0.5s ease;
}

.bookmarks-title {
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  font-family: "Barlow";
  font-size: 3dvh;
  font-weight: 100;
  text-transform: uppercase;

  padding: 0.5dvh;
  padding-left: 1vw;
  padding-right: 1vw;

  pointer-events: all;
  vertical-align: middle;
}
.project-parallax-bookmark-label-text {
  margin-left: 0.5vw;
}
.bookmark-text-icon, .bookmark-minimise-icon {
  position: relative;
  top: 10%;
  height: 3dvh;
  width: 3dvh;
}
.bookmark-minimise-icon {
  margin-left: 0.75vw;
  transition: all 0.5s ease;
}

/* -- No bookmarks label -- */
.project-parallax-no-bookmark-label-text {
  display: flex;
  position: absolute;
  top: 75%;
  left: 10%;
  height: 20%;
  max-height: 20%;
  width: 80%;

  color: white;
  font-family: "Barlow";
  font-size: 2.5dvh;
  font-weight: 100;

  justify-content: center;
  margin: 0.5dvh;
  transition: all 0.5s ease;
}
.project-parallax-no-bookmark-label-text.hidden {
  opacity: 0;
}
.no-bookmark-label-image-icon {
  height: 2dvh;
  width: 2dvh;
}

/* -- Actual item preview -- */
.parallax-item-preview {
  position: relative;
  top: 0px;
  left: auto;
  min-width: 24dvh;
  min-height: 24dvh;

  box-shadow: 0px 0px 4dvh 0px rgba(0, 0, 0, 0.8);

  transform: perspective(20dvh) rotateY(-4deg);
  pointer-events: all;

  transition: all 0.5s ease, z-index 1ms linear !important;
}
.parallax-item-preview .parallax-item-colour-bg:after {
  position: absolute;

  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;

  background-color: rgb(0, 0, 0);
  opacity: 1;

  content: "";
  z-index: -1;
}
.parallax-item-preview > span {
  position: absolute;
  color: white;
}
.parallax-item-preview > .parallax-major-project-text {
	font-size: 3dvh;

	margin-left: 3.5vw;
	right: 2dvh;
	bottom: 2dvh;
}

/* -- Disable leftover buttons -- */
.parallax-item-preview > .bookmark, .parallax-item-preview > .pin {
  pointer-events: none;
}