/* Basic Accordion Styles */
.accordion {

}

.accordion > div{
    border-bottom: 1px solid rgba(152, 118, 126, 0.5);
}

.accordion h4{
	width: 90%;
}

.accordion input[name=panel] {
    display: none;
}
.accordion label {
    position: relative;
    display: block;
    padding: 1em;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.accordion label h3{
    margin: 0;
    padding-right: 30px;
}

.accordion label:before {
    content: "\e900";
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -16px;
    font-family: "dexalot";
    z-index: 1;
    transform: rotate(180deg);
    transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
    border: 1px solid var(--color-white);
    width: 30px;
    height: 30px;
    border-radius: 30px;
    line-height: 30px;
    text-align: center;
}

.accordion label:hover {

}
.accordion input:checked + label{
    color: var(--color-red);
}

.accordion input:checked + label:before {
    transform: rotate(0deg);
    color: var(--color-red);
}

.accordion .accordion__content {
    overflow: hidden;
    /*height: 0px;*/
    max-height: 0;
    position: relative;
    transition: all 0.4s;
    box-sizing: border-box;
}

.accordion .accordion__content p{
    padding-left: 50px;
    padding-bottom: 30px;
    margin: 0;
    width: 70%;
}

.accordion .accordion__content .accordion__header {
    padding: 1em 0;
}
.accordion .accordion__content .accordion__body {
    font-size: 0.825em;
    line-height: 1.4em;
}

/*
* Size Variations
*/
input[name=panel]:checked ~ .accordion__content.accordion__content--small {
    /*height: 100px;*/
    max-height: 200px;
}

input[name=panel]:checked ~ .accordion__content.accordion__content--med {
    /*height: 200px;*/
    max-height: 400px;
}

input[name=panel]:checked ~ .accordion__content.accordion__content--large {
    /*height: 400px;*/
    max-height: 600px;
}

@media (max-width: 768px){
    input[name=panel]:checked ~ .accordion__content.accordion__content--small {
        /*height: 100px;*/
        max-height: 400px;
    }

    input[name=panel]:checked ~ .accordion__content.accordion__content--med {
        /*height: 200px;*/
        max-height: 600px;
    }

    input[name=panel]:checked ~ .accordion__content.accordion__content--large {
        /*height: 400px;*/
        max-height: 1000px;
    }
}