/* For the close icon */
@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("./close-icon/fa-light-300.eot");
  src: url("./close-icon/fa-light-300.eot?#iefix") format("embedded-opentype"), url("./close-icon/fa-light-300.woff2") format("woff2"), url("./close-icon/fa-light-300.woff") format("woff"), url("./close-icon/fa-light-300.ttf") format("truetype"), url("./close-icon/fa-light-300.svg#fontawesome") format("svg");
}

/* Image size */
.custom-lightbox .lg-img-wrap {
  max-width: 80%;
  margin: auto;
}

/* Close icon */
.custom-lightbox .lg-toolbar .lg-icon {
  font-family: 'Material Symbols Outlined' !important;
  color: var(--black);
}

.lg-toolbar .lg-close:after {
  content: '\e5cd';
}

/* Title and year */
.custom-lightbox .lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
  text-align: left;
  padding-bottom: 1rem;
}

.custom-lightbox .lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html span {
  color: var(--black);
  font-size: .75rem;
  font-family: 'PP Neue Montreal Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.custom-lightbox .lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html h5 {
  font-size: 1.75rem;
  color: var(--black);
  font-weight: 400;
}

/* Arrows */
.custom-lightbox .lg-outer .lg-prev, .custom-lightbox .lg-outer .lg-next {
  padding: 0;
  background-color: transparent;
}

.custom-lightbox .lg-outer .lg-prev {
  transform: rotate(180deg);
}

.custom-lightbox .lg-outer .lg-prev svg, .custom-lightbox .lg-outer .lg-next svg {
  stroke: var(--black);
  width: 4rem;
}

.lg-prev::after, .lg-next::after, .lg-prev::before, .lg-next::before {
  content: '';
}

/* Loader */
.lg-outer .lg-item:not(.lg-start-end-progress) {
  background: url('../../images/loader.gif');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 120px;
}

/* Custom background colors */
main.gli-ultimi-giorni-dell-umanita ~ .custom-lightbox .lg-backdrop {
  background-color: var(--green);
}

main.gli-indifferenti ~ .custom-lightbox .lg-backdrop {
  background-color: var(--orange);
}

main.last-summer ~ .custom-lightbox .lg-backdrop {
  background-color: var(--salmon);
}

main.likemeback ~ .custom-lightbox .lg-backdrop {
  background-color: var(--pink);
}

/* Mobile */
@media screen and (max-width: 767px) {
  .custom-lightbox .lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
    padding-bottom: 2rem;
  }
}