@import "../../scss/lib/bootstrap/variables";
@import "../../scss/lib/bootstrap/mixins";

// -----------------------------------------------------------------
#gallery-items {
  width: 100%;
  margin:0 0 $baseLineHeight;
  padding-top: 0;
  background: $grayLighter;
  &.thumbnails {
    background: none;
    > li > .fancybox {
      display: block;
      position: relative;
      overflow:hidden;
      &:after {
        position: absolute;
        z-index: 5;
        content: "\f00e";
        color: #fff;
        font-family: FontAwesome;
        font-size: 24px;
        display: block;
        right: 5px;
        bottom: 5px;
        @include opacity(75);
      }
    }
    > li > .fancybox > img {
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;

    }
  }
  .rsOverflow {height: 400px !important;}
  .rsOverflow, .rsSlide {
    background: none;
  }
  .rsImg {margin-top: 10px !important;}
  .rsGCaption {
    font-size: $baseFontSize;
    padding: 12px 0 16px;
    background: darken($grayLighter, 10%);
    color:$black;
    width: 100%;
    position: static;
    float: left;
    left: auto;
    bottom: auto;
    text-align: center;
  }
  .rsGCaption span {
    display: block;
    clear: both;
    font-size: $baseFontSize + 2;
    font-weight: bold;
  }
  /* Scaling transforms */
  .rsSlide img {
    @include opacity(45);
    @include transition(all 0.3s ease-out);
    @include scale(0.9);
    @include backface-visibility(hidden);
  }
  .rsActiveSlide img {
    @include opacity(100);
    @include scale(1);
  }
}