/*
            Services Section - Animations
*/

/* Slide Down the Unfocused Boxes */
#service-wrapper.focus .collab-box-wrapper > div:not(.focus) .collab-box {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.3s;
    cursor: default;
    pointer-events: none;
} #service-wrapper.focus .collab-box-wrapper > div:nth-child(1) .collab-box {
    transition-delay: 0.1s;
} #service-wrapper.focus .collab-box-wrapper > div:nth-child(2) .collab-box {
    transition-delay: 0.2s;
} #service-wrapper.focus .collab-box-wrapper > div:nth-child(3) .collab-box {
    transition-delay: 0.3s;
} #service-wrapper.focus .collab-box-wrapper > div:nth-child(4) .collab-box {
    transition-delay: 0.4s;
}

/* Slide Up the Unfocused Boxes - Reversed */
#service-wrapper.un-focus .collab-box-wrapper > div:not(.focus) .collab-box {
    opacity: 1;
    transition: all 0.5s;
} #service-wrapper.un-focus .collab-box-wrapper > div:nth-child(1) .collab-box {
    transition-delay: 0.1s;
} #service-wrapper.un-focus .collab-box-wrapper > div:nth-child(2) .collab-box {
    transition-delay: 0.2s;
} #service-wrapper.un-focus .collab-box-wrapper > div:nth-child(3) .collab-box {
    transition-delay: 0.3s;
} #service-wrapper.un-focus .collab-box-wrapper > div:nth-child(4) .collab-box {
    transition-delay: 0.4s;
}

/* Slide the Focused Box Across */
#service-wrapper.focus .collab-box-wrapper > div.focus .collab-box {
    transition: all 0.7s;
    cursor: default;
    pointer-events: none;
}

#service-wrapper.un-focus .collab-box-wrapper > div.focus .collab-box {
    transition: all 0.7s;
}

/* Turn Flex into Inline-Flex */
#service-wrapper.focus .collab-box-wrapper {
    width: 300px;
    display: inline-flex;
    transition: all 0s;
    transition-delay: 0.45s;
}  


/* Slide over the text */
#service-wrapper .service-text-wrapper {
    display: none;
    width: 820px;
    max-width: 820px;
}

#service-wrapper .service-text-wrapper.display {
    display: inline-block;
}

#service-wrapper.focus .service-text-wrapper.focus {
    display: inline-block;
}

#service-wrapper.focus .service-text-wrapper.focus .service-text {
    opacity: 1;
    max-height: 600px;
    transform: translateX(0px);
    transition: all 0.4s;
    transition-delay: 0.5s;
}

/* Fade in the reset button */
#service-wrapper .reset-services {
    position: absolute;
    bottom: -40px;
    left: 0;
    visibility: hidden;
    opacity: 0;
    width: 0px;
    transition: all 0.2s;
}

#service-wrapper.focus .reset-services {
    opacity: 1;
    width: 100%;
    visibility: visible;
    transition: all 0.3s;
    transition-delay: 0.5s;
}

/* MEDIA */
@media (min-width: 992px) {

    #service-wrapper.focus .collab-box-wrapper > div.focus:nth-child(2) .collab-box {
        transform: translateX(-242px);
    } #service-wrapper.focus .collab-box-wrapper > div.focus:nth-child(3) .collab-box {
        transform: translateX(-484px);
    } #service-wrapper.focus .collab-box-wrapper > div.focus:nth-child(4) .collab-box {
        transform: translateX(-726px);
    } 

    #service-wrapper.focus .collab-box-wrapper {
        width: 250px;
    } 

    #service-wrapper .service-text-wrapper {
        display: none;
        width: 700px;
        max-width: 700px;
    }

}

/* MEDIA */
@media (min-width: 1200px) {

    #service-wrapper.focus .collab-box-wrapper > div.focus:nth-child(2) .collab-box {
        transform: translateX(-287px);
    } #service-wrapper.focus .collab-box-wrapper > div.focus:nth-child(3) .collab-box {
        transform: translateX(-574px);
    } #service-wrapper.focus .collab-box-wrapper > div.focus:nth-child(4) .collab-box {
        transform: translateX(-861px);
    } 
    
    #service-wrapper.focus .collab-box-wrapper {
        width: 300px;
    } 

    #service-wrapper .service-text-wrapper {
        display: none;
        width: 820px;
        max-width: 820px;
    }

}