/*------------------------------------*\
    
    Hide/Show Text Area - Global styling for all hide/show text

    This method is CSS heavy and light on JS, which is important for good SEO and CWV results
    Find the code snippet here: https://webfxcodelibrary.webpagefxstage.com/#intermediate_cssshowhidetext

\*------------------------------------*/
.readmore {
    margin-bottom: 20px;
}

.readmore__text {
    overflow: hidden;

    position: relative;

    text-overflow: ellipsis;
}

.readmore__text.is-collapsible::after {
    content: '';
    display: block;

    height: 30px;
    width: 100%;
    
    position: absolute;
    top: calc(135px - 30px);
    z-index: 22;

    background: rgb(237,237,237);
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1));
}

.readmore__text.is-expanding.is-collapsible::after,
.readmore__text.is-expanded.is-collapsible::after {
    opacity: 0;
}

.readmore__expander {
    display: inline-block !important;

    margin-top: 0;
    width: auto !important;

    position: relative;

    text-decoration: none;
}

.full-width-image-text__description .readmore__expander {
	color: #fff;
}

.readmore__text.is-expanded .readmore__expander {
    margin-top: 20px;
}

.readmore__expander::before {
    transform: rotate(90deg);

    transition: transform 0.25s ease-in-out;
}

.readmore__text.is-expanded + .readmore__expander::before {
    transform: rotate(270deg);
}