/********** CUSTOM CSS **********/

.example1, .example2, .example3, .example4 {
    padding: 32px 0;
}

.example2 .cssCollapse-target {
    display: table;
}

.example2 .cssCollapse-collapseIcons {
    display: table-cell;
    vertical-align: middle;
}

.example2 .cssCollapse-text {
    display: table-cell;
    padding-left: 6px;
    vertical-align: inherit;
}

.wrapBoxContent .button.inline {
    width: 40%;
}

/********** PREVENT PERMANENT HIGHLIGHT ON MOBILE **********/

.cssCollapse-target,
.cssCollapse-collapseIcons,
.accordion-target,
.accordion-icons {
    /*-webkit-tap-highlight-color: $transparent;*/
}

/********** CSS COLLAPSE **********/

.cssCollapse-hiddenContent {
    overflow-y: hidden;
    max-height: 0px;
    margin-bottom: 4em;
    -webkit-transition: cubic-bezier(.08,.99,.46,.73) 400ms max-height;
    -moz-transition: cubic-bezier(.08,.99,.46,.73) 400ms max-height;
    -ms-transition: cubic-bezier(.08,.99,.46,.73) 400ms max-height;
    -o-transition: cubic-bezier(.08,.99,.46,.73) 400ms max-height;
    transition: cubic-bezier(.08,.99,.46,.73) 400ms max-height;
}

.cssCollapse-hiddenContent.is-open {
    -webkit-transition: cubic-bezier(.08,.99,.46,.73) 600ms max-height;
    -moz-transition: cubic-bezier(.08,.99,.46,.73) 600ms max-height;
    -ms-transition: cubic-bezier(.08,.99,.46,.73) 600ms max-height;
    -o-transition: cubic-bezier(.08,.99,.46,.73) 600ms max-height;
    transition: cubic-bezier(.08,.99,.46,.73) 600ms max-height;
}

/*** MEDIA QUERY FOR THE HIDDEN CONTENT ***/

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

}

@media only screen and (min-width: 320px) {

}

@media only screen and (min-width: 320px) and (max-width: 480px) {
    .cssCollapse-hiddenContent.is-open {
        max-height: 1900px;
    }
}

@media only screen and (min-width: 481px) {

}

@media only screen and (min-width: 481px) and (max-width: 568px) {
    .cssCollapse-hiddenContent.is-open {
        max-height: 1100px;
    }
}

@media only screen and (min-width: 569px) {

}

@media only screen and (min-width: 569px) and (max-width: 768px){
    .cssCollapse-hiddenContent.is-open {
        max-height: 1000px;
    }
}

@media only screen and (min-width: 769px) {
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .cssCollapse-hiddenContent.is-open {
        max-height: 700px;
    }
}

@media only screen and (min-width: 1025px) {
    .cssCollapse-hiddenContent.is-open {
        max-height: 500px;
    }
}

/********** ACCORDION **********/

.accordionContainer {
    /* border: 1px solid #dddddd; */
}

.accordionContent {
    border-top: 1px solid #dddddd;
}

.accordionContent:first-child {
    border: none;
}

.accordion-target {
    /* padding: 10px 20px; */
    cursor: pointer;
}

.accordion-hiddenContent {
    overflow-y: hidden;
    max-height: 0px;
    padding: 0;
    -webkit-transition: ease-in-out 600ms max-height;
    -moz-transition: ease-in-out 600ms max-height;
    -ms-transition: ease-in-out 600ms max-height;
    -o-transition: ease-in-out 600ms max-height;
    transition: ease-in-out 600ms max-height;
}

.accordion-hiddenContent.is-open {
    max-height: 3000px;
    -webkit-transition: ease-in-out 600ms max-height;
    -moz-transition: ease-in-out 600ms max-height;
    -ms-transition: ease-in-out 600ms max-height;
    -o-transition: ease-in-out 600ms max-height;
    transition: ease-in-out 600ms max-height;
}

/*** MEDIA QUERY FOR THE HIDDEN CONTENT ***/

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

}

@media only screen and (min-width: 320px) {

}

@media only screen and (min-width: 320px) and (max-width: 480px) {
    .accordion-hiddenContent.is-open {
        /*max-height: 1900px;*/
    }
}

@media only screen and (min-width: 481px) {

}

@media only screen and (min-width: 481px) and (max-width: 568px) {
    .accordion-hiddenContent.is-open {
        /*max-height: 1100px;*/
    }
}

@media only screen and (min-width: 569px) {

}

@media only screen and (min-width: 569px) and (max-width: 768px){
    .accordion-hiddenContent.is-open {
        /*max-height: 1000px;*/
    }
}

@media only screen and (min-width: 769px) {
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .accordion-hiddenContent.is-open {
        /*max-height: 700px;*/
    }
}

@media only screen and (min-width: 1025px) {
    .accordion-hiddenContent.is-open {
        /*max-height: 1900px;*/
    }
}