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

.accordions {
    max-width: 1440px;
    border-top: 2px solid var(--border-color);
}

.section--color .accordions {
    border-color: var(--color-white-transparent);
}

.accordion {
    position: relative;
    border-bottom: 2px solid var(--border-color);
    -webkit-transition: var(--transition-2);
    -o-transition: var(--transition-2);
    transition: var(--transition-2);
}

.section--color .accordion {
    border-color: var(--color-white-transparent);
}

.accordion__header {
    position: relative;
    cursor: pointer;
}
  
.accordion__header .row {
    margin: 0;
}
  
.accordion__content {
    overflow: hidden;
    display: none;
}

.accordion--status .accordion__content, .accordion--pre_owner .accordion__content, .accordion--placements .accordion__content {
    overflow: visible;
}

.accordion--pre_owner address {
    margin-bottom: var(--spacing-0);
}



/* ------------------------------ */
/* ------ Simple Accordion ------ */
/* ------------------------------ */

.accordion_trigger {
    position: relative;
}

.accordion_trigger h4 {
    display: inline-block;
    margin-bottom: 0;
}

.accordion_trigger span.typography--xs {
    margin-left: var(--spacing-0);
}

.accordion_trigger--fade h4, .accordion_trigger--fade span.typography--xs {
    opacity: var(--opacity-2);
}

.accordion_trigger .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg) scale(.8);
    right: var(--spacing-2);
    -webkit-transition: var(--transition-2);
    -o-transition: var(--transition-2);
    transition: var(--transition-2);
}

.no-touchevents .accordion:not(.accordion--active):hover .accordion_trigger .icon, .accordion.accordion--awaiting .accordion_trigger .icon, .accordion.accordion--active .accordion_trigger .icon {
    -webkit-transform: translateY(-50%) rotate(-180deg) scale(.8);
        -ms-transform: translateY(-50%) rotate(-180deg) scale(.8);
            transform: translateY(-50%) rotate(-180deg) scale(.8);
}

.accordion.accordion--active .accordion_trigger .icon {
    opacity: .5;
}



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


@media all and (min-width: 768px) {

    .accordion__content {
        margin-top: var(--spacing-0);
    }

    .accordion.accordion--active {
        background-color: var(--brand-beige);
    }

}


@media all and (min-width: 1240px) {

    .accordion_trigger {
        padding: 22px var(--spacing-7) 18px var(--spacing-2);
    }

    .accordion__content {
        padding: 0 var(--spacing-2) var(--spacing-6);
    }

    .accordion--animal-1 .accordion_trigger, .accordion--animal-2 .accordion_trigger, .accordion--animal-3 .accordion_trigger, .accordion--animal-4 .accordion_trigger, .accordion--animal .accordion_trigger {
        padding-right: 230px;
    }
    
}


@media all and (max-width: 1239.98px) and (min-width: 768px) {

    .accordion_trigger {
        padding: 22px var(--spacing-7) 18px 15px;
    }

    .accordion__content {
        padding: 0 15px var(--spacing-6);
    }

    .accordion .fake_table {
        padding-top: 15px;
    }
    
    .accordion--animal-1 .accordion_trigger, .accordion--animal-2 .accordion_trigger, .accordion--animal-3 .accordion_trigger, .accordion--animal-4 .accordion_trigger, .accordion--animal .accordion_trigger {
        padding-right: 200px;
    }

}


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

    .accordion_trigger {
        padding: 18px var(--spacing-7) 14px 12px;
    }

    .accordion:not(.accordion--general_info):not(.accordion--animal-1):not(.accordion--animal-2):not(.accordion--animal-3):not(.accordion--animal-4):not(.accordion--animal) .accordion__content {
        margin-top: 5px;
    }

    .accordion--general_info .accordion__content, .accordion--animal-1 .accordion__content, .accordion--animal-2 .accordion__content, .accordion--animal-3 .accordion__content, 
    .accordion--animal-4 .accordion__content, .accordion--animal .accordion__content {
        margin-top: var(--spacing-1);
    }

    .accordion_trigger .icon {
        right: 0;
    }

    .accordion__content {
        padding: 0 12px var(--spacing-6);
    }

    .accordion_trigger span.typography--xs {
        display: block;
        margin-left: 0;
        margin-top: -2px;
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .accordion--animal-1 .accordion_trigger, .accordion--animal-2 .accordion_trigger, .accordion--animal-3 .accordion_trigger, .accordion--animal-4 .accordion_trigger, .accordion--animal .accordion_trigger {
        padding-right: 170px;
    }

}