/** 
This file will handle the animations triggered by the intersect.js and intersect_content.js files.

*/
.out-on-load{
    opacity: 0; 
}

.in-on-load{
    opacity:1;
}
.animate-in-now{
    opacity: 0;
    transition:all;
    animation-name:fadeInUp;
    animation-delay: 0.1s;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

@keyframes fadeInUp {
    0%{
        opacity:0;
        transform: translateY(30px);
    }
    100%{
        opacity:1;
        transform: translateY(0px);
    }
}

.transparent-header > .wp-block-group:first-child{
    background-color: transparent!important;
    transition:0.3s;
}
.solid-header > .wp-block-group:first-child{
    background-color: currentColor;
    transition:0.3s;
}

/** 
    SEPARATOR ANIMATIONS TO CHANGE WIDTH
*/

.uagb-separator.animate-separator{
    animation-name:changeTransform;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    animation-duration: 0.3s;
    transition: transform ease;
    transform:scalex(0);
    width:50%!important;
}
.uagb-separator.out-on-load{
    width:0px; 
    transition:1s;
}
.uagb-separator.in-on-load{
    transform:scalex(1);
    transition:1s;
    transition: transform ease;
    width:50%!important;
}


@keyframes changeWidth {
    0%{
        width:0px;
    }
    100%{
        width:50%;
    }
    
}
@keyframes changeTransform {
    0%{
        transform:scaleX(0)
    }
    100%{
        transform:scaleX(1)
    }
    
}