/*------------------------------------*\
    
    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__content {
	position: relative;
}

.expand {
    color: #AC2022;
    font-weight: 600;
    background: transparent;
    margin-top: 10px;
	border: none;
    border-bottom: 2px solid #AC2022;
	padding: 0;
    width: fit-content;
}

.ddd-truncated .expand {
	display: inline-block;
}

.fx-untruncated .expand {
    display: inline-block;
    margin-top: 16px;
}

.expand--more:after,
.expand--less:after {
    display: inline-block;
    margin-left: 4px;
    font-size: 20px;
}

.expand--more:after {
    content: '+';
}

.expand--less:after {
    content: '-';
}

.expand--less,
.fx-untruncated .expand--more {
	display: none;
}

.fx-untruncated .expand--less {
	display: inline;
}

@media(min-width: 1200px) {
    .expand:hover {
        color: #540203;
        border-color: #540203;
    }
}