.expand-collapse {
    padding: 2em;
}
@media only screen and (min-width: 980px) {
    .expand-collapse .intro-content-wrap,
    .expand-collapse .expand-collapse-wrap {
        width: 60%;
    }
}
.expand-collapse .intro-title {
    margin-top: 0;
}
.expand-collapse .expand-collapse-wrap .expand-collapse-item {
    border: 2px solid var(--navy);
    margin-bottom: 20px;
}
.expand-collapse .expand-collapse-wrap .ec-title {
    background-color: var(--navy);
    padding: 16px 20px;
    color: var(--white);
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.expand-collapse .expand-collapse-wrap .ec-title h3 {
    margin: 0;
    width: 75%;
    font-size: var(--fontsmobile);
    pointer-events: none;
}
@media only screen and (max-width: 600px) {
    .expand-collapse .expand-collapse-wrap .ec-title h3 {
        width: 85%;
    }
}
@media only screen and (min-width: 980px) {
    .expand-collapse .expand-collapse-wrap .ec-title h3 {
        font-size: var(--fontsdesktop);
    }
}
.expand-collapse .expand-collapse-wrap .ec-title:after {
    content: '';
    background: url('/assets/images/angle-down-solid-midember.svg') 0 0 no-repeat;
    background-size: cover;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-top: 4px;
}
.expand-collapse .expand-collapse-wrap .ec-title.expanded {
    color: var(--midsky);
}
.expand-collapse .expand-collapse-wrap .ec-title.expanded:after {
    transform: rotate(180deg);
}
.expand-collapse .expand-collapse-wrap .ec-desc {
    padding: 4px 20px;
}
.expand-collapse .hide {
    display: none;
}