﻿#main-content .fancy_list {
    list-style-type: none;
    padding: 0;
}

.fancy_list li {
    align-items: center;
    counter-increment: section;
    display: grid;
    grid-template-columns: 1fr 5fr;
    margin-bottom: 4rem;
    position: relative;
}

    .fancy_list li:before {
        align-items: center;
        background: #20427a;
        color: white;
        content: counter(section, decimal);
        display: flex;
        font-size: 3rem;
        font-weight: bold;
        height: 8rem;
        justify-content: center;
        margin-right: 3rem;
        transform: skew(-8deg, 0deg);
        width: 11rem;
    }

    .fancy_list li:after {
        border-right: 3px dashed #4cc0ef;
        content: "";
        display: block;
        height: calc(100% + 4rem);
        left: 5.5rem;
        position: absolute;
        top: 0;
        width: 0px;
        z-index: -1;
    }

    .fancy_list li:last-of-type:after {
        content: none;
    }

#main-content .dp_field_heading {
    margin-bottom: 1em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .fancy_list li:after {
        content: none;
    }

    .fancy_list li:before {
        margin-bottom: 2rem;
        margin-right: 0;
    }

    .fancy_list li {
        display: flex;
        flex-direction: column;
    }
}

.testimonial-wrap {
    padding-top: 8vw;
}

    .testimonial-wrap:before {
        content: '';
        background: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='169' height='105'%3E%3Cpath fill='none' fill-rule='nonzero' stroke='%23FFF' d='M48.65 1 1 104h50.181L88.161 1H48.65Zm79.838 0L82.646 104h50.182L168 1h-39.512Z'/%3E%3C/svg%3E") no-repeat center;
        background-size: contain;
        width: 11vw;
        height: 7vw;
        position: absolute;
        top: 0;
        left: 0;
    }

    .testimonial-wrap:after {
        content: '';
        background: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='169' height='105'%3E%3Cpath fill='none' fill-rule='nonzero' stroke='%23FFF' d='M120.35 104 168 1h-50.181l-36.98 103h39.511Zm-79.838 0L86.354 1H36.172L1 104h39.512Z'/%3E%3C/svg%3E") no-repeat center;
        background-size: contain;
        width: 11vw;
        height: 7vw;
        position: absolute;
        bottom: 0;
        right: 0;
    }

@media all and (max-width: 767px) {
    .testimonial-wrap {
        padding-top: 0;
    }

        .testimonial-wrap:before, .testimonial-wrap:after {
            content: none;
        }
}

#testimonial-carousel {
    max-width: 815px;
    margin: auto;
}

    #testimonial-carousel .splide__list {
        padding-bottom: 4rem !important;
        text-align: center;
    }

    #testimonial-carousel li {
        cursor: grab;
    }

    #testimonial-carousel .splide__pagination {
        bottom: 0;
        padding: 0;
    }

    #testimonial-carousel .quote {
        color: #FFF;
        font-weight: 500;
        line-height: 1.2em;
        font-size: 28px;
    }

    #testimonial-carousel .attribution {
        color: #4CC1EF;
        font-size: 18px;
        font-weight: 800;
        display: inline-block;
    }

        #testimonial-carousel .attribution:before {
            content: '';
            display: inline-block;
            width: 3rem;
            height: 1px;
            background: #FFF;
            position: relative;
            top: -0.25em;
            margin-right: 1rem;
        }

    #testimonial-carousel .splide__pagination li {
        padding: 0 .5rem;
    }

    #testimonial-carousel .splide__pagination__page.is-active {
        background: #4CC1EF;
    }

    #testimonial-carousel .splide__pagination__page {
        background: #FFF;
        border-radius: 0;
        height: 6px;
        opacity: 1;
        margin: 0;
        transform: none;
        width: 60px;
    }

#logo-carousel {
    position: relative;
}

    #logo-carousel::before,
    #logo-carousel::after {
        background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%);
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 15%;
        z-index: 1;
    }

    #logo-carousel::after {
        background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%);
        right: 0;
    }

    #logo-carousel .splide__slide {
        align-items: center;
        display: flex;
        justify-content: center;
    }

    #logo-carousel .splide__arrows {
        z-index: 2;
        position: absolute;
        width: 100%;
        top: 50%;
    }

    #logo-carousel .splide__arrow {
        background: #4cc0ef;
        border-radius: 0;
        height: 2rem;
        transform: translateY(-50%) skew(-8deg, 0deg);
        width: 2rem;
    }

        #logo-carousel .splide__arrow svg {
            fill: #fff;
        }

#optimal-divi-bar {
    padding: 10px;
    transition: all 0.5s ease;
}

    #optimal-divi-bar.optimal-divi-bar-hidden {
        display: none;
        transform: translateY(-100%);
    }

    #optimal-divi-bar.optimal-divi-bar-visible {
        display: block;
        transform: translateY(0);
    }

    #optimal-divi-bar .optimal-divi-bar-content {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        width: 90%;
        max-width: 1800px;
        margin: auto;
    }

    #optimal-divi-bar button {
        background-color: transparent;
        color: #FFF;
        border: none;
        border-radius: 5px;
        padding: 1em;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        width: 1em;
        height: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        right: 0;
        position: absolute;
    }

        #optimal-divi-bar button:before {
            content: "M";
            display: inline-block;
            font-family: ETModules;
            font-size: 2rem;
            position: relative;
            text-transform: none;
        }
