// --------------------------------------------------------------
// # Copyright (C) joomla-monster.com
// # License: http://www.joomla-monster.com/license.html Joomla-Monster Proprietary Use License
// # Website: http://www.joomla-monster.com
// # Support: info@joomla-monster.com
// ---------------------------------------------------------------

// ==========================================================================
// DJ-IMAGESLIDER styles
// ==========================================================================

// General slider styles
.djslider-loader-override {
  margin: 0 auto;
  position: relative;
  background: url('../images/loader.gif') center center no-repeat;
}

.djslider-override {
  margin: 0 auto;
  position: relative;
  .transition(opacity 400ms ease);
  .opacity(0);
  .slider-container {
    position: absolute;
    overflow: hidden;
    left: 0; 
    top: 0;
    height: 100%;
    width: 100%;
  }
  ul.djslider-in {
    position: relative;
    > li {
      float: left;
      position: relative;
      overflow: hidden;
      .box-sizing(border-box);
      text-align: center;
    }
  }
  &.img-vcenter img.dj-image {
    position: relative;
    top: 50%;
    .translateY(-50%);
  }
}

// Slide description area
.djslider-override {
  .slide-desc {
    position: absolute;
  }
  .slide-desc-in {
    position: relative;
  }
  .slide-desc-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .slide-desc-text {
    position: relative;
    text-align: left;
    .slide-title {
      display: inline-block;
      background: @JMsliderTitleBackground;
      font-size: @JMsliderTitleFontSize;
      line-height: @JMsliderTitleLineHeight;
      color: @JMsliderTitleFontColor;
      text-transform: uppercase;
      padding: 6px 30px;
      &:hover {
        background: @JMsliderTitleBackgroundHover;
      }
      a {
        color: @JMsliderTitleFontColor;
      }
    }
    .slide-text {
      background: rgb(red(@JMsliderDescBackground),green(@JMsliderDescBackground),blue(@JMsliderDescBackground));
      background: rgba(red(@JMsliderDescBackground),green(@JMsliderDescBackground),blue(@JMsliderDescBackground),0.8); 
      padding: 20px 30px;
      color: @JMsliderDescFontColor;
      font-size: @JMsliderDescFontSize;
      line-height: @JMsliderDescLineHeight;
      a {
        color: @JMsliderDescFontColor;
      }
    }
    a.readmore {
      display: block;
      background: rgb(red(@JMsliderDescBackground),green(@JMsliderDescBackground),blue(@JMsliderDescBackground));
      background: rgba(red(@JMsliderDescBackground),green(@JMsliderDescBackground),blue(@JMsliderDescBackground),0.8); 
      position: relative;
      font-size: 0;
      height: 20px;
      &:after {
        content: '';
        position: absolute;
        width: 32px;
        height: 32px;
        right: 0;
        bottom: 0;
        background-color: @JMsliderReadmoreBackground;
        background-image: url("../images/li-white.png");
        background-repeat: no-repeat;
        background-position: center center;
      }
      &:hover:after {
        background-color: @JMsliderReadmoreBackgroundHover;
      }
    }
  }
}

// Navigation buttons/indicators

.djslider-override {
  .navigation-container {
    position: relative;
    text-align: center !important;
    a {
      outline: none;
    }
    .prev-button {
      cursor: pointer;
      display: block;
      position: absolute;
      left: 0;
    }
    .next-button {
      cursor: pointer;
      display: block;
      position: absolute;
      right: 0;
    }
    .play-button, 
    .pause-button {
      cursor: pointer;
      display: block;
      position: absolute;
      left: 50%;
    }
    img {
      .transition(opacity 0.3s ease-in-out);    
      &:hover {
        .opacity(80);
      }
    }
  }
  .navigation-container-custom,
  .navigation-numbers {
    position: absolute;
    right: 0;
    top: -53px;
  }
  .load-button {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 3px;
    cursor: pointer;
    .border-radius(50%);
    .opacity(50);
    .transition(opacity 400ms ease);
    background: @JMslider1CustomNavBackground;
  }
  .load-button-active {
    .opacity(100);
  }
  .navigation-numbers .load-button {
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: @white;
  }
  .showOnHover {
    .opacity(0);
    .transition(opacity 200ms ease 50ms);
  }
  &:hover .showOnHover {
    .opacity(100);
  }
}

//slider1-ms 
.slider1-ms .djslider-override {
  ul.djslider-in > li {
    text-align: left;
  }
  .slide-desc,
  .slide-desc-in {
    height: 100%;
  }
  .slide-desc-bg {
    .box-sizing(border-box);
    background: @JMslider1Background;
    border: 1px solid @JMslider1Border;
    border-left: none;
  }
  .slide-desc-text {
    padding: 30px;
    color: @JMslider1FontColor;
  }
  .slide-desc-text .slide-title {
    font-family: @JMslider1TitleFontFamily;
    font-size: @JMslider1TitleFontSize;
    line-height: @JMbaseLineHeight;
    color: @JMslider1TitleFontColor;
    margin-bottom: @JMslider1TitleMargin;
    background: none;
    padding: 0;
  }
  .slide-desc-text .slide-title a {
    color: @JMslider1TitleFontColor;
    &:hover {
      text-decoration: none;
      color: @JMstyle1;
    }
  }
  .slide-text {
    background: none;
    font-size: @JMbaseFontSize;
    line-height: @JMbaseLineHeight;
    color: @JMslider1FontColor;
    padding: 0;
    a {
      color: @JMslider1FontColor;
    }
  }
  a.readmore {
    float: right;
    margin-top: @JMslider1ButtonMargin;
    font-size: @JMslider1ButtonFontSize;
    line-height: 26px;
    color: @JMslider1ButtonFontColor;
    background: @JMslider1ButtonBackground;
    padding: 13px 50px;
    text-transform: lowercase;
    height: auto;
    &:hover {
      background: @JMslider1ButtonBackgroundHover;
      text-decoration: none;
    }
    &:after {
      display: none;
    }
  }
  .navigation-container img.next-button {
    left: 57px;
  }
  .navigation-container-custom,
  .navigation-numbers {
    top: 10px;
    right: 10px;
  }
}

//testimonials-ms
.testimonials-ms .djslider-override {
  .slide-text {
    text-align: center;
    background: none;
    color: @JMmoduleFontColor;
    padding: 20px;
    .jm-testimonial-name {
      font-size: 20px;
      line-height: 28px;
      color: @JMarticleFontColor;
      font-weight: 900;
    }
    .jm-testimonial-subname {
      font-size: 14px;
    }
    .jm-testimonial-desc {
      margin-top: 20px;
      font-style: italic;
    }
  }
  .navigation-container-custom {
    top: auto;
    text-align: center;
    bottom: -5px;
    width: 100%;
    span.load-button {
      background: @JMbaseFontColor;
      .border-radius(0);
      height: 5px;
      margin: 0 3px;
      .opacity(100);
      width: 5px;
    }
    span.load-button-active {
      .opacity(100);
      background: @JMstyle1;
    }
  }
}

.testimonials-ms.blank-ms .djslider .slide-text { 
  color: @JMbaseFontColor;
  #jm-footer-mod & {
    color: @JMfooterFontColor;
  }
}