.fx-accordion {
    position: relative;
}

.fx-accordion__panel {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 30px 0 rgba(13, 27, 57, 0.10);
    margin-bottom: 12px;
    padding: 0 25px;

    a:not(.btn) {
        color: var(--blue);
        text-decoration-color: var(--link-accent);
    }
}

@media (min-width: 1200px) {
    .fx-accordion__panel {
        a:not(.btn):hover {
            color: var(--secondary-color);
            text-decoration-color: var(--secondary-color);
        }
    }
}

.fx-accordion__panel__toggle {
    position: relative;
    margin: 0 0;
    display: block;
    background: none;
    padding: 20px 50px 20px 0;
    text-decoration: none;
    border: none;
    width: 100%;
    text-align: left;
    color: var(--heading-color);
    font-family: var(--secondary-font);
    font-size: 16px;
    line-height: 1.20em;
}


.fx-accordion__panel.is-expanded .fx-accordion__panel__toggle {
    padding-bottom: 15px;
}

.fx-accordion__panel .fx-accordion__panel__toggle:after {
    content: "\e921";
    font-family: 'zimmerman-icons';
    position: absolute;
    top: calc(50% + 5px);
    right: 0;
    transform: translate(0, -50%);
    font-size: 15px;
    line-height: 1em;
    color: var(--primary-color);
    transition: transform 0.3s ease-in-out;
}

.fx-accordion__panel.is-expanded .fx-accordion__panel__toggle:after {
    transform: translate(0, -50%) rotate(180deg);
    top: calc(50% + 10px);
}

.fx-accordion__panel:not(.is-expanded) .fx-accordion__panel__content {
    display: none;
}

.fx-accordion__panel__content {
    padding: 15px 0 20px;
    overflow: hidden;
    border-top: 1px solid var(--off-white-darker);
    color: var(--text-color);

    ul li:before {
        color: var(--blue);
    }
}

.bg-blue .fx-accordion__panel__content .btn-primary {
    background: linear-gradient(90deg, var(--secondary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    box-shadow: 3px 3px 0 0 var(--blue);
}

.bg-blue .fx-accordion__panel__content .btn-secondary {
    background: linear-gradient(90deg, var(--light-blue) 0%, var(--light-blue) 100%);
    color: var(--secondary-color);
    box-shadow: 3px 3px 0 0 #9FB2D9;
}

.bg-blue .fx-accordion__panel__content .btn-tertiary {
    color: var(--blue);
}

.bg-blue .fx-accordion__panel__content .btn-tertiary::before {
    background: var(--link-accent);
}


@media (min-width: 768px) {
    .fx-accordion__panel {
        margin-bottom: 20px;
        padding: 0 35px;
    }

    .fx-accordion__panel__toggle {
        padding: 25px 50px 25px 0;
        font-size: 20px;
    }

    .fx-accordion__panel.is-expanded .fx-accordion__panel__toggle {
        padding-bottom: 15px;
    }

    .fx-accordion__panel__content {
        padding: 15px 0 25px;
    }

}


@media (min-width: 1200px) {
    .fx-accordion__panel {
        margin-bottom: 32px;
        padding: 0 50px;
    }

    .fx-accordion__panel:last-child {
        margin-bottom: 0;
    }

    .fx-accordion__panel__toggle {
        padding: 35px 50px 35px 0;
        font-size: 22px;
        line-height: 1.182em;
    }

    .fx-accordion__panel.is-expanded .fx-accordion__panel__toggle {
        padding-bottom: 15px;
    }

    .fx-accordion__panel__content {
        padding: 15px 0 35px;
    }

    .bg-blue .fx-accordion__panel__content .btn-primary:hover {
        color: var(--white);
        background: var(--dark-blue-gradient);
        box-shadow: 1px 1px 0 0 var(--blue);
    }

    .bg-blue .fx-accordion__panel__content .btn-secondary:hover {
        color: var(--secondary-color);
        background: var(--light-blue-gradient);
        box-shadow: 1px 1px 0 0 #9FB2D9;
    }

    .bg-blue .fx-accordion__panel__content .btn-tertiary {
        color: var(--blue);
    }

    .bg-blue .fx-accordion__panel__content .btn-tertiary:hover {
        color: var(--secondary-color);
    }

    .bg-blue .fx-accordion__panel__content .btn-tertiary:hover::before {
        background: var(--secondary-color);
    }

}