/* =========================
   FAQ
   ========================= */
.faq-navigation {
    border: 1px solid #F2F2F2;
    background-color: #F7F7F7;

    transition: border 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.faq-navigation.active {
    border: 1px solid #DE3412;
    background-color: #ED3F1D;
}

.faq-navigation > span {
    color: #494949;

    transition: color 0.3s ease-in-out;
}
.faq-navigation.active > span {
    color: white;
}

.faq-item {
    max-height: 0px;
    opacity: 0;

    background-color: #F7F7F7;
    row-gap: 0px;

    padding-top: 0px;
    padding-bottom: 0px;

    margin-bottom: 0px;

    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out, row-gap 0.3s linear, padding-top 0.3s linear, padding-bottom 0.3s linear, margin-bottom 0.3s linear;
}
.faq-item.active {
    max-height: 240px;
    opacity: 1;

    padding-top: 20px;
    padding-bottom: 20px;

    margin-bottom: 12px;
}
.faq-item.expanded {
    row-gap: 20px;
}

.faq-item img {
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
}
.faq-item.expanded img {
    transform: rotate(180deg);
}

.faq-item:hover {
    background-color: #F3F3F3;
}

.faq-item .faq-answer {
    max-height: 0px;
    opacity: 0;

    overflow: hidden;

    transition: max-height 0.3s linear, opacity 0.3s linear;
}
.faq-item.expanded .faq-answer {
    max-height: 240px;
    opacity: 1;
}

#faq-view-more-container {
    max-height: 0px;
    opacity: 0;

    transition: max-height 0.3s linear, opacity 0.3s linear;
}

#faq-view-more-container.active {
    max-height: 640px;
    opacity: 1;
}