18F/18f.gsa.gov

blockquote {
  border-left: $border-thick;
  margin-left: $paragraph-margins;
  margin-right: $paragraph-margins;
  padding-left: $paragraph-margins;

  cite {
    display: inline;
    font-size: $theme-small-font-size;
    padding-left: $paragraph-margins;

    > * {
      display: inline-block;
      margin-left: $paragraph-margins;
    }
  }
}

.pquote {
  display: flex;
  flex-direction: column;
  margin-bottom: $paragraph-margins-thick;
  margin-top: $paragraph-margins-thick;

  @include at-media('tablet') {
    flex-direction: row;
  }

  blockquote {
    align-self: flex-end;
    border: 0;
    margin: 0;
    padding: 0;

    p:last-of-type {
      margin: 0;
    }
  }
}

.pquote-img,
.pquote img {
  align-self: flex-end;
  margin-bottom: $paragraph-margins;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  width: 100%;

  @include at-media('tablet') {
    margin-bottom: 0;
    margin-right: $paragraph-margins;
    width: 200px;
  }
}

// Select all pull quotes that are on the
// base markdown level (probably)
p ~ .pquote:not(.pquote-single) {
  img,
  blockquote {
    align-self: flex-start;
  }
}

.pquote-single {
  padding-left: $paragraph-margins-thick;
  padding-right: $paragraph-margins-thick;
}

/// How we work block quote

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);

.testimonial-blockquote {
  font-size: 1em;
  width: 100%;
  margin: 3.5rem auto;
  font-style: italic;
  color: $color-dark;
  padding: 1.2em 30px 1.2em 75px;
  border-left: 8px solid $color-medium;
  line-height: $banner-line-height;
  position: relative;
  background: color('gray-cool-5');

  ::before {
    content: '\201C';
    color: $color-medium;
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
  }

  ::after {
    content: '';
  }

  span {
    display: block;
    color: $color-medium;
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
  }

}

// Does not have the quote mark, use for facts and other information to highlight
.funfact-blockquote {
  font-size: 1em;
  width: 100%;
  margin: 3.5rem auto;
  font-style: italic;
  color: $color-dark;
  padding: 1.2em 30px;
  border-left: 8px solid $color-medium;
  line-height: $banner-line-height;
  position: relative;
  background: color('gray-cool-5');
}

//Home page testimonial

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);

.home-testimonial {
  font-size: 23px;
  width: 100%;
  margin: auto;
  font-style: italic;
  color: color('gray-cool-60');
  padding: 1.2em 30px 1.2em 75px;
  line-height: $banner-line-height;
  position: relative;

  @include at-media('tablet') {
    font-size: 25px;
  }

  @include at-media('desktop-lg') {
    font-size: 28px;
  }

  ::before {
    content: '\201C';
    color: $color-medium;
    position: absolute;
    font-size: 3em;
    left: 30px;
    top: 0;

    @include at-media('tablet') {
      font-size: 4em;
      left: 20px;
      top: -5px;
    }

    @include at-media('desktop-lg') {
      font-size: 5em;
      left: 10px;
      top: -10px;
    }
  }

  ::after {
    content: '';
  }

  span {
    display: block;
    color: $color-medium;
    font-style: normal;
    font-size: 20px;
    font-weight: bold;
    margin-top: 1em;
  }

}