/** 
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         http://t3-framework.org 
 *------------------------------------------------------------------------------
 */


// --------------------------------------------------
// MODULE ACM STYLES
// --------------------------------------------------
// Owl Slide Dot
div.owl-theme .owl-dots .owl-dot {
  span {
    background: @gray-lighter;
    border: 2px solid @body-bg;
    margin: 5px 4px;
    height: 8px;
    width: 8px;
  }

  &.active span {
    background: transparent;
    border-color: @brand-primary;
  }
}

// Features Style
// -----------------------------
.acm-features {
  // Style 1
  &.style-1 {
    .row {
      > div {
        .features-item {
          padding: @grid-gutter-width * 4 @grid-gutter-width;
          text-align: center;

          // Tablet view
          @media (max-width: @screen-sm-max) {
            padding: @grid-gutter-width 0;
          }
        }

        + div {
          border-left: 1px solid @t3-border-color;

          &.col-sm-6:nth-child(3) {
            border-left: 0;
          }

          // Mobile view
          @media (max-width: @screen-xs-max) {
            border-left: 0;
            border-top: 1px solid @t3-border-color;
          }
        }
      }

      // Icon 
      .icon {
        align-items: center;
        background: @brand-secondary;
        color: @white;
        display: flex;
        font-size: @font-size-h2;
        justify-content: center;
        margin: 0 auto @grid-gutter-width;
        position: relative;
        height: @grid-gutter-width * 4;
        width: @grid-gutter-width * 4;

        &:before {
          border-width: 10px;
          border-style: solid;
          border-color: @brand-secondary transparent transparent transparent;
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -10px;
        }
      }

      // Title
      h3 {
        margin-top: 0;
        margin-bottom: @t3-global-margin;
      }

      // Action
      .action {
        background: @brand-primary;
        border-radius: 50%;
        color: @white;
        display: inline-block;
        line-height: @grid-gutter-width;
        margin-top: @grid-gutter-width;
        height: @grid-gutter-width;
        width: @grid-gutter-width;

        // Mobile view
        @media (max-width: @screen-xs-max) {
          margin-top: @grid-gutter-width / 2;
        }

        &:hover {
          background: darken(@brand-primary, 10%);
        }
      }
    }

    .row-flex + .row-flex {
      border-top: 1px solid @t3-border-color;
    }
  }

  // Style 2
  &.style-2 {
    padding-top: @grid-gutter-width * 5;
    overflow: hidden;

    // Tablet view
    @media (max-width: @screen-sm-max) {
      padding-top: @grid-gutter-width * 2;
    }

    .row {
      // Tablet view
      @media (max-width: @screen-sm-max) {
        display: flex;
        flex-direction: column-reverse;
      }
    }

    .section-title-wrap {
      text-align: left;
      padding-top: @grid-gutter-width * 2;

      // Desktop Medium view
      @media (max-width: @screen-md-max) {
        padding-top: 0;
      }

      .section-title {
        // Desktop Medium view
        @media (max-width: @screen-md-max) {
          font-size: @font-size-h3;
        }
      }

      .section-desc {
        margin-bottom: @grid-gutter-width;
      }
    }

    // Feature text
    .features-item {
      margin-bottom: @grid-gutter-width;
    }

    // Intro Image
    .features-image {
      position: relative;

      &:before {
        background: @brand-meta;
        bottom: 0;
        content: "";
        position: absolute;
        right: 50%;
        height: 2000px;
        width: 2000px;

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

      img {
        position: relative;
        z-index: 2;
      }
    }

    // Features Image Right
    .features-image-right {
      .features-image:before {
        left: 50%;
        right: auto;
      }
    }

    // Action
    .btn {
      margin-top: @grid-gutter-width;

      // Tablet view
      @media (max-width: @screen-sm-max) {
        margin-top: 0;
      }
    }
  }

  // Style 3
  &.style-3 {
    .owl-stage {
      display: flex;
    }

    .owl-item {
      display: flex;
      flex: 1 0 auto;
    }

    // Feature Item
    .features-item {
      background: @white;
      border: 1px solid @t3-border-color;
      width: 100%;
      .transition(all 500ms);

      &:hover {
        border-color: darken(@t3-border-color, 5%);
        box-shadow: 0 0 18px rgba(0,0,0,0.1);
      }

      .features-info {
        padding: @grid-gutter-width;

        &.has-link {
          padding-bottom: @grid-gutter-width + @input-height-base;
        }

        .features-top {
          // Title
          h4 {
            margin-top: 0;
            margin-bottom: @t3-global-margin / 4;

            a {
              color: @headings-color;

              &:hover,&:focus,&:active {
                color: @brand-primary;
              }
            }
          }

          // Sub title
          span {
            color: @gray-light;
            display: block;
            font-size: @font-size-h6;
            text-transform: uppercase;
            margin-bottom: @t3-global-margin / 2;
          }

          // Description
          p {
            margin-bottom: 0;
          }
        }
      }

      .action {
        a {
          align-items: center;
          border-top: 1px solid @t3-border-color;
          bottom: 0;
          color: @gray-darker;
          display: flex;
          justify-content: space-between;
          position: absolute;
          left: 0;
          font-size: @font-size-h5;
          font-weight: 700;
          padding-left: @grid-gutter-width;
          height: @input-height-base;
          width: 100%;

          .icon {
            border-left: 1px solid @t3-border-color;
            color: @gray-lighter;
            display: flex;
            justify-content: center;
            align-items: center;
            height: @input-height-base;
            width: @input-height-base;
            .transition(all 500ms);
          }

          &:hover,&:focus,&:active {
            color: @brand-primary;
            text-decoration: none;

            .icon {
              color: @brand-primary;
              padding-left: 5px;
            }
          }
        }
      }
    }
  }
}

// Hero Style
// -----------------------------
.acm-hero {
  .hero-item {
    position: relative;

    // Mask
    &:before {
      background: @black;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      .opacity(0.6);
    }
  }

  .hero-content {
    text-align: center;
    padding: @grid-gutter-width * 6 0 @grid-gutter-width * 9;
    position: relative;
    z-index: 1;

    // Tablet view
    @media (max-width: @screen-sm-max) {
      padding: @grid-gutter-width * 3 @grid-gutter-width;
    }

    // Mobile view
    @media (max-width: @screen-xs-max) {
      padding: @grid-gutter-width * 2 @grid-gutter-width / 2;
    }

    .hero-content-inner {
      margin: auto;
      max-width: 828px;

      // Title
      h2 {
        color: @white;
        font-size: @font-size-h1;
        line-height: @headings-line-height;
        font-weight: 700;

        // Mobile view
        @media (max-width: @screen-xs-max) {
          font-size: @font-size-h2;
        }
      }

      // Description
      .lead {
        color: @white;
        max-width: 540px;
        margin: auto;
        .opacity(0.6);
      }
    }
  }
}