/* ------------------------------ */
/* ----- Accordion (General) ---- */
/* ------------------------------ */

.accordion__header {
    position: relative;
    cursor: pointer;
}
  
.accordion__header .row {
    margin: 0;
}
  
.accordion__content {
    overflow: hidden;
    display: none;
}
  
.accordion__inside .picture_container, .accordion__inside .video_container {
    margin: var(--spacing-5) 0;
}
  
.accordion__inside .picture_container:first-child, .accordion__inside .video_container:first-child {
    margin-top: 0;
}


/* Styling */
.accordions {
    border-bottom: 1px solid var(--color-border-1);
}

.accordions .accordion {
    border-top: 1px solid var(--color-border-1);
    -webkit-transition: var(--transition-1);
    -o-transition: var(--transition-1);
    transition: var(--transition-1);
}

.accordions .accordion.accordion--active {
    background-color: var(--color-background-1);
}

.accordion_trigger {
    padding: 10px 35px 12px var(--spacing-4);
}

.accordion_trigger h4 {
    font-weight: normal;
    -webkit-transition: var(--transition-1);
    -o-transition: var(--transition-1);
    transition: var(--transition-1);
}

.accordion--active .accordion_trigger h4 {
    font-weight: bold;
}

.accordion_trigger span.iconset {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 35px;
    -webkit-transition: var(--transition-1);
    -o-transition: var(--transition-1);
    transition: var(--transition-1);
}

.no-touchevents .accordion:not(.accordion--active) .accordion_trigger:hover h4, .no-touchevents .accordion_trigger:hover span.iconset {
    opacity: var(--opacity-1);
}

.accordion_trigger span.iconset::before {
    -webkit-transition: var(--transition-1);
    -o-transition: var(--transition-1);
    transition: var(--transition-1);
}

.no-touchevents .accordion_trigger:hover span.iconset::before, .accordion--opening .accordion_trigger span.iconset::before, .accordion--active .accordion_trigger span.iconset::before {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
        -ms-transform: translate(-50%, -50%) rotate(90deg);
            transform: translate(-50%, -50%) rotate(90deg);
}

.accordion--active .accordion_trigger span.iconset::before {
    opacity: 0;
}

.accordion__content {
    margin-top: calc(var(--spacing-3) * -1);;
    padding: 0 35px var(--spacing-5) var(--spacing-4);
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media screen and (max-width: 991.98px) and (min-width: 576px) {

    .accordion_trigger, .accordion__content {
        padding-left: var(--spacing-3);
    }

}


@media screen and (max-width: 767.98px) {

    .accordion_trigger span.iconset::before {
        top: 14px;
        -webkit-transform: translateX(-50%) scale(.9);
            -ms-transform: translateX(-50%) scale(.9);
                transform: translateX(-50%) scale(.9);
    }

    .no-touchevents .accordion_trigger:hover span.iconset::before, .accordion--active .accordion_trigger span.iconset::before {
        -webkit-transform: translateX(-50%) rotate(90deg) scale(.9);
            -ms-transform: translateX(-50%) rotate(90deg) scale(.9);
                transform: translateX(-50%) rotate(90deg) scale(.9);
    }

}


@media screen and (max-width: 575.98px) { 

    .accordions {
        margin-right: calc(var(--spacing-6) * -1);
        margin-left: calc(var(--spacing-6) * -1);
    }

    .accordion_trigger, .accordion__content {
        padding-right: calc(var(--spacing-6) + 30px);
        padding-left: var(--spacing-6);
    }

    .accordion_trigger span.iconset {
        right: calc(var(--spacing-6) / 2);
    }

}