/* --------------------------------- */
/* -------- Accordions ------------- */
/* --------------------------------- */
	
.accordion-container {
    margin-top:4em;
    margin-bottom:5em;
    font-size: 0.9em;
}


.accordion{
    margin-bottom: 2em;
}

/* -------- Header ------------- */
.accordion-checkbox{display:none;}
.accordion-header{
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 0em;
    padding: 0.7em ;
    border-radius:2px;
    overflow: hidden;
    font-size:1.2em;
    font-weight: bold;
    color: #444;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.1s;
}
.accordion-header > *{
    position: relative;
}
.accordion-header .header-bar{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: linear-gradient( to right, rgba(67,67,67,1), rgba(67,67,67,0));
    opacity: 0.5;
    transition: all 1s;
}
.accordion-checkbox:checked + .accordion-header .header-bar{
    opacity:1;
}
.accordion-checkbox:checked + .accordion-header{
    color: #f9f9f9;
}

/* -------- Title ------------- */
.accordion-header .accordion-title{
    transition: all 0.3s;
}
.accordion-header:hover .accordion-title{
    color: #333;
}
.accordion-checkbox:checked + .accordion-header:hover .accordion-title{
    color: #fff;
}

.accordion-checkbox:checked + .accordion-header .indicator-collapsed{
    display: none;
}
.accordion-checkbox:not(:checked)+ .accordion-header .indicator-uncollapsed{
    display: none;
}

.indicator-collapsed, .indicator-uncollapsed{
    padding: 0 1em;
}

/* -------- Content ------------- */
.accordion-content{
    padding-left: 2em;
    max-height:0;
    margin-top: 0;
    overflow:hidden;
    transition: all .5s ease-in-out;
    border: 0;
    overflow-y: hidden;
}
.accordion-content span{
    opacity: 0;
    transition: all 0.5s;
}
.accordion-checkbox:checked + .accordion-header + .accordion-content{
    max-height: 60vh;
    margin-top: 1em;
    overflow: auto;
    border-radius:3px;
}
.accordion-checkbox:checked + .accordion-header + .accordion-content span{
    opacity: 1;
}
.accordion-checkbox:checked + .accordion-header + .accordion-content::-webkit-scrollbar{
    width: 6px;
    background-color: #F5F5F5;
}
.accordion-checkbox:checked + .accordion-header + .accordion-content::-webkit-scrollbar-thumb{
    background-color: darkgray;
    border-radius:5px;
}