// This work is in the theme in the PR for UE-213

.quote {
  background-color: #2e2d29;
  overflow: hidden; }
  .quote__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-height: inherit;
    max-width: inherit;
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap; }
    @media (max-width: 767px) {
      .quote__inner {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap; } }
  .quote__text-wrapper {
    -webkit-box-ordinal-group: 2;
    -moz-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -ms-flex-preferred-size: calc(50% - 68px);
        flex-basis: calc(50% - 68px);
    color: #ffffff;
    margin-right: 68px;
    position: relative;
    padding: 20px 0 20px 15%; }
    @media (max-width: 767px) {
      .quote__text-wrapper {
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        margin-right: 0;
        padding: 40px; } }
    @media (max-width: 480px) {
      .quote__text-wrapper {
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        margin-right: 0;
        padding: 40px; } }
  .quote h2.quote__subhead {
    font-family: "Source Sans Pro", sans-serif;
    color: #ffffff;
    font-weight: 200; }
    @media (min-width: 980px) and (max-width: 1199px) {
      .quote h2.quote__subhead {
        font-size: 100%; } }
    @media (max-width: 979px) {
      .quote h2.quote__subhead {
        font-size: 100%; } }
    @media (max-width: 480px) {
      .quote h2.quote__subhead {
        font-size: 100%; } }
  .quote blockquote.quote__text {
    font-family: "Source Serif Pro", serif;
    font-style: italic;
    font-size: 30px; /* LMY may change this based on length of quote */
    line-height: 133.3%;
    border-left: 0;
    margin: 0;
    padding: 0;
    margin-top: 40px;
    position: relative; }
    @media (min-width: 980px) and (max-width: 1199px) {
      .quote blockquote.quote__text {
        font-size: 133.3%; } }
    @media (max-width: 979px) {
      .quote blockquote.quote__text {
        font-size: 100%; } }
    @media (max-width: 480px) {
      .quote blockquote.quote__text {
        font-size: 75.0187546887%; } }
    .quote blockquote.quote__text::before {
      color: #b6b1a9;
      opacity: 0.5;
      font-family: 'Sail', cursive;
      content: open-quote;
      font-style: normal;
      position: absolute;
      display: block;
      top: 40px;
      left: -8vw;
      width: 100%;
      height: 1px;
      font-size: 561.023297492%; }
      @media (min-width: 1200px) {
        .quote blockquote.quote__text::before {
          left: -8vw; } }
      @media (max-width: 979px) {
        .quote blockquote.quote__text::before {
          font-size: 420.872691292%; } }
      @media (max-width: 767px) {
        .quote blockquote.quote__text::before {
          top: 15px;
          left: -6vw; } }
    .quote blockquote.quote__text::after {
      color: #b6b1a9;
      font-family: 'Sail', cursive;
      opacity: 0.5;
      content: close-quote;
      font-style: normal;
      position: absolute;
      display: block;
      bottom: 0;
      left: calc(100% - 5vw);
      width: 100%;
      height: 1px;
      font-size: 561.023297492%; }
      @media (max-width: 979px) {
        .quote blockquote.quote__text::after {
          font-size: 420.872691292%; } }
      @media (max-width: 767px) {
        .quote blockquote.quote__text::after {
          bottom: -10px; } }
  .quote__author {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 28px;
    margin-top: 40px;
    min-height: 80px;
    font-weight: 300; }
    @media (min-width: 980px) and (max-width: 1199px) {
      .quote__author {
        font-size: 100%; } }
    @media (max-width: 767px) {
      .quote__author {
        font-size: 75.0187546887%; } }
  .quote__photo-credit {
    font-family: "Source Sans Pro", sans-serif;
    clear: right;
    position: absolute;
    bottom: 40px;
    font-size: 75.0187546887%;
    font-weight: 200; }
    @media (max-width: 979px) {
      .quote__photo-credit {
        bottom: 20px;
        font-size: 56.2781355504%; } }
  .quote__photo {
    -webkit-box-ordinal-group: 3;
    -moz-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-height: 800px;
    min-height: 100%; }
    .quote__photo img {
      -o-object-fit: cover;
         object-fit: cover;
      height: 100%; }
    @media (max-width: 767px) {
      .quote__photo {
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%; } }
    @media (max-width: 480px) {
      .quote__photo {
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%; } }

.align-right .quote__text-wrapper {
  -webkit-box-ordinal-group: 3;
  -moz-order: 2;
  -ms-flex-order: 2;
  order: 2; }

.align-right .quote__photo {
  -webkit-box-ordinal-group: 2;
  -moz-order: 1;
  -ms-flex-order: 1;
  order: 1; }

#content-body h2.quote__subhead {
  font-family: "Source Sans Pro", sans-serif;
  color: #ffffff;
  font-weight: 200; }
  @media (min-width: 980px) and (max-width: 1199px) {
    #content-body h2.quote__subhead {
      font-size: 90%; } }
  @media (max-width: 767px) {
    #content-body h2.quote__subhead {
    font-size: 75.0187546887%;
    line-height: 24px;
}
    .quote__author {
    line-height: 1em;
    }
  }