/**
* $JA#COPYRIGHT$
*/


// ------------------------------------
// Ovveride of BS "type.scss".
// Leave blank to use default styles
// ------------------------------------

//
// Headings
//

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: $headings-font-family;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: $headings-color;

  small,
  .small {
    font-weight: normal;
    line-height: 1;
  }
}

h1, .h1,
h2, .h2,
h3, .h3 {
  margin-top: $spacer;
  margin-bottom: ($spacer / 2);

  small,
  .small {
    font-size: 65%;
  }
}
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: ($spacer / 2);
  margin-bottom: ($spacer / 2);

  small,
  .small {
    font-size: 75%;
  }
}

h1, .h1 {
  font-size: $h1-font-size;

  @include media-breakpoint-down(md) {
    font-size: $h1-font-size*0.75 !important;
  }
}
h2, .h2 {
  font-size: $h2-font-size;

  @include media-breakpoint-down(md) {
    font-size: $h2-font-size*0.75 !important;
  }
}
h3, .h3 {
  font-size: $h3-font-size;

  @include media-breakpoint-down(md) {
    font-size: $h3-font-size*0.75 !important;
  }
}
h4, .h4 {
  font-size: $h4-font-size;

  @include media-breakpoint-down(md) {
    font-size: $h4-font-size*0.75 !important;
  }
}
h5, .h5 {
  font-size: $h5-font-size;

  @include media-breakpoint-down(md) {
    font-size: $h5-font-size*0.75 !important;
  }
}
h6, .h6 {
  font-size: $h6-font-size;

  @include media-breakpoint-down(md) {
    font-size: $h6-font-size*0.75 !important;
  }
}

.lead {
  font-size: $lead-font-size;
  line-height: 1.875;
}

// Type display classes
.display-1 {
}
.display-2 {
}
.display-3 {
}
.display-4 {
}


//
// Horizontal rules
//
hr {
}


//
// Emphasis
//
small,
.small {
  font-size: $font-size-sm;
  font-weight: $font-weight-normal;
}

mark,
.mark {
}

//
// Image
//
.img-rounded {
  border-radius: 5px;
}


//
// Lists
//
.list-unstyled {
}

// Inline turns list items into inline-block
.list-inline {
}

.list-inline-item {
}


.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

// Alert message
.alert-error {
  @extend .alert-danger;
}

//
// Misc
//
// Builds on `abbr`
.initialism {
}

// Blockquotes
.blockquote {
}

.blockquote-footer {
}

// Font weight
.fw-thin      { font-weight: 300; }
.fw-semi-bold { font-weight: 500; }
.fw-bold      { font-weight: 600; }

.fs-xs   { font-size: ($font-size-base * .725); }
.fs-sm   { font-size: ($font-size-base * .875); }
.fs-base  { font-size: $font-size-base; }
.fs-lg    { font-size: ($font-size-base * 1.25); }


//
// Feature list (Custom style for)
// ------------------------------------
.features-list {

  > div {
    margin-bottom: $spacer*2;

    @include media-breakpoint-up(md) {
      margin-bottom: 0;
    }
  }

  .item {
    height: 100%;
    margin-bottom: $spacer*2.5;

    .icon {
      display: inline-block;
      border-radius: 50%;
      height: 80px;
      text-align: center;
      width: 80px;

      i {
        color: $gray-500;
        font-size: $font-size-base*2.5;
        line-height: 80px;
      }
    }
  }

  .card {
    background-color: $white;
    border: 1px solid lighten($border-color, 25%);
    border-radius: 9px;
    height: 100%;
    padding: $spacer*3 $spacer*1.5;
    transition: $transition-base;

    &:hover {
      box-shadow: 0 10px 15px rgba(0,0,0,0.1);
      border-color: $border-color;

      .icon {
        box-shadow: none;
        color: $blue;
      }
    }
  }

  .icon {
    background-color: $gray-100;
    border-radius: 50%;
    color: $gray-500;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 0 auto $spacer*2;
    transition: $transition-base;
    width: 100px;
  }

  .block-title {
    font-size: $h5-font-size;
    margin-bottom: $spacer;
  }
}

//
// Dark background
// ----------------------
.t4-section.sec-bg-dark {
  // Feature list
  .features-list {
    .card {
      background-color: rgba($black, .1);
    }

    .icon {
      background-color: rgba($black, .15);
    }

    .item {
      .icon {
        i {
          color: rgba($white, .4);
        }
      }
    }
  }

  .testimonial-block {
    background-color: rgba($black, .1);

    &:after {
      background: rgba($white, .1);
    }
  }
}

//
// Introduction
// ------------
.t4-introduction {
  background-color: $gray-100;
  padding-top: $spacer*5;
  padding-bottom: $spacer*5;

  h3 {
    font-weight: 600;
    margin-bottom: $spacer*2;
  }

  p {
    margin-bottom: $spacer*2;
  }
}


// T4 EXTRA CUSTOM TYPOGRAPHY
// ----------------------------------------
// Section heading
.section-heading {
  margin-bottom: $spacer*3;

  @include media-breakpoint-up(sm) {
    margin-left: 15%;
    margin-right: 15%;
  }

  h2 {
    font-size: $h2-font-size;
    font-weight: 600;

    @include media-breakpoint-up(sm) {
      font-size: $h1-font-size*1.1;
    }
  }

  p {
    font-size: $font-size-lg;
  }
}

//
// Testimonials block
ul.testimonial-list {
  list-style: none;
  margin: 0;
  padding: $spacer*3 0 0;
  text-align: center;
  @include clearfix();

  li {
    margin-bottom: $spacer*5;

    &:last-child {
      margin-bottom: 0;
    }

    @include media-breakpoint-up(md) {
      margin-bottom: 0;
    }
  }
}

.testimonial-block {
  border-radius: $border-radius-lg;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.085);
  padding: 0 $spacer*3 $spacer*2;
  position: relative;

  &:after {
    background-color: $gray-400;
    border-radius: 5px;
    content: "";
    display: block;
    height: 4px;
    position: absolute;
    left: $spacer*3;
    right: $spacer*3;
    bottom: -2px;
    transition: all 0.25s;
  }

  &:hover {
    &:after {
      background-color: $blue;
    }
  }

  img {
    max-width: $spacer*6;
    margin-top: -$spacer*3;
    margin-bottom: $spacer*1.5;

    &.img-rounded {
      border-radius: $border-radius-lg;
    }

    &.img-circle {
      border-radius: 50%;
    }
  }

  .author-name {
    font-size: $font-size-base;
    font-weight: $font-weight-bold;
    letter-spacing: 0.5px;
    margin: 0 0 $spacer;
    text-transform: uppercase;
  }
}


//
// Pre code
pre {
  background-color: $gray-100;
  border-radius: 3px;
  font-family: Consolas, monospace;
  padding: $spacer/2 $spacer;
}


// ---------------------------------
// HERO
// ---------------------------------
#t4-hero {
  background: $black;
  padding-top: 20rem;
  padding-bottom: 20rem;

  @include media-breakpoint-down(md) {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }

  .bg-overlay {
    &:before {
      content: "";
      position: absolute;
      background: $black;
      opacity: .5;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  #t4-header + & {
    margin-top: -79px;

    @include media-breakpoint-down(md) {
      margin-top: -53px;
    }
  }
}


// ---------------------------------
// CUSTOM STYLE FOR EXAMPLE PAGE
// ---------------------------------
.docs-section {

}

.t4-typo-example {
  padding: $spacer;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: $spacer;
  border: 1px solid $border-color;

  & + .t4-typo-example {
    margin-top: $spacer;
  }
}