/*------------------------------------*\

	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

\*------------------------------------*/

.read-more > p:first-of-type {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var( --readMoreLines);
    overflow: hidden;
    word-break: normal;
}


/* Hides all non <p> tags. and all <p> tags except the first one */

.read-more > *:not(p),
.read-more > p:not(:first-of-type) {
    display: none;
}

.read-more > p {
    padding-bottom: 0;
    transition: all ease 0.3s;
}

.read-more.expanded > p {
    padding-bottom: 10px;
}

.read-more.expanded > *:not(p),
.read-more.expanded > p:not(:first-of-type) {
    display: block;
}

.text .read-more--toggle {
    position: relative;
}

.read-more--toggle {
    margin-top: 10px;
    display: inline-block;
}

.read-more--toggle:after {
    content: "\e900";
    font-family: 'icomoon' !important;
    position: absolute;
    font-weight: normal;
    right: -17px;
    top: 7px;
    font-size: 11px;
}

.expanded+.expand:after {
    content: "\e904";
}


/* fix - display: -webkit-box; prevents margins from collapsing */

.read-more__content p {
    margin-top: 0;
}


/* Show Read More Only on Mobile */

@media (min-width: 768px) {
    .read-more.read-more-mobile > p:first-of-type {
        display: block;
    }
    .read-more.read-more-mobile > *:not(p),
    .read-more.read-more-mobile > p:not(:first-of-type) {
        display: block;
    }
	.read-more.read-more-mobile > p {
		padding-bottom: 10px;
	}
	.read-more.read-more-mobile+.read-more--toggle {
        display: none;
    }
}