.accordion dl,
.accordion-list{border:1px solid #ddd;&:after{content:"";display:block;height:1em;width:100%;background-color:#38cc70;}
}
.accordion dd,
.accordion__panel{background-color:#eee;font-size:1em;line-height:1.5em;}
.accordion p{padding:1em 1em 1em 1em;}
.accordion{background-color:#eee;}
.container{max-width:100%;padding:2em 0 2em 0;float:left;}
.accordionTitle,
.accordion__Heading{background-color:#7B9E4E;text-align:left;font-weight:700;padding:1em;display:block;text-decoration:none;color:#fff;transition:background-color 0.5s ease-in-out;border-bottom:1px solid #5D773B;&:before{content:"+";font-size:1.5em;line-height:0.5em;float:left;transition:transform 0.3s ease-in-out;}
&:hover{background-color:darken(#38cc70, 10%);}
}
.accordionTitleActive,
.accordionTitle.is-expanded{background-color:darken(#38cc70, 10%);&:before{transform:rotate(-225deg);}
}
.accordionItem{height:auto;overflow:hidden;//SHAME:magic number to allow the accordion to animate
max-height:50em;transition:max-height 1s;@media screen and (min-width:48em){transition:max-height 0.5s}
}
.accordionItem.is-collapsed{max-height:0;}
.no-js .accordionItem.is-collapsed{max-height:auto;}
.animateIn{animation:accordionIn 0.45s normal ease-in-out both 1;}
.animateOut{animation:accordionOut 0.45s alternate ease-in-out both 1;}
@keyframes accordionIn{0%{opacity:0;transform:scale(0.9) rotateX(-60deg);transform-origin:50% 0;}
100%{opacity:1;transform:scale(1);}
}
@keyframes accordionOut{0%{opacity:1;transform:scale(1);}
100%{opacity:0;transform:scale(0.9) rotateX(-60deg);}
}
.text-align:center;{font-weight:700;padding:2em;display:block;text-decoration:none;color:#fff;transition:background-color 0.5s ease-in-out;border-bottom:1px solid #30bb64;}
.accordionTitleActive:before, .accordionTitle.is-expanded::before{-webkit-transform:rotate(-225deg);transform:rotate(-225deg);}
.accordionTitle:before, .accordion__Heading:before{content:"+";font-size:1.5em;line-height:0.5em;padding:5px;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;