/*------------------------------------*\
    
    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

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

/* if you are having issues with clamping in safari, see this fix: https://app.getguru.com/card/c48ay5ri/CSS-lineclamp-in-latest-Safari- */

.read-more__content {
	position: relative;
    overflow: hidden;
}

.read-more__content .expand {
	display: none;
}

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

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

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

.read-more__box {
    /* overflow: hidden; */
	max-height: 470px;
}

.read-more__box--mobile {
    /* overflow: hidden; */
    max-height: 310px;
}

.read-more__box--mobile.fx-untruncated,
.read-more__box.fx-untruncated {
	max-height: 100% !important;
}

.expand {
    position: relative;
    display: inline-block;
    color: var(--black);
    font-size: 18px;
    padding: 0 18px 0 0;
    border: none;
	margin: 0 0 20px;
    background-size: 3px 0;
    font-weight: 700;
    text-decoration: none;
}

.expand:hover {
    background-size: 3px 10px;
}

.bg-dark-blue .expand {
    color: #fff;
}

.expand::after {
	content: "\e907";
    font-family: 'prodent-usa-icon';
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    font-size: 10px;
}

.fx-untruncated .ddd-keep::after {
    content: "\e90a";
}

.read-more__wrapper p {
    margin: 0 0 22px 0;
    padding: 0;
}

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

@media (min-width: 768px) {
	
    .read-more__box--mobile {
        max-height: 100%;
    }
    
}