.layout-steps {
  padding-bottom: 5rem;
  .wrapper-step-5 {
    p:empty {
      display: none;
    }
  }
  .small-layout-title {
    font-family: $font-family-sans-serif;
    font-size: calc(.7em + .7vw);
    letter-spacing: 1px;
    margin: 0 auto 2.5rem;
    text-align: center;
    font-weight: 400;
  }
  .layout-title {
    position: relative;
    text-align: center;
    margin: 0 auto 5rem;
    z-index: 0;
    font-size: calc(1.5em + 1.5vw);
    letter-spacing: 2px;
    span {
      z-index: 1;
      background-color: $white;
    }
    &:after {
      content:'';
      @extend .centered;
      height: 1px;
      width: 100%;
      background-color: $primary-color;
      z-index: -1;
      display: none;
    }
    @media screen and($bp-larger-than-mobile) {
      font-size: calc(1.25em + 1.25vw);
      max-width: 75%;
      span {
        padding-left: 3rem;
        padding-right: 3rem;
      }
      &:after {
        display: block;
      }
    }
  }
  .block-content {
    text-align: center;
    .step-title {
      font-size: calc(5em + 5vw);
      font-family: $font-family-sans-serif;
      color: $primary-color;
      font-weight: 500;
      margin-bottom: 0;
      line-height: 1em;
    }
  }
  &.five {
    .layout-title {
      @media screen and($bp-larger-than-mobile) {
        margin-bottom: 10rem;
      }
    }
    .block-content {
      text-align: left;
      padding: 0 3rem;
      @media screen and($bp-larger-than-mobile) {
        padding: 0 2.5%;
      }
      .step-title {
        font-size: 1.25em;
        line-height: 1em;
        font-family: $font-family-serif;
        color: $black;
        // padding-left: 4rem;
        position: relative;
        @media screen and($bp-larger-than-desktophd) {
          font-size: 1.5em;
        }
        span {
          text-align: center;
          font-size: 2.5em;
          font-family: $font-family-sans-serif;
          color: $primary-color;
          margin: 1.5rem 1rem 1rem 0;
          float: left;
          display: inline-block;
          // position: absolute;
          // top: 0;
          // left: 0;
          @media screen and($bp-larger-than-phablet) {
            // top: 1.25rem;
          }
          @media screen and($bp-larger-than-desktophd) {
            margin: 1.75rem 1.25rem 1rem 0;
            font-size: 2.5em;
          }
        }
      }
      p {
        @extend .clearfix;
        color: $primary-color;
        width: 100%;
        font-weight: 500;
        line-height: 1.5em;
        font-size: 1.1em;
        margin-bottom: 0;
        margin-top: 2rem;

        @media screen and(max-width: $bp-phablet) {
          margin-top: 10px;
        }
      }
      @media screen and(max-width: $bp-phablet) {
        margin-bottom: 3rem;
        .step-title {
          font-size: calc(1em + 1vw);
        }
        p {
          font-size: .9em;
        }
      }
      // @media screen and(max-width: $bp-mobile) {
      // .step-title {
      //     span {
      //       margin-top: .5rem;
      //     }
      //   }
      // }
    }
  }
}
