/***************  Read More **************/

.read-more__content {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: normal;
  height: 5em !important;
}

.read-more__content__rev_pages {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: normal;
  height: 10em !important;
}

/* Safari fix, it needs to be inline for the clamp to work on safari  */
.read-more__wrapper {
  display: inline;
}

/* So inner elements don't inherit the display inline from the wrapper. */
/* .read-more__wrapper * {
  display: block;
} */

/* Link fix, so that it does not break to a new line  */
.read-more__wrapper * a {
  display: inline;
}

.read-more__content.is-expanded {
  -webkit-line-clamp: initial;
  height: initial !important;
}

.read-more__content__rev_pages.is-expanded {
  -webkit-line-clamp: initial;
  height: initial !important;
}

.expand {
  display: block;
  border: none;
  color: #0081c6;
  font-size: 16px;
  font-weight: 800;
  width: 100%;
  padding-top: 6px;
}

.expand:before {
  content: '';
  display: block;
  width: 100%;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
  height: 60px;
  position: absolute;
  top: -60px;
  left: 0;
  z-index: 2;
}

.gray .expand:before {
background: rgb(247,247,247);
background: linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(247,247,247,0.85) 50%, rgba(247,247,247,0) 100%);;
}

.expand.more-button-expanded:before {
display: none;
}

.button-read-more-wrapper {
display: block;
width: 100%;
bottom: 0;
text-align: left;
position: relative;
z-index: 1;
}

.js-read-more-expand {
  font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: underline;
    color: var(--color-default);
    margin-bottom: 0;
    display: block;
    cursor: pointer;
    width: 100%;
    text-align: center;
}