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

.wysiwyg__content {
    position: relative;
    z-index: 3;
}

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

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

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

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

.bg-dark-blue .btn.btn-primary,.bg-gray-blue .btn.btn-primary {
    background: var(--primary-color);
    color: var(--dark-blue);
}
.bg-dark-blue .btn.btn-secondary {
    background: var(--gray-blue);
    color: var(--white);
}
.bg-gray-blue .btn.btn-secondary {
    background: var(--dark-blue);
    color: var(--white);
}
.bg-dark-blue .btn.btn-boder:hover,.bg-gray-blue .btn.btn-border:hover {
    background: var(--white);
    color: var(--dark-blue);
}


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

.bg-dark-blue p a,
.bg-dark-blue a,
.bg-gray-blue p a,
bg {
    background: linear-gradient(to bottom, rgba(251,220,24,0.15) 0%, rgba(251,220,24,0.15) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 0 0;
    color: var(--primary-color);
}

p a.btn {
    margin-right: 20px;
}

.wysiwyg__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.bg-image:before {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #011627 0%, rgba(54, 74, 91, 0.80) 100%);
}
.content p {
    margin-bottom: 20px;
}

@media (min-width: 1200px) {
    .bg-dark-blue p a:hover,
    .bg-dark-blue a:hover,
    .bg-gray-blue p a:hover,
    .bg-gray-blue a:hover {
        background-size: 4px 15px;
    }
}