a, .btn {
  transition: all 0.2s ease-in-out;
}

img {
  max-width: 100%;
}

blockquote {
  color: $gray;
  border-left: $border;
  border-width: 4px;
  padding: $spacer-1 0 0 $spacer-2;
  margin-top: $spacer-2;
  margin-bottom: $spacer-2;
  @include breakpoint(md) {
    padding: $spacer-1 0 $spacer-1 $spacer-3;
    margin-top: $spacer-3;
    margin-bottom: $spacer-3;
  }
}

.pquote {
  border: $border;
  padding: $spacer-3;
  margin-top: $spacer-4;
  margin-bottom: $spacer-4;
  text-align: center;
  font-weight: 300;

  @include breakpoint(md) {
    font-size: 18px;
    margin: $spacer-6 -10%;
    padding: 10%;
  }

  img.pquote-avatar {
    border-radius: 50px;
    border: 3px solid #F3F3F3;
    height: 90px;
    width: 90px;
    display: block;
    margin: 0 auto $spacer-2;
    @include breakpoint(md) {
      margin: 0 auto $spacer-4;
    }
  }

}

.pquote-credit {
  margin-top: $spacer-3;
  font-size: 14px;
}

.user-mention {
  color: #333;
  font-weight: 700;
}

.lh-none {
  line-height: 0;
}

.main-links {
  a {
    &:hover {
      background: $bg-gray-light;
      text-decoration: none;
      color: $gray-dark;
    }
  }
  padding-bottom: 5px;
  padding-top: 5px;
}

.breadcrumb {
  background: #F3F3F3;

  @include breakpoint(sm){
    background: $bg-white;
  }
}

// Big opening paragraphs
.lead {
  -webkit-font-smoothing: antialiased;
  font-size: 21px;
  font-weight: $font-weight-light;
  @include breakpoint(md) { font-size: 24px; }
  @include breakpoint(lg) { font-size: 26px; }
}

.p-large {
  font-size: 16px;
}

.article-body {
  font-size: 16px;
  padding-top: 100px;
  max-width: 700px;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    -webkit-font-smoothing: antialiased;
    font-family: $font-mktg
  }

  h1 { @include h0-mktg }

  h3 {
    @include h2-mktg;
    margin-top: $spacer-4;
    margin-bottom: $spacer-3;
    @include breakpoint(md) {
      margin-top: $spacer-5;
    }
  }
  h4 {
    font-size: 16px;
    font-weight: $font-weight-semibold;
  }

  h5 {
    font-size: $h5-size;
    font-weight: $font-weight-semibold;
  }

  h6 {
    font-size: $h6-size;
    font-weight: $font-weight-semibold;
  }

  h2 {
    @include h1-mktg;
    text-align: center;
    margin-bottom: $spacer-3;
    line-height: 1.25;

    &:before {
      display: block;
      font-size: 17px;
      font-weight: 700;
      margin-bottom: $spacer-4;
      margin-top: 40px;

      @include breakpoint(md) {
        margin-top: 120px;
      }

    }
  }

  h2:nth-of-type(1):before {
    content: "Section 1";
    @include breakpoint(md) {
      margin-top: 60px;
    }
  }
  h2:nth-of-type(2):before { content: "Section 2"; }
  h2:nth-of-type(3):before { content: "Section 3"; }
  h2:nth-of-type(4):before { content: "Section 4"; }
  h2:nth-of-type(5):before { content: "Section 5"; }
  h2:nth-of-type(6):before { content: "Section 6"; }
  h2:nth-of-type(7):before { content: "Section 7"; }
  h2:nth-of-type(8):before { content: "Section 8"; }
  h2:nth-of-type(9):before { content: "Section 9"; }

  h2 + p {
    text-align: center;
    -webkit-font-smoothing: antialiased;
    font-size: 21px;
    font-weight: $font-weight-light;
    color: $gray;
    @include breakpoint(md) { font-size: 24px; }
    @include breakpoint(lg) { font-size: 26px; }

    &::after {
      content: " ";
      display: block;
      margin: 1.5em auto;
      height: 5px;
      width: 100px;
      background: #f3f3f3;
    }
  }

  ul, ol {
    padding-left: 1em;
    margin-bottom: $spacer-3;

    li { margin-bottom: $spacer-2; }

    @include breakpoint(md) {
      padding-left: 2em;
    }
  }

  img {
    margin: $spacer-3 0;
  }

}

.border-sm-0 {
  @include breakpoint(sm) { border-bottom: none !important; }
}

.col-border {
  @include breakpoint(sm) { border-right: 1px #e5e5e5 solid !important; }
}

.bg-gray-light {
  background-color: #F3F3F3 !important;
}

.text-black {
  color: #333 !important;
}

.fill-blue {
  fill: $blue !important;
}

.mc-field-group {
  .form-input {
    border: $border;
    color: $text-gray-dark;
    background-color: $bg-white;
    height: 40px;
  }
}

.little-illo {
  max-height: 50px;
}

*:lang(ko) {
  .lead,
  .lead-mktg ,
  h2 + p {
    word-break: keep-all;
  }
}

.form-select {
  -webkit-appearance: none;
}
