/*------------------------------------*\
    
    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 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
}

.read-more__wrapper {
    display: inline;
}

.read-more__content {
    -webkit-line-clamp: 20;
}

.read-more__content.ddd-clicked {
    -webkit-line-clamp: inherit !important;
}

.ddd {
    margin-bottom: 20px;
}

.ddd.ddd-truncated {
    margin-bottom: 0;
}

.ddd-expander {
    position: relative;
    display: none;
    color: #394C93;
    text-transform: uppercase;
    font-size: 15px;
    padding: 0 18px 0 0;
    border: none;
    margin: 8px 0 20px;
    letter-spacing: 0.1em;
    background: none;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid rgba(57, 76, 147, 0.25);
}

.ddd-expander::after {
    content: "\e912";
    font-family: 'msec';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 10px;
    font-weight: normal;
}

.ddd-truncated .ddd-expander,
.ddd-clicked .ddd-expander {
    display: inline-block;
}

.ddd-clicked .ddd-expander::after {
    content: "\e90e";
}


@media (min-width: 768px) {

    .read-more__content {
        -webkit-line-clamp: 12;
    }

    .ddd-expander {
        font-size: 16px;
    }

}

@media (min-width: 1200px) {
    .read-more__content {
        -webkit-line-clamp: 9;
    }

    .ddd-expander {
        font-size: 17px;
        margin: 15px 0 25px;
    }

    .ddd-expander:hover {
        text-decoration: none;
    }

}

.ddd-inner {
    position: relative;
    z-index: 1;
}

.ddd-clicked .ddd-inner:not(.ddd-truncated) {
    height: auto !important;
    max-height: max-content !important;
}

.ddd-inner.ddd-truncated:after,
.ddd-truncated .read-more__wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

}
.section--bg-color-dark .ddd-inner.ddd-truncated:after{
    background: #17130C;
    background: linear-gradient(0deg, #17130C 0%, rgba(224,216,188,0) 100%);

}
.section--bg-color-dark.section--bg-texture-crushed-rocks .ddd-truncated .read-more__wrapper::after{
    background: transparent;
    background: transparent;

}

.tab-accordion__panel .ddd-inner.ddd-truncated:after {
    background: rgb(224,216,188);
    background: linear-gradient(0deg, rgba(224,216,188,1) 0%, rgba(224,216,188,0) 100%);
}

.ddd-no-toggle .ddd-inner:after {
    display: none;
}

.read-more__content {
    position: relative;
    margin-bottom: 20px;
}

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

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

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

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

.read-more__box {
    max-height: 130px;
}
.expand--more,
.expand--less{
    padding-right: 25px;
}
.expand--more::after{
    content: '\e902';
    font-family: 'icomoon';
    position: absolute;
    top: 50%;
    font-size: 11px;
    right: 0px;
    text-align: center;
    transform: translate(0, -50%);
}
.expand--less::after {
    content: '\e905';
    font-family: 'icomoon';
    position: absolute;
    top: 50%;
    font-size: 11px;
    right: 0px;
    text-align: center;
    transform: translate(0, -50%);
}

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

.expand:hover{
    color: var(--color-dark);
}