/*CSS FOR ACCORDIONS*/

.accordion-head {
    display: flex;
    justify-content: flex-start;
    padding: 1em 0em;
    max-width: 52rem;
    align-items: center;
}

.accordion-head h4 {
    margin: 0;
    margin-right: 1em;
}

.accordion-head:hover {
    cursor: pointer;
}

.accordion-expand {
    font-size: 150%;
    font-weight: 300;
    padding: 0px 8px;
    border-radius: 50%;
}
.minus {
    font-size: 220%;
    margin-bottom: 5px;
}
.accordion-title {
    font-size: 120%;
    margin: 0px 5px;
}

.accordion-body {
    max-height: 0;
    visibility: hidden; 
    overflow: hidden;
    transition-duration: 800ms; 
    transition-property: max-height, visibility; 
}

.accordion-body.open {
    visibility: visible; 
    transition-duration: 800ms; 
    transition-property: max-height, visibility; 
}

.accordion-body >div {
	padding-bottom: 20px;
}

.accordion-container {
    border-bottom: 1px solid #d9d9d9;
    max-width: 52rem;
    margin: .5em auto;
/*    padding: .5em 0em;*/
}

/* [ ] how to get some padding into the bottom of the open accordions here?
/*
.accordion-container:last-child {
    border-bottom: none;
}
*/

.action {
    color: #fff;
    background-color: #3a7aaf;
    border-color: #2d5d85;
}