div.ap-content ul h3 {
    color: #2e5d91;
    font-weight: bold;
}

button[id^="panel-"] {
    width: 100%;
    text-align: left;
    background: rgb(74, 68, 68);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 15px;
    margin-bottom: 5px;
    cursor: pointer !important;
    border-radius:  0;
  display:flex;
align-items:center;
justify-content:space-between;
}

.js-accordion__header.animated-accordion__title {
    display: none;
}

.animated-accordion__panel {
 display: block;
 overflow: hidden !IMPORTANT;
 opacity: 1;
 transition: visibility 1s ease, max-height 1s ease, opacity 1s ease;
 max-height: 100em;
 /* magic number for max-height = enough height */
 visibility: visible;
 transition-delay: 0s;
 margin: -5px 0 10px 0;
 padding: 0;
}
/* This is the hidden state */
[aria-hidden=true].animated-accordion__panel {
 display: block;
 max-height: 0;
 opacity: 0;
 visibility: hidden;
 transition-delay: 1s, 0s, 0s;
 margin: 0;
 padding: 0;
}

button[id^="panel-"] > div.ap-content > ul{
display: inline-block;
    width: 33.3%;
    float: left;
    height: 300px;
position: relative;}

.buttons-left, .buttons-center, .buttons-right {
    position: absolute;
    display: block;
    bottom: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    left: 0;
}

button[id^="panel-"] > div.ap-content a{
    background: #2e5d91;
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: bold;
}

button[id^="panel-"]:after {
    font-family: FontAwesome;
    content:  '\f054';
    color: #fff;
    float: right;
    padding-left:10px;
}

button[id^="panel-"][aria-expanded="true"]{
    background:#a0c13b; 
    color: #4a4444;
    }

button[id^="panel-"][aria-expanded="true"]:after {
    content:  '\f078';
    color: #4a4444;
}

.ap-content {
    padding: 20px;
}