/**
 * $JA#COPYRIGHT$
 */
 
// VARIABLES & MIXINS
// ------------------
@import "../../../less/vars.less"; // Modify this for custom colors, font-sizes, etc


// ----------------------------------------
// GALLERY STYLE
// ----------------------------------------
.acm-gallery {

  .btn {
    margin-top: @t3-global-margin;
    > fa {
      margin-left: 5px;
    }
  }

  .isotope-layout {
    overflow: hidden;

    .custom.bg-image {
      padding: 0;
      position: static;
    }

    .isotope{
      &:after {
        content: '';
        display: block;
        clear: both;
      }

      .mask {
        background: @black;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
        .opacity(0.6);
      }
    }

    // Set Width
    // -----------------------
    // Mobile
    .grid-xs-1 { 
      width: 100%;

      &.item-2 {
        width: 100%;
      }
    }

    .grid-xs-2 { 
      width: 50%;
      
      &.item-2 {
        width: 100%;
      }
    }

    .grid-xs-3 { 
      width: 33.3%;
      
      &.item-2 {
        width: 66.6%;
      }
    }

    .grid-xs-4 { 
      width: 25%;
      
      &.item-2 {
        width: 50%;
      }
    }

    .grid-xs-5 { 
      width: 20%;
      
      &.item-2 {
        width: 40%;
      }
    }

    .grid-xs-6 { 
      width: 16.6%;
      
      &.item-2 {
        width: 33.2%;
      }
    }

    .grid-xs-7 { 
      width: 14.28%;
      
      &.item-2 {
        width: 28.56%;
      }
    }

    .grid-xs-8 { 
      width: 12.5%;
      
      &.item-2 {
        width: 25%;
      }
    }

    .grid-xs-9 { 
      width: 11.1%;
      
      &.item-2 {
        width: 22.2%;
      }
    }

    .grid-xs-10 { 
      width: 10%;
      
      &.item-2 {
        width: 20%;
      }
    }

    // Tablet
    @media screen and (min-width: @screen-sm-min) {
      .grid-sm-1 { 
        width: 100%;
      
        &.item-2 {
          width: 100%;
        }
      }

      .grid-sm-2 { 
        width: 50%;
      
        &.item-2 {
          width: 100%;
        }
      }

      .grid-sm-3 { 
        width: 33.3%;
      
        &.item-2 {
          width: 66.6%;
        }
      }

      .grid-sm-4 { 
        width: 25%;
      
        &.item-2 {
          width: 50%;
        }
      }

      .grid-sm-5 { 
        width: 20%;
      
        &.item-2 {
          width: 40%;
        }
      }

      .grid-sm-6 { 
        width: 16.6%;
      
        &.item-2 {
          width: 33.2%;
        }
      }

      .grid-sm-7 { 
        width: 14.28%;
      
        &.item-2 {
          width: 28.56%;
        }
      }

      .grid-sm-8 { 
        width: 12.5%;
      
        &.item-2 {
          width: 25%;
        }
      }

      .grid-sm-9 { 
        width: 11.1%;
      
        &.item-2 {
          width: 22.2%;
        }
      }

      .grid-sm-10 { 
        width: 10%;
      
        &.item-2 {
          width: 20%;
        }
      }
    }

    // Desktop
    @media screen and (min-width: @screen-md-min) {
      .grid-md-1 { 
        width: 100%;
      
        &.item-2 {
          width: 100%;
        }
      }

      .grid-md-2 { 
        width: 50%;
      
        &.item-2 {
          width: 100%;
        }
      }

      .grid-md-3 { 
        width: 33.3%;
      
        &.item-2 {
          width: 66.6%;
        }
      }

      .grid-md-4 { 
        width: 25%;
      
        &.item-2 {
          width: 50%;
        }
      }

      .grid-md-5 { 
        width: 20%;
      
        &.item-2 {
          width: 40%;
        }
      }

      .grid-md-6 { 
        width: 16.6%;
      
        &.item-2 {
          width: 33.2%;
        }
      }

      .grid-md-7 { 
        width: 14.28%;
      
        &.item-2 {
          width: 28.56%;
        }
      }

      .grid-md-8 { 
        width: 12.5%;
      
        &.item-2 {
          width: 25%;
        }
      }

      .grid-md-9 { 
        width: 11.1%;
      
        &.item-2 {
          width: 22.2%;
        }
      }

      .grid-md-10 { 
        width: 10%;
      
        &.item-2 {
          width: 20%;
        }
      }
    }

    // Caption
    .caption {
      color: @white;
      font-size: @font-size-large;
      position: absolute;
      top: 50%;
      text-align: center;
      left: 0;
      width: 100%;
      z-index: 3;
      .animation(eff-2 2s);
      .translateY(-50%);

      // Control screen tablet
      @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
        font-size: @font-size-h3;
      }

      // Control screen desktop
      @media screen and (min-width: @screen-md-min) {
        font-size: @font-size-large * 3;
      }

      span {
        font-size: @font-size-h3;

        // Control screen tablet
        @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
          font-size: @font-size-large * 5;
        }

        // Control screen tablet
        @media screen and (min-width: @screen-md-min) {
          font-size: @font-size-large * 7;
        }
      }

      p {
        margin-bottom: 0;
      }

    }

    // Item Isotop
    .item {
      background: transparent;
      float: left;
      
      a {
        display: block;
        overflow: hidden;
      }

      // Control screen tablet
      @media (min-width: @screen-sm-min) and (max-width: 1024px) {
        &.item-2 {
          margin-left: -1px;
        }
      }

      &.effect {
        &:nth-child(n) {
          .animation(effect-item-2 3s);
        }

        &:nth-child(2n) {
          .animation(effect-item-2 9s);
        }

        &:nth-child(3n) {
          .animation(effect-item-1 9s);
        }

        &:nth-child(4n) {
          .animation(effect-item-1 9s);
        }

        &:nth-child(5n) {
          .animation(effect-item-2 5s);
        }
      }

      .item-image {
        overflow: hidden;
      }

      img {
        margin: 0;
        width: 100%;
      }

    }
  }


  //
  // Animations Styles
  // ----------------

  // Animation None
  &.style-none {
    .item-details {
      h4 {
        font-size: @font-size-large;
        font-weight: @font-weight-bold;
        color: @gray-dark;
        margin: @t3-global-margin auto 0;
        a {
          color: @gray-dark;
          &:hover, &:focus, &:active {
            color: @link-hover-color;
            text-decoration: none;
          }
        }
      }
      span {
        display: block;
        color: @gray-light;
        margin-top: @t3-global-margin / 4;
      }
    }
  }

  // Animation Swiper
  &.style-swiper {
    .item {
      .item-image {
        height: 260px;
        overflow: hidden;
        border: 1px solid @t3-border-color;
        position: relative;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-position: 0 0 !important;
        .transition(all 3.5s linear 0.4s);

        .item-mask {
        	width: 100%;
        	height: 100%;
        	position: absolute;
        }
      }

      &:hover {
        .item-image {
          background-position: 0 100% !important;
        }
      }
    }

    .item-details {
      h4 {
        font-size: @font-size-large;
        font-weight: @font-weight-bold;
        color: @gray-dark;
        margin: @t3-global-margin auto 0;
				min-height: @line-height-computed*2;
        a {
          color: @gray-dark;
          &:hover, &:focus, &:active {
            color: @link-hover-color;
            text-decoration: none;
          }
        }
      }

      span {
        display: block;
        color: @gray-light;
        margin-top: @t3-global-margin / 4;
      }
    }
  }

  // Animation Scale
  &.style-scale {
    .item {
      .item-mask {
        background-color: @black;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        display: none;
        .opacity(0);
        .transition(all 500ms);
      }

      img {
        .transition(all 500ms);
      }
    }

    .item-details {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 2;
      font-size: 0;
      .translate(0px, -50%);
      .opacity(0);
      .transition(all 500ms);

      h4 {
        margin-top: 0;
        margin-bottom: @t3-global-margin/2;
        text-transform: uppercase;
        font-weight: @font-weight-light;
        font-size: 0;
        .transition(all 500ms);

        a, a:hover, a:focus, a:active {
          color: @white;
        }
      }

      span {
        color: @white;
        .opacity(0.8);
      }
    }

    // Control screen tablet
    @media (min-width: @screen-md-min) {
      .item:hover {
        img {
          .scale(1.1);
        }

        .item-details {
          font-size: @font-size-base;
          .opacity(1);

          h4 {
            font-size: @font-size-h3;
          }
        }

        .item-mask {
          display: block;
          .opacity(0.3);
        }
      }
    }
  }

  // Animation Lily
  &.style-lily {
    .item {
      .item-image {
        background-color: darken(@brand-primary, 10%);
      }

      img {
        opacity: 1;
                transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
        -webkit-transition: opacity 0.35s ease 0s, -webkit-transform 0.35s ease 0s;

        // Control screen desktop
        @media screen and (min-width: @screen-sm-min) {
          width: calc(~"100% + "50px);
          width: -moz-calc(~"100% + "50px);
          .translate3d(-40px, 0px, 0px);
        }
      }

      .item-details {
        bottom: 0;
        height: 50%;
        text-align: left;
        top: auto;
        position: absolute;
        left: 0;
        width: 100%;
        padding: 0 @t3-global-padding;
        backface-visibility: hidden;
				
				@media (min-width: @screen-md-min) {
					.translate3d(0px, 40px, 0px);
					.transition(transform 0.35s ease 0s);
				}

        @media (max-width: @screen-md-max) {
					.translate3d(0px, 0px, 0px);
        }

        h4 {
          font-size: @font-size-h3;
          font-weight: @font-weight-light;
          text-transform: uppercase;
          margin-top: 0;
          .transition(0.35s);

          a, a:hover, a:focus, a:active {
            color: @white;
          }
        }

        span {
          color: rgba(255, 255, 255, 0.6);
          .opacity(0);
					.transition(0.35s);
        }

        @media (max-width: @screen-md-max) {
          height: auto;
          h4 {
            font-size: @font-size-base;
            .translate3d(0px, 0, 0px);
          }
        }
      }

      // Control screen tablet
			@media (min-width: @screen-md-min) {
        &:hover {
          img {
            .opacity(0.7);
            .translate3d(0px, 0px, 0px);
          }
					
					.item-details {
						.translate3d(0px, 0px, 0px);
					}

          .item-details span {
            .opacity(1);
						.transition(0.35s);
          }

        }
      }
    }
  }

  // Animation Sadie
  &.style-sadie {
    .item {
      overflow: hidden;
      .item-image {
        background-color: darken(@brand-primary, 30%);
      }

      img {
        .opacity(0.8);
      }

      .item-details {
        text-align: center;

        h4 {
          font-size: @font-size-h3;
          font-weight: @font-weight-light;
          position: absolute;
          margin-top: 0;
          left: 0;
          right: 0;
          top: 50%;
          color: @white;
          z-index: 2;
                  transition: transform 0.35s ease 0s, color 0.35s ease 0s;
          -webkit-transition: -webkit-transform 0.35s ease 0s, color 0.35s ease 0s;
          .translate3d(0px, -50%, 0px);
          .opacity(0.8);

          a, a:hover, a:focus, a:active {
            color: @white;
          }

          @media (max-width: @screen-md-max) {
            font-size: @font-size-base;
          }
        }

        span {
          bottom: 0;
          left: 0;
          opacity: 0;
          color: @white;
          padding: @t3-global-padding;
          position: absolute;
          width: 100%;
          z-index: 2;
          .translate3d(0px, 10px, 0px);
                  transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
          -webkit-transition: opacity 0.35s ease 0s, -webkit-transform 0.35s ease 0s;
          
          @media (max-width: @screen-md-max) {
            display: none;
          }
        }
      }

      .item-mask {
        background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
        .opacity(0);
        .translate3d(0px, 50%, 0px);
      }

      // Control screen tablet
      @media (min-width: @screen-md-min) {
        &:hover {
          img {
          }

          .item-mask,
          .item-details span {
            .translate3d(0px, 0px, 0px);
            .opacity(1);
          }

          .item-details h4 {
            color: @white;
                    transform: translate3d(0px, -50%, 0px) translate3d(0px, -40px, 0px);
            -webkit-transform: translate3d(0px, -50%, 0px) translate3d(0px, -40px, 0px);

            a, a:hover, a:focus, a:active {
              color: @white;
            }
          }
        }
      }
    }
  }

  // Animation Zoe
  &.style-zoe {
    .item {
      overflow: hidden;
      .item-image {
        background-color: darken(@brand-primary, 30%);
      }

      img {
        .opacity(0.8);
      }

      .item-details {
        background: @white;
        bottom: 0;
        color: @gray-dark;
        padding: @t3-global-padding;
        top: auto;
        left: 0;
        position: absolute;
        width: 100%;
        .translate3d(0px, 100%, 0px);
        .transition(transform 0.35s ease 0s);

        h4, span {
          .translate3d(0px, 200%, 0px);
          .transition(transform 0.35s ease 0s);
        }

        h4 {
          margin: 0;
        }

        span {
          backface-visibility: hidden;
          top: -(@t3-global-padding * 5);
          color: @white;
          padding: @t3-global-padding;
          position: absolute;
          text-transform: none;
          left: 10%;
          right: 10%;
          text-align: center;
          .opacity(0);
          .transition(opacity 0.35s ease 0s);
        }
      }

      // Control screen tablet
      @media (min-width: @screen-md-min) {
        &:hover {
          .item-details,
          .item-details h4,
          .item-details span {
            .translate3d(0px, 0px, 0px);
          }

          .item-details span {
            .opacity(1);
          }
        }
      }
    }
  }

  // Animation Flip
  &.style-flip {
    .item {
      position: relative;

      .item-image {
                transform: perspective(800px) rotateY(0deg);
        -webkit-transform: perspective(800px) rotateY(0deg);
        .transition(all 0.6s ease 0s);
      }

      .item-details {
        background: @black;
        color: @white;
        .opacity(0);
        backface-visibility: hidden;
        height: 100%;
        position: absolute;
        width: 100%;
        padding: @t3-global-padding;
        left: 0;
        top: 0;
        text-align: center;
                transform: perspective(800px) rotateY(180deg);
        -webkit-transform: perspective(800px) rotateY(180deg);
        .transition(all 0.6s ease 0s);

        h4 {
          display: block;
          margin-bottom: @t3-global-margin;

          a, a:hover, a:focus, a:active {
            color: @white;
            display: inline-block;
            padding-bottom: @t3-global-padding/2;
            border-bottom: 2px solid @white;
          }
        }
      }

      // Control screen tablet
      @media (min-width: @screen-md-min) {
        &:hover {
          .item-image {
                    transform: perspective(800px) rotateY(-179.9deg);
            -webkit-transform: perspective(800px) rotateY(-179.9deg);
          }

          .item-details {
            .opacity(1);
                    transform: perspective(800px) rotateY(0deg);
            -webkit-transform: perspective(800px) rotateY(0deg);
          }
        }
      }
    }
  }
}

// DARK STYLE
// --------------
.style-dark .acm-gallery {
  &.style-swiper .item-details h4 {
    a {
      color: @white;
    }

    span {
      color: @white;
    }
  }
}

// MISC & FIX BUG IE 8
// --------------------

// Popup Image Gallery
.ekko-lightbox {
  .modal-loading {
    display: none;
  }

  &.fade {
    .translateY(-100%);
    .opacity(0);
    .transition(all 1.2s);
  }

  &.fade.in {
    .translateY(0);
    .opacity(1)
  }

  .modal-dialog {
    margin-top: 15%;

    // Control screen tablet/ desktop
    @media screen and (min-width: @screen-xs-min) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: auto;
      .translate(-50%,-50%) !important;
    }
  }

  // Button close
  .modal-header {
    border: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;

    .close {
      background: @white;
      color: @black;
      height: 35px;
      margin: 0;
      width: 35px;
    }
  }

  // Body
  .modal-body {
    padding: 0;

    // Button 
    .ekko-lightbox-nav-overlay {
      position: absolute;
      top: 50%;
      margin-top: -28px;
      width: 100%;

      a {
        background: rgba(0,0,0,0.5);
        color: @white;
        padding: (@t3-global-padding - 6)!important;

        &.glyphicon-chevron-right {
          float: right;
        }
      }
    }
  }

  .img-responsive {
    margin: 0;
  }
}

// Effect 1
@keyframes effect-item-1 {
  0% {.scale(0.3);}
  20% {.scale(0.3);}
  100% {.scale(1);}
}

@-webkit-keyframes effect-item-1 {
  0% {.scale(0.3);}
  20% {.scale(0.3);}
  100% {.scale(1);}
}

@keyframes effect-item-2 {
  0% {.scale(0.3);}
  100% {.scale(1);}
}

@-webkit-keyframes effect-item-2 {
  0% {.scale(0.3);}
  100% {.scale(1);}
}

// Effect 2
@keyframes eff-2 {
  0% {top: 40%; .opacity(0);}
  100% {top: 50%; .opacity(1);}
}

@-webkit-keyframes eff-2 {
  0% {top: 40%; .opacity(0);}
  100% {top: 50%; .opacity(1);}
}

// FIX BUG IE 8
.ie8 {
  // Isotope
  .isotope-layout {
    .caption {
      top: 12%;
    }

    .item, .grid-sizer {
      margin-left: -0.5px;
    }
  }

  // Popup gallery
  .ekko-lightbox {
    .modal-dialog {
      position: relative;
      top: 5%;
      left: 0;
      width: 600px!important;
      overflow: hidden;
    }

    .img-responsive {
      max-width: 100%;
    }
  }
}

.full-screen {
  overflow: hidden;
  position: relative;

  // Control screen tablet/mobile
  @media screen and (max-width: @screen-sm-max) {
    height: auto !important;
  }
}


// Import Style
@import "style-3.less";