@import '../../../assets/less/_mixins';

:host {
  display: block;
}

.testimonials {
  padding-bottom: 50px;

  & .item {
    padding-top: 15px;
  }

  & blockquote {
    border: none;
    text-align: center;
    color: #fff;
    position: relative;
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 15px;

    & .fa-quote-left,
    & .fa-quote-right {
      font-size: 28px;
      position: absolute;
      margin-left: 15px;
      margin-top: 15px;
      color: #8F8E8E;
    }
    & .fa-quote-left {
      margin-left: -43px;
      margin-top: -15px;
    }
  }

  & .name {
    color: #fff;
    font-size: 14px;
    margin-bottom: 15px;

    & span {
      margin-left: 5px;
    }
  }

  &.carousel {
    ::ng-deep .carousel-indicators li {
      background: rgba(255,255,255,0.4);
      border: none;
      .transition(all .2s linear);
    }
    ::ng-deep .carousel-indicators li:hover,
    ::ng-deep .carousel-indicators li:focus {
      background: rgba(255,255,255,0.7);
    }
    ::ng-deep .carousel-indicators li.active {
      background: #fff;
    }
    ::ng-deep .carousel-indicators li,
    ::ng-deep .carousel-indicators li.active {
      width: 12px;
      height: 12px;
      margin: 1px 3px;
      .border-radius(12px);
    }
  }
}
