/* .accordion */
.accordion > div { border-bottom: 1px solid #3182a4; padding: 2rem 1.5rem;}
.accordion > div.accordion-content p:last-child { margin-bottom: 0;}
.accordion > div.accordion-content p a { color: #28628a;
    background-image: linear-gradient(to bottom, #fff 94%, transparent 94%), linear-gradient(to right, #ddbc6c 50%, #28628a 50%);
    background-size: 300% 100%;
    background-position: 100% 0;
    transition: 1s background-position , color .5s ease;
}
@media (hover:hover) {
    .accordion > div.accordion-content p a:hover { color: #c1a731; background-position: 0%;}
}

.accordion .accordion-title .title { position: relative; cursor: pointer; padding-right: 60px; margin-bottom: 0;}
.accordion .accordion-title .title:before ,
.accordion .accordion-title .title:after { content: ""; position: absolute; background: #3182a4; opacity: 1; transition: .2s ease opacity;}
.accordion .accordion-title .title:before { top: 50%; right: 0; width: 26px; height: 1px;} 
.accordion .accordion-title .title:after { top: calc( 50% - (26px / 2)); right: calc(26px / 2); width: 1px; height: 26px;} 
.accordion .accordion-title.active .title:after { opacity: 0;} 

@media(hover: hover) {
    .accordion .accordion-title:hover .title:after { opacity: 0;} 
}


@media (max-width:767px){
    .accordion > div { border-bottom: 1px solid #3182a4; padding: 1.5rem 1rem;}
}