/*
|--------------------------------------------------------------------------
| Sticky header
|--------------------------------------------------------------------------
*/
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    animation: headroomPinned 200ms linear;
}
@keyframes headroomPinned {
    from {
        transform: translateY(-100%);
        visibility: hidden;
    }

    to {
        transform: translateY(0%);
        visibility: visible;
    }
}
.headroom--unpinned {
    transform: translateY(-100%);
}
/*
|--------------------------------------------------------------------------
| Section 1 (Hero section)
|--------------------------------------------------------------------------
*/
@media (min-width: 1024px) {
    #hero-image {
        width: 70%;
    }
}
@media (min-width: 1280px) {
    #hero-image {
        width: 60%;
    }
}
/*
|--------------------------------------------------------------------------
| Section 2
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) {
    #section-2-image {
        width: 30rem;
    }
}
/*
|--------------------------------------------------------------------------
| Section 4
|--------------------------------------------------------------------------
*/
@media (min-width: 1024px) {
    #section-4-grid-1 {
        max-width: 600px;
    }
}
/*
|--------------------------------------------------------------------------
| FAQ Section
|--------------------------------------------------------------------------
*/
#section-faq details {
    overflow: hidden;
}
#section-faq summary {
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
#section-faq summary::after {
    content: "+";
    text-align: center;
    position: absolute;
    right: 0;
    transform: rotate(0deg);
    transform-origin: 0.2rem 50%;
    transition: 150ms transform ease;
    transition-property: color, background-color;
    background-color: #dbdbdb;
    color: #fff;
    height: 1.5rem;
    width: 1.25rem;
    border-radius: 0.25rem;
    font-size: 1.5rem;
}
@media (min-width: 640px) {
    #section-faq summary::after {
        height: 1.75rem;
    }
}
#section-faq details[open] > summary {
    color: #a100ff;
}
#section-faq details[open] > summary::after {
    content: "-";
    background-color: #a100ff;
}
#section-faq details > summary {
    list-style: none;
}
#section-faq details > summary::marker,
#section-faq details > summary::-webkit-details-marker {
    display: none;
}