/*------------------------------------*\
    
    WebFX WYSIWYG Customizations - Global styling for all ACF WYSIWYG's

    Add custom WYSIWYG styling to this file if it should be applied to all ACF WYSIWYG's on the site
    Otherwise, put your block-specific styles in individual block stylesheets

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

.wysiwyg { 
    position: relative;
    color: #58605C;
    overflow: hidden;
}

.bg-white {
    background: var( --white );
}

.bg-light-gray {
    background: #F7F7F7;
}

.bg-gray {
    background: #EDEDED;
}

.more-text {
    -webkit-line-clamp: 6;
}

.wysiwyg blockquote {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.bg-light-gray blockquote {
    background: #ffffff;
}

.wysiwyg .blockquote {
    margin-left: 0;
    margin-right: 0;
    z-index: 1;
}

.wysiwyg .blockquote:after {
    z-index: -1;
}

@media( max-width : 600px ) {
    .example-btn {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .example-btn .btn + .btn {
        margin-left: 0!important;
    }
}

@media (min-width: 768px) {
    .more-text {
        -webkit-line-clamp: 5;
    }

    .example-btn br {
        display: none;
    }

    .blockquote {
        width: 548px;
        margin: 30px 0 15px;
        position: relative;
    }

    .blockquote:after {
        content: "";
        position: absolute;
        right: -50%;
        top: -18%;
        width: 50%;
        height: 8px;
        border-bottom: 7px dotted #EDEDED;
        transform: translate(0, -50%);
    }

    .wysiwyg .blockquote {
        margin-left: auto;
        margin-right: auto;
        z-index: 1;
        display: flex;
        margin-top: 200px;
    }
}


@media (min-width: 1200px) {

    .more-text {
        -webkit-line-clamp: unset;
    }
    .blockquote {
        width: auto;
        max-width: 645px;
        margin: 30px 0 30px;
    }

    blockquote {
        padding: 27px 40px;
        font-size: 18px;
        position: relative;
        z-index: 9;
    }

    .blockquote:after {
        left: -90%;
        width: 100%;
        border-bottom: 11px dotted #EDEDED;
    }

    .wysiwyg blockquote::before {
        top: -37px;
        font-size: 150px;
        font-weight: normal;
    }

    .wysiwyg .blockquote {
        margin-left: 0;
        margin-right: 0;
        z-index: 1;
    }

}