/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    WARNING:    DO NOT UPDATE OR CHANGE THIS FILE                    +
+     IF YOU WANT MODIFY THESE STYLES PLEASE USE THE OVERRIDE FILE IN YOUR CSS_SITE   +
+     FOLDER, UPDATES TO THESE STYLES DELETED UPON NEXT TEMPLATE UPGRADE              +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* ANIMATION FROM OFF SCREEN TO ON  */

.motion-move-up {
    transform: translateY(5vh);
}

    .motion-move-up.active {
        animation-name: move-up;
        animation-duration: var(--animation-time-slow);
        animation-delay: var(--animation-delay);
        animation-fill-mode: forwards;
    }

.move-in-right .overlay-content * {
    animation-name: move-in-right;
    animation-duration: var(--animation-time-slow);
    animation-delay: var(--animation-delay);
    animation-fill-mode: both;
}

.motion-fade-in {
    opacity: 0;
}

    .motion-fade-in.active {
        animation-name: fade-in;
        animation-duration: var(--animation-time);
        animation-delay: var(--animation-delay-fast);
        animation-fill-mode: forwards;
    }

.motion-grow-up .overlay-content{
    clip-path:inset(100%);
}

.motion-grow-up.active .overlay-content {
    animation-name: move-up, grow-up;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

/*----------------------------------------------------
    MULTIPLE ANIMATIONS
*/

.motion-move-up.motion-fade-in.active {
    animation-name: fade-in, move-up;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

.motion-delay-1.active{
    animation-delay:var(--animation-delay-1) !important;
}
.motion-delay-2.active {
    animation-delay: var(--animation-delay-2) !important;
}
.motion-delay-3.active {
    animation-delay: var(--animation-delay-3) !important;
}
.motion-delay-4.active {
    animation-delay: var(--animation-delay-4) !important;
}
.motion-delay-5.active {
    animation-delay: var(--animation-delay-5) !important;
}
.motion-delay-6.active {
    animation-delay: var(--animation-delay-6) !important;
}

/*--------------------------------------------------
    ANIMATIONS
*/

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes move-up {
    0% {
        transform: translateY(5vh);
    }

    100% {
        transform: translateY(0vh);
    }
}

@keyframes move-in-right {
    0% {
        transform: translateX(100vw);
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translateX(20vw);
    }
}

@keyframes grow-up {
    0% {
        clip-path: inset(100%);
    }

    100% {
        clip-path: inset(0%);
    }
}



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+              END OF STANDARD STYLES YOU ARE                                         +
+     USE THE MY STYLE OVERRIDE CSS FILE TO ADJUST STYLES AS NEEDED                   +
+     PLEASE MAINTAIN YOUR SITE NAVIGATION SECTION IN THE MY NAVIGATION CSS FILE      +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/