/*--------------------*/
/* OPTIMIZATION */
/*--------------------*/
/* Optimizing the speed and responsivity of the website (font loading and links/buttons clicking on mobile) */
@font-face {
  font-display: swap;
}
a, button {
  -ms-touch-action: manipulation; /* IE10  */
  touch-action: manipulation; /* IE11+ */
}


/* Scrollbar */
/* Mozilla firefox */
* {
  scrollbar-width: thin;
}
/* Global scrollbar */
* ::-webkit-scrollbar {
  width: 7px;
}
/* Scrollbar thumb */
* ::-webkit-scrollbar-thumb {
  border-radius: 7px;
}



/*--------------------*/
/* LAYOUT */
/*--------------------*/
/* Layout wrapper */
#pageWrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Sidebar and page container */
#pageContainer {
  flex: 1;
  display: flex;
  flex-direction: row;
}

/* Sidebar */
#sidebar {
  flex: initial;
  width: 142px;
}

/* Page content */
#page {
  flex: 1;
}


/* Position and size of the sidebar links */
#sidebar .accordion-body a {
  display: block;
  width: 100%;
}


/* Grid items content holder's layout (thumbnails' content) */
.grid-item-content {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* Thumbnails' title shadow animation on hover (up translation) */
.grid-item-content:hover .thumbnail-shadow {
  position: absolute;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 140%;
  z-index: 2;
}

/* Thumbnails' title layout */
.grid-item-content .thumbnail-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  z-index: 3;
}

/* Actual thumbnail's image for photos (class on <img>) */
.thumbnail-photo {
  object-fit: scale-down;
  object-position: 50% 50%;
  width: 100%;
  height: 400px;
  z-index: 1;
}
/* Actual thumbnail's image for videos (class on <img>) */
.thumbnail-video {
  object-fit: scale-down;
  object-position: 50% 50%;
  margin-left: 10%;
  width: 80%;
  height: 300px;
  z-index: 1;
}


/* Footer */
footer {
  z-index: 99
}