@charset 'UTF-8';

blockquote {
  &.pull-quote {
    text-indent: 0;

    p {
      color: $cool-grey;
      padding-left: 10px;
      padding-right: 10px;
			@include font-size (24.833);
      text-indent: -.4em;
      margin-left: .4em;
      line-height: 1.3;

      span {
        font-weight: bold;
        color: $ubuntu-orange;
        line-height: 0;
        position: relative;
        left: -5px;

        & + span { left: 5px; } // the second span
			}

      cite {
        margin: 10px 0 0;
        font-weight: 300;
        display: block;
        font-size: .75em;
				text-indent: 0;
      }
    }

    &.js {
      padding-left: $gutter-width * 3;
      display: table-cell;
    }
  }

  &.quote-canonical,
  &.quote-canonical-white {
    @include font-size (16);
    background: url("#{$asset-path}patterns/quote-white-360x360.png") no-repeat 20px -130px;
    color: $canonical-aubergine;
    float: right;
    font-size: 1em;
    height: 215px;
    margin-top: 0;
    padding: 20px 60px 0;
    position: relative;
    width: 236px;
  }

  &.quote-canonical-white {
    background: url("#{$asset-path}patterns/quote-aubergine-345x345.png") no-repeat 0 0;
    color: #fff;
    padding: 80px 60px 0;
    height: 265px;
  }

  &.quote p:first-child {
    @include font-size (18); // (16) desired value in px, this is divided by the baseline font-size value to reach the em value
    line-height: 1.3;
    text-indent: -7px;
  }

  &.quote-right-bottom {
    background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.svg");
    background-repeat: no-repeat;
    background-size: 287px 286px;
    color: #fff;
    height: 167px;
    padding: 60px 40px;
    position: static;
    right: -($gutter-width * 2);
    top: -($gutter-width * 4.5);
    width: 207px;

    & p { color: #fff; }
  }

  &.quote-grey {
    @include font-size (36);
    background: url("#{$asset-path}patterns/quote-grey-br-211x211.png") no-repeat scroll 0 0 transparent;
    color: #fff;
    height: 152px;
    line-height: 40px;
    margin-left: 20px;
    padding: 60px 0 0;
    text-align: center;
    width: 211px;
  }

  &.quote-bottom-left {
    background: url("#{$asset-path}patterns/quote-orange-bl-287x287.png") no-repeat;
    color: #fff;
    height: 167px;
    padding: 55px 40px 70px 45px;
    width: 225px;
  }
}

//.pull-quote {
  //@include font-size (30);
  //color: $warm-grey;
  //line-height: 1.4;
  //right: 0;
//}

html.no-svg,
.opera-mini {
  blockquote.quote-right-bottom {
    background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.png");
  }
}

// End blockquote

// row-quote

.row-quote {
  @include rounded-corners(0);

  blockquote {
    @include rounded-corners(4px);
    margin: 0;
    padding: 0;

    p {
      margin-bottom: .75em;
      line-height: 1.3;
      color: $cool-grey;
      padding-left: 10px;
      padding-right: 10px;
			//@include font-size (23);
      //font-size: 1em;
      text-indent: 0;
    }

    span {
      font-weight: bold;
      color: $ubuntu-orange;
      line-height: 0;
      position: relative;
      left: -5px;

      & + span { left: 5px; } // the second span
    }

    cite {
      color: $cool-grey;
      font-style: normal;
      margin-bottom: 0;
      font-size: .75em;
      text-indent: -14px;
      text-indent: 0;
    }
  }

  .quote-twitter {
    background: #fcece7 url('#{$asset-path}pictograms/pictogram-twitter-115x139.png') $gutter-width bottom no-repeat;
    padding: $gutter-width $gutter-width $gutter-width $three-col;
  }

  .quote-twitter-small {
    background: #fcece7 url('#{$asset-path}pictograms/pictogram-twitter-54x63.png') 99% bottom no-repeat;
    padding: $gutter-width $gutter-width $gutter-width 80px;

    p {
      margin: 0;
      padding: 0;
    }
  }
}

blockquote.quote-canonical,
blockquote.quote-canonical-white {
  background: none;
  color: $cool-grey;
  width: auto;
  height: auto;
  padding: 0 30px;
  margin-top: 20px;
}

@media only screen and (max-width : 768px) {
  .row-quote blockquote p {
  }
}

@media only screen and (min-width : 768px) {

  .row-quote blockquote {
    text-indent: -7px;
  }

  .pull-quote {
    text-indent: -.4em;
  }

  .row-quote blockquote p {
    @include font-size (24.83);
  }

 	blockquote.pull-quote p,
 	.row-quote blockquote p {
    padding-left: 0;
    padding-right: 0;
    text-indent: -.7em;

    span {
      font-size: 1.391304348em;
    }

    cite {
      margin-left: 0;
      text-indent: 0;
    }
  }

  blockquote.pull-quote p span,
  .row-quote blockquote p span {
    top: 5px;
  }

} // end @media only screen and (max-width : 768px)

@media only screen and (min-width : 769px) {

  .row-quote blockquote {
    p {
			@include font-size (24.83);
      text-indent: -.4em;
    }
  }

} //@media only screen and (min-width : 769px)

@media only screen and (min-width: 984px) {

  .row-quote blockquote {
    padding: 0 80px 20px;
    text-indent: -10px;
	}

	blockquote.pull-quote p span,
	.row-quote blockquote p span {
		top: 10px;
	}

} // end @media only screen and (min-width: 984px)

