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

    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 {
/* TODO: Update styling to match prototypes */
    color: #4E4D60;
    position: relative;
    z-index: 1;
}

.wysiwyg a {
    border-bottom: 2px solid #78D2E2;
    color: #1A1743;
    font-weight: 500;
}

.wysiwyg a:hover {
    background-color: #78D2E2;
}

.wysiwyg .btn {
    margin-top: 20px;
}

.bg-white {
    background: #ffffff;
}

    .bg-white .section-padding {
        padding-bottom: 0;
    }

    .bg-white.first-child.last-child .section-padding {
        padding-bottom: 50px;
    }


.bg-light {
}
    .bg-light:before {
        background: linear-gradient(#3f669f 0%, rgba(63, 103, 159, 0) 100%);
        content: "";
        opacity: .19;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

    .bg-light .bg-light-wave {
        position: absolute;
        top: 0;
        width: 100%;
    }

        .bg-light .bg-light-wave svg {
            display: block;
            width: 100%;
            height: 100%;
            object-position: top;
        }

    .bg-light .section-padding {
        padding-top: 50px;
        padding-bottom: 0;
    }

.bg-dark {
    background: #1A1743;
    color: #fff;
}

    .bg-dark-wave,
    .bg-dark-wave-bottom {
        position: absolute;
        left: 0;
        width: 100%;
    }

    .bg-dark-wave {
        top: -7px;
    }

    .bg-dark-wave-bottom {
        bottom: -3px;
    }

    .bg-dark .section-padding {
        padding-top:  50px;
        padding-bottom:  50px;
    }

    .bg-dark .btn-primary {
        background: linear-gradient(to right,  rgba(119,203,221,1) 0%,rgba(18,66,94,1) 100%);
    }

    .bg-dark .btn-secondary,
    .bg-blue-gradient .btn-secondary {
        color: #fff!important;
        border-color: #fff;
    }

    .bg-dark h5,
    .bg-dark h2,
    .bg-dark h3,
    .bg-dark h4,
    .bg-dark p a,
    .bg-blue-gradient h5,
    .bg-blue-gradient h2,
    .bg-blue-gradient h3,
    .bg-blue-gradient h4,
    .bg-blue-gradient p a {
        color: #ffffff;
    }

.bg-blue-gradient {
    background: linear-gradient(135deg, rgba(26,23,67,1) 0%,rgba(90,165,191,1) 100%);
    color: #fff;
    text-align: center;
}

    .bg-blue-gradient .section-padding {
        padding-top:  60px;
        padding-bottom:  60px;
    }

    .bg-blue-gradient-wave-bottom {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
    }
        .bg-blue-gradient svg {
            display: block;
            width: 100%;
            height: 100%;
        }

/*
* changing the overlapping sections styles
*/

.wysiwyg:first-child .svgtop,
.wysiwyg:last-child .svgbottom,
.prev-wysiwyg-dark-sibling .svgbottom,
.wysiwyg.bg-blue-gradient + .wysiwyg.bg-light .svgtop {
    display: none;
}


.wysiwyg.bg-white + .infoboxes {
    margin-top:  30px;
}

.wysiwyg.bg-light:last-child {
    padding-bottom: 60px;
}

.wysiwyg.bg-dark + .wysiwyg.bg-light path {
    fill: #1A1743;
}

.wysiwyg.bg-dark + .wysiwyg.bg-blue-gradient .svgtop path {
    fill: #1A1743;
}

.wysiwyg.bg-blue-gradient + .wysiwyg.bg-light .section-padding {
    padding-top: 0;
}

.prev-wysiwyg-gradient-sibling .svgbottom path  {
    fill: #DCE2ED;
}

.blog-single-container .svgtop,
.blog-single-container .svgbottom {
    display: none;
}

.bg-blue-gradient .svgtop {
    position: relative;
    top: -2px;
    width: 100%;
}

    @media(min-width: 768px) {

        .bg-blue-gradient .section-padding {
            padding-top:  80px;
            padding-bottom:  140px;
        }

        .bg-blue-gradient:last-child .section-padding {
            padding-bottom: 60px;
        }

        .bg-light .section-padding {
            padding-top: 80px;
        }

        .bg-dark {
            /*padding-top: 40px;
            padding-bottom: 40px;*/
        }
            .bg-dark-wave {
                top: -3px;
            }

            .bg-dark .section-padding {
                padding-top:  80px;
                padding-bottom:  80px;
            }

            .prev-wysiwyg-dark-sibling .section-padding {
                padding-bottom: 0;
                padding-top: 100px;
            }

            .wysiwyg.bg-dark:first-child {
                padding-bottom:  80px;
            }

    }

    @media(min-width: 1025px) {


        .wysiwyg.bg-white + .image-and-text.blob,
        .wysiwyg.bg-white + .image-and-cf7
        {
            padding-top: 30px;
        }

        .bg-blue-gradient .section-padding {
            padding-top:  100px;
            padding-bottom:  180px;
        }
        .bg-blue-gradient:last-child .section-padding {
            padding-bottom: 100px;
        }
        .bg-light .section-padding {
            padding-top: 100px;
        }
        .bg-dark {
            padding-top: 60px;
            padding-bottom: 60px;
        }

    }

    @media(min-width: 2000px) {
        .bg-dark-wave {
            top: -5px;
        }

        .bg-dark-wave-bottom {
            bottom: -5px;
        }

        .bg-dark .section-padding {
          padding-top: 150px;
          padding-bottom: 150px;
        }

            .prev-wysiwyg-dark-sibling .section-padding {
                padding-top: 150px;
            }

            .wysiwyg.bg-dark:first-child .section-padding {
              padding-top: 100px;
              padding-bottom: 80px;
            }

        .bg-blue-gradient .section-padding {
            padding-top: 150px;
            padding-bottom:  300px;
        }

        .bg-blue-gradient:last-child .section-padding {
            padding-bottom: 150px;
        }

        .bg-light .section-padding {
            padding-top: 150px;
        }
    }

    @media(min-width: 2500px) {
        .prev-wysiwyg-dark-sibling .section-padding {
            padding-top: 200px;
        }
    }

    @media(min-width: 3000px) {
        .bg-dark-wave {
            top: -8px;
        }
        .bg-dark-wave-bottom {
            bottom: -8px;
        }
        .bg-blue-gradient .section-padding {
            padding-bottom:  380px;
        }
        .bg-dark .section-padding {
            padding-top:  220px;
            padding-bottom:  220px;
        }
        .bg-light .section-padding {
            padding-top: 250px;
        }
    }


/*
* Masthead overlay when styled wysiwyg was first selected as content of the page.
*/


.headbg-overlay {
    opacity: 0;
    height: 0;
}
    .wysiwyg:first-child .headbg-overlay {
        position: absolute;
        left: 0;
        top: -50px;
        content: "";
        display: block;
        opacity: 1;
        width: 100%;
        height: 50px;
        z-index: 99;
    }

    .headbg-overlay img {
        height: 100%;
        width: 100%;
        bottom: 0;
        right: 0;
        position: relative;
    }


.masthead-image.disable {
    border: 1px solid #000;
    opacity: 0;
}

@media(min-width: 768px) {
    .wysiwyg:first-child .headbg-overlay {
        height: 80px;
        top: -80px;
    }
    .wysiwyg.bg-dark:first-child,
    .wysiwyg.bg-light:first-child {
        padding-top: 0;
    }

}
@media(min-width: 1025px) {
    .wysiwyg:first-child .headbg-overlay {
        height: 100px;
        top: -100px;
    }
}
@media(min-width: 1200px) {
    .wysiwyg:first-child .headbg-overlay {
        height: 155px;
        top: -155px;
    }
}

@media(min-width: 2700px) {
    .wysiwyg:first-child .headbg-overlay {
        height: 200px;
        top: -200px;
    }
}