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

    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;
}

.bg-blue h2,
.bg-blue h3,
.bg-blue h4,
.bg-blue h5,
.bg-blue h6,
.bg-blue-gradient h2,
.bg-blue-gradient h3,
.bg-blue-gradient h4,
.bg-blue-gradient h5,
.bg-blue-gradient h6 {
    color: var(--white);
}

.bg-blue ul li:before {
    background: var(--white);
}

.bg-blue a:not(.btn) {
    color: var(--white);
}

.bg-blue .btn-secondary {
    border-color: var(--white);
}

.bg-blue-gradient .btn-secondary {
    border-color: var(--white);
    color: var(--deep-navy);
    background: var(--white);
}

@media (min-width: 768px) {
    .list-style ul li {
        display: flex;
        margin-bottom: 20px;
    }
}

@media (min-width: 1200px) {
    .list-style ul {
        margin-bottom: 32px;
    }

    .list-style ul li {
        margin-bottom: 18px;
    }

    .bg-grey .btn-primary:hover {
        background: rgba(166, 194, 226, 0.22);
        color: var(--deep-navy);
        border-color: rgba(166, 194, 226, 0.22);
    }

    .bg-blue .btn-primary:hover {
        background: var(--grey);
        color: var(--deep-navy);
        border-color: var(--grey);
    }

    .bg-blue .btn-secondary:hover {
        border-color: var(--navy);
    }

    .bg-blue-gradient .btn-secondary:hover {
        border-color: var(--white);
        color: #ffffff;
        background: #6c92ba;
    }
}