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

:host {
  display: block;
}

.about {
  p {
    text-align: justify;
  }
}

.about-author {
  position: relative;

  & .quote {
    position: relative;
    padding: 30px 60px;
    margin-bottom: 15px;
    .border-radius(12px);

    &:before {
      content: '';
      position: absolute;
      bottom: -20px;
      left: 95px;
      border: 10px solid transparent;
      border-top-color: #f0f3f4;
      border-left-color: #f0f3f4;
    }
    & h3 {
      margin: 0;
      font-weight: 300;
      color: #707478;
      font-style: italic;
      line-height: 30px;
    }
    & .fa.fa-quote-left,
    & .fa.fa-quote-right {
      font-size: 28px;
      position: absolute;
      left: 30px;
      top: 50%;
      margin-top: -14px;
      line-height: 28px;
      top: 30px;
      color: #D5D9DA;
    }
    & .fa.fa-quote-right {
      left: auto;
      right: 30px;
      bottom: 30px;
      margin-top: 0;
      margin-bottom: -14px;
      top: auto;
    }
  }
  & .author {
    position: relative;
    text-align: right;
    padding-left: 100px;
    margin-bottom: 15px;

    & .image {
      position: absolute;
      left: -10px;
      top: -40px;
      background: #fff;
      border: 5px solid #fff;
      border-radius: 50%;
      width: 100px;
      overflow: hidden;

      & img {
        max-width: 100%;
      }
    }
    & .info {
      color: #242a30;
      font-weight: 600;
      font-size: 14px;

      & small {
        display: block;
        color: #999;
        font-size: 12px;
        font-weight: normal;
      }
      & a {
        font-weight: normal;
        font-size: 12px;
        display: block;
      }
    }
  }
}


@media (min-width: 1920px) {
  .about-author .author .info {
    font-size: 16px;

    & small {
      font-size: 14px;
    }
  }
}

@media (max-width: 992px) {
  .about-author .author {
    padding-left: 80px;
    & .image {
      width: 80px;
    }
  }
}

/* About Us Skills Setting */

.skills {
  direction: ltr;
  div {
    text-align: left;
  }
}

.skills .skills-name {
  font-size: 12px;
  color: #242a30;
  margin-bottom: 5px;
  font-weight: 600;
}

@media (min-width: 1920px) {
  .skills .skills-name {
    font-size: 16px;
  }
}
