/*------------------------------------*\
    
    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: #313131;
    position: relative;
}

.wysiwyg-content ul,
.wysiwyg-content ol,
.wysiwyg__content ul,
.wysiwyg__content ol {
    overflow: hidden;
    margin: 0 0 18px 25px;
}

.bg-white {
    background: #ffffff;
}

.bg-tan {
    background: #F6F6F6;
}

.bg-blue {
    background: #142238;
    color: #f5f5f5;
}

.bg-white + .bg-white,
.bg-tan + .bg-tan,
.bg-blue + .bg-blue {
    padding-top: 0px;
}

.bg-blue h1,
.bg-blue h2,
.bg-blue h3,
.bg-blue h4,
.bg-blue h5,
.bg-blue h6 {
    color: #ffffff;
}

.bg-blue p a {
    color: #f5f5f5;
    font-weight: 700;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 2px;
}

.bg-blue ul li:before {
    background: #ffffff;
}

.bg-blue .btn-primary {
    background: #537d54;
    color: #ffffff;
}

.bg-blue .btn-secondary {
    background: #ffffff;
    color: #142238;
}

.wysiwyg-content .btn {
    display: table;
}

.wysiwyg__content .sub-title {
    display: inline-block;
    background: #ffffff;
    color: #142238;
    font-size: 18px;
    line-height: 1.222em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 13px 9px 16px;
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .wysiwyg-content .btn {
        display: inline-block;
    }
    .wysiwyg-content ul,
    .wysiwyg-content ol,
    .wysiwyg__content ul,
    .wysiwyg__content ol {
        margin: 0 0 18px 0;
        padding-left: 10px;
    }
}

@media (min-width: 1200px) {
    .bg-blue p a:hover {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.17) 0%,
            rgba(255, 255, 255, 0.17) 100%
        );
        background-repeat: repeat-x;
        background-size: 2px 30px;
        background-position: 0 100%;
        color: #f5f5f5;
        /* transition: background-size 0.3s; */
        transition: all ease-in-out 0.2s;
    }

    .bg-blue .btn-primary:hover {
        background: #355036;
        color: #ffffff;
        transition: all ease-in-out 0.2s;
    }

    .bg-blue .btn-secondary:hover {
        background: #325793;
        color: #ffffff;
    }
}