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

// ------------------------------------------------
// SLIDESHOW STYLE OWL
// ------------------------------------------------
.acm-slideshow .owl-carousel {
  cursor: move;
  padding: 0;
  overflow: hidden;
  background: @gray-dark-max;

  .owl-wrapper-outer {
    z-index: 0;
  }

  // Mask
  .item {
    position: relative;
    overflow: hidden;

    // Image background
    .img-bg {
      // Mobile view
      @media (max-width: @screen-sm-max) {
        max-height: 600px;
      }

      // Mobile view
      @media (max-width: @screen-xs-max) {
        max-height: 500px;
      }
    }

    .mask {
      background: @brand-primary;
      position: absolute;
      top: 0;
      right: 50%;
      height: 100%;
      margin-right: 205px;
      .opacity(0);

      // Medium desktop view
      @media (max-width: @screen-md-max) {
        margin-right: 172px;
      }

      // Tablet view
      @media (max-width: @screen-sm-max) {
        background: @brand-primary;
        right: 0;
        margin: 0;
        transform: translateX(0);
         -webkit-transform: translateX(0);
        width: 100%;
        .opacity(0.4);
      }

      &:before {
        border-left: 190px solid @brand-primary;
        border-bottom: 720px solid transparent;
        position: absolute;
        content: "";
        left: 100%;
        top: 0;

        // Tablet view
        @media (max-width: @screen-sm-max) {
          display: none;
        }
      }
    }
  }

  // Slideshow content
  .slider-content {
    background: transparent;
    position: absolute;
    top: 142px;
    left: 50%;
    transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
    text-align: left;

    // Mobile view
    @media (max-width: @screen-xs-max) {
      top: 80px;
      width: 100%;
    }

    .slider-content-inner {
      width: 33.333333%;

      // Tablet view
      @media (max-width: @screen-sm-max) {
        width: 50%;
      } 

      // Mobile view
      @media (max-width: @screen-xs-max) {
        width: 100%;
      }

      // Lable highlight
      > span {
        background-color: @brand-primary;
        color: @white;
        display: inline-block;
        font-size: 12px;
        margin-bottom: 20px;
        padding: 5px 8px;
        text-transform: uppercase;
        font-weight: @font-weight-medium;
      }

      // Title
      > h1 {
        color: @white;
        font-weight: 700;
        line-height: 48px;
        margin-top: 0;
        margin-bottom: @t3-global-margin;

        // Mobile view
        @media (max-width: @screen-sm-max) {
          font-size: @font-size-h2;
          line-height: 40px;
        }

        a {
          color: @white;
        }
      }

      // Description
      > p {
        color: rgba(255,255,255,0.8);
        margin-bottom: @t3-global-margin;
        font-size: @font-size-h4;
        font-weight: @font-weight-500;
        line-height: 1.7;
      }
    }
  }

  // Effect
  .mask {
     transform: translateX(-70%);
      -webkit-transform: translateX(-70%);
      .opacity(0);
      transition: all 1.3s;
      transition-property: transform, opacity;
  }

  .ja-animation {
    transform: translateY(70%);
      -webkit-transform: translateY(70%);
      .opacity(0);
      transition: all 1.3s;
      transition-property: transform, opacity;
  }

  &.effect-normal .ja-animation {
    &[data-delay-transtion="1"] {
       transition-delay: 100ms;
    }

    &[data-delay-transtion="2"] {
       transition-delay: 300ms;
    }

    &[data-delay-transtion="3"] {
       transition-delay: 600ms;
    }

    &[data-delay-transtion="4"] {
       transition-delay: 900ms;
    }
  }

  // Effect Normal
  &.effect-fast .ja-animation{
    &[data-delay-transtion="1"] {
       transition-delay: 50ms;
    }

    &[data-delay-transtion="2"] {
       transition-delay: 150ms;
    }

    &[data-delay-transtion="3"] {
       transition-delay: 300ms;
    }

    &[data-delay-transtion="4"] {
       transition-delay: 450ms;
    }
  }

   // Effect Normal
  &.effect-slow .ja-animation{
    &[data-delay-transtion="1"] {
       transition-delay: 200ms;
    }

    &[data-delay-transtion="2"] {
       transition-delay: 600ms;
    }

    &[data-delay-transtion="3"] {
       transition-delay: 1200ms;
    }

    &[data-delay-transtion="4"] {
       transition-delay: 1800ms;
    }
  }

  .owl-item.active {
    .mask {
      transform: translateX(0);
        -webkit-transform: translateX(0);
      .opacity(0.8);
    }

    .ja-animation {
      transform: translateY(0);
        -webkit-transform: translateY(0);
        .opacity(1);
    }
  }

  // Control Slideshow
  .owl-controls {
    position: absolute;
    bottom: @t3-global-margin * 5;
    left: 50%;
    transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
    width: 100%;
    .container-fixed();

    @media (min-width: @screen-sm-min) {
      width: @container-sm;
    }
    @media (min-width: @screen-md-min) {
      width: @container-md;
    }
    @media (min-width: @screen-lg-min) {
      width: @container-lg;
    }

    .owl-pagination {
      margin-left: -(@t3-global-margin / 2);
      margin-right: -(@t3-global-margin / 2);
    }

   .owl-page {
    padding-left: @t3-global-padding / 2;
    padding-right: @t3-global-padding / 2;
    position: relative;

      &:after {
        background: @white;
        bottom: 0;
        left: 0;
        position: absolute;
        content: "";
        height: 1px;
        width: 100%;
      }

      &:first-child {
        &:after {
          left: @t3-global-margin / 2;
        }
      }

      &:last-child {
        &:after {
          left: -(@t3-global-margin / 2);
        }
      }

      > span {
        background: transparent;
        margin: 0;
        padding: 0;
        position: relative;
        text-align: left;
        font-size: @font-size-base;
        font-weight: @font-weight-500;
        padding-bottom: @t3-global-padding / 4;
        .opacity(0.8);

        &:after {
          background: @white;
          bottom: 0;
          left: 0;
          position: absolute;
          content: "";
          height: 1px;
          width: 100%;
        }
      }

      &.active {
        > span {
          .opacity(1);

          &:after {
            height: 3px;
            bottom: -1px;
          }
        }
      }
    }
  }
}

// Set Width For Item Control
.owl-pagination > div {
  .items-1 & {
    width: 100%;
  }

  .items-2 & {
    width: 50%;
  }

  .items-3 & {
    width: 33.333333%;
  }

  .items-4 & {
    width: 25%;
  }

  .items-6 & {
    width: 16.66666%;
  }

  .items-7 & {
    width: 14.2857142;
  }

  .items-8 & {
    width: 12.5%;
  }
}

// -----------------------------------
// STYLE GALLERY
// -----------------------------------
.acm-gallery {
  .owl-carousel {
    padding: 0;

    .owl-controls {
      margin: 0;

      .owl-pagination {
        position: absolute;
        bottom: @t3-global-margin;
        left: 0;
        width: 100%;
      }
    }

    // Item
    .item {
      // Tablet view
      @media (max-width: @screen-sm-max) {
        img {
          width: 100%;
        }
      }
    }

    // Control
    .owl-buttons {
      > div {
        background: rgba(255,255,255,0.5);
        border-radius: @border-radius-base;
        height: @t3-global-margin * 2;
        width: @t3-global-margin * 2;
        padding: 0;
        text-align: center;
        line-height: 56px;
        position: absolute;
        top: 50%;
        margin-top: -@t3-global-margin;

        .fa {
          font-size: @font-size-h3;
        }

        &.owl-prev {
          left: @t3-global-margin;
        }

        &.owl-next {
          right: @t3-global-margin;
        }
      }
    }
  }
}