/*------------------------------------*\
    
    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: #091F40;
    padding-top: 20px;
    z-index: 50;
}

.bg-white {
    background: #ffffff;
}

.bg-light-blue {
    background: #EEF5FC;
}

.bg-navy {
    background: #002D62;
    color: #ffffff;
}

.bg-navy h2,
.bg-navy h3 {
    color: #FFFFFF;
}

.bg-navy h4 {
    color: #92C0E9;
}

.example-btns {
    margin-top: 10px;
}

.bg-navy .btn-primary {
    background: #92C0E9;
    color: #002D62;
} 

.bg-navy .btn-secondary {
    background: transparent;
    color: #FFFFFF;
    border-color:#FFFFFF;
} 

.bg-navy .btn-tertiary {
    background: transparent;
    color: #92C0E9;
} 

.wysiwyg__content p,
.wysiwyg__content ul{
    padding-bottom: 25px;
}

.wysiwyg__content p:last-child{
    padding-bottom: 0;
}

.bg-light-blue .btn-primary{
    background: #92C0E9;
    color: #002D62;
}

.wysiwyg__content p:last-child{
    padding-bottom: 0;
}


@media (min-width: 768px){

    .wysiwyg{
        padding-top: 40px;
    }


}

@media (min-width: 1200px) {

    .wysiwyg{
        padding-top: var(--section-margins);
    }

    .bg-navy .btn-primary:hover {
        background: #003DA6;
        color: #FFFFFF;
    } 
    
    .bg-navy .btn-secondary:hover {
        background: transparent;
        color: #92C0E9;
        border-color:#92C0E9;
    } 
    
    .bg-navy .btn-tertiary:hover {
        background: transparent;
        color: #EEF5FC;
    } 

    .bg-light-blue .btn-primary:hover {
        background: #003DA6;
        color: #FFFFFF;
    } 
}