/*

* Justified Gallery - v3.6.4
* http://miromannino.com/projects/justified-gallery/
* Copyright (C) 2016 Miro Mannino
* Licensed under the MIT license.

*/

@caption-initial-opacity: 0.0; @caption-visible-opacity: 0.7;

.transition(@property:all, @duration: 500ms, @ease: ease-in) {

-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;

}

.opacity(@opacity: 1) {

filter: %("alpha(opacity=%d)", @opacity * 100);
opacity: @opacity;

}

.justified-gallery {

width: 100%;
position: relative;
overflow: hidden;

> a, > div, > figure {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  /* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
  .opacity(0.1);
  margin: 0;
  padding: 0;

  > img, > a > img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    border: none;
    .opacity(0);
  }

  > .caption {
    & when (@caption-initial-opacity = 0) {
      display: none;
    }
    & when (@caption-initial-opacity > 0) {
      display: initial;
      .opacity(@caption-initial-opacity);
    }
    position: absolute;
    bottom: 0;
    padding: 5px;
    background-color: #000000;
    left: 0;
    right: 0;
    margin: 0;
    color: white;
    font-size: 12px;
    font-weight: 300;
    font-family: sans-serif;
  }

  > .caption.caption-visible {
    display: initial;
    .opacity(@caption-visible-opacity);
    .transition(opacity);
  }

}

> .entry-visible {
  .opacity(1);
  background: none;

  > img, > a > img {
    .opacity(1);
    .transition(opacity);
  }
}

> .jg-filtered {
  display: none;
}

> .spinner {
  @spinnerDotWeight: 8px;
  @spinnerDotNum: 3;

  position: absolute;
  bottom: 0;
  margin-left: -(@spinnerDotWeight * 2) * @spinnerDotNum / 2;
  padding: 10px 0 10px 0;
  left: 50%;
  .opacity(1);
  overflow: initial;

  > span {
    display: inline-block;
    .opacity(0);
    width: @spinnerDotWeight;
    height: @spinnerDotWeight;
    margin: 0 (@spinnerDotWeight / 2) 0 (@spinnerDotWeight / 2);
    background-color: #000;
    border-radius: @spinnerDotWeight - 2px;
  }
}

}