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

    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 {
    color: #5F7080;
    position: relative;
}

.bg-light-blue blockquote {
    border-color: #9DB8CE;
}

.bg-gray .fx-accordion__panel {
    border-color: #CFCDC5;
}

.bg-gray  .fx-accordion__panel.is-expanded .fx-accordion__panel__toggle::before {
    background: #CFCDC5;
}

.bg {
    position: relative;
    z-index: 1;
}

.pattern {
    display: none;
    position: absolute;
    width: 100%;
    height: 960px;
    left: 0;
    bottom: -50px;
    object-fit: cover;
    z-index: 1;
}

.home .image-buttons + .image-text .pattern {
    display: block;
}

.pattern::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0px;
    background: linear-gradient(to bottom,  rgba(248,252,255,1) 0%,rgba(248,252,255,0.7) 100%);
}

.pattern__wave {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    z-index: 1;
}

.example-btns--padding .btn {
    margin: 8px 0;
}

.example-btns--padding .btn:first-child {
    margin-top: 0;
}

.wysiwyg--before blockquote::before {
    color: #F7F7F7;
}

@media (min-width: 768px) {
    .pattern {
        height: 1035px;
        bottom: 0;
    }

    .example-btns--padding .btn {
        margin: 12px 0;
    }
}

@media (min-width: 1200px) {
    .pattern {
        height: 968px;
        bottom: 0;
    }
}