/*------------------------------------*\
    
    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-white {
    background: var(--white);
}

.bg-light-blue {
    background: var(--light-blue);
}

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

.bg-dark-blue {
    color: var(--white);
}

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

.bg-blue .sub-heading,
.bg-dark-blue .sub-heading,
.bg-blue p a:not(.btn),
.bg-dark-blue p a:not(.btn),
.bg-blue ol li:before {
    color: var(--primary-option);
}

.bg-blue p a:before {
    background: var(--primary-option);
}

.bg-blue .btn-blue,
.bg-blue .btn-secondary {
    background: var(--medium-blue);
}

.bg-blue .btn-outline,
.bg-dark-blue .btn-outline {
    border-color: var(--white);
    color: var(--white);
}

.bg-blue .btn-tertiary,
.bg-dark-blue .btn-tertiary {
    color: var(--white);
}

.bg-blue .btn-tertiary:before,
.bg-dark-blue .btn-tertiary:before {
    background: var(--white);
}

.wysiwyg table > thead > tr > th {
    background: var(--light-blue);
}

@media (min-width: 768px) {

}

@media (min-width: 1200px) {
    .bg-blue .btn-tertiary:hover:before {
        opacity: 0.10;
    }

    
}