/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    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              +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/*---------------------------------------------------------
    BELOW ARE MOTION STYLES -- 
    
    CHECK THE BOTTOM OF THE FILE FOR COMBINATION STYLES, OTHERWISE FIRST MOTION WINS
    ============================================================================================================
*/
/* ANIMATION FROM OFF SCREEN TO ON  */

/*-- MOVE MOTIONS --*/
body [class*='motion-move'] .overlay-content {
    visibility:hidden;
}

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

@keyframes move-up {
    0% {
        transform: translateY(50px);
        visibility: hidden;
        transform-style: preserve-3d;
    }

    20% {
        visibility: visible;
    }

    100% {
        transform: translateY(0px);
        visibility: visible;
        transform-style: preserve-3d;
    }
}

body .motion-move-up-elements .overlay-content,
body .grid-background.motion-move-up-elements {
    visibility: visible;
}

    body .motion-move-up-elements .overlay-content > * {
        visibility: hidden;
    }

body .motion-move-up-elements.active .overlay-content > * {
    animation-name: move-up;
    animation-delay: var(--animation-delay);
    animation-duration: var(--animation-time);
    animation-fill-mode: forwards;
}

    body .motion-move-up-elements.active .overlay-content > *:nth-child(1) {
        animation-delay: var(--animation-delay-1);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(2) {
        animation-delay: var(--animation-delay-2);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(3) {
        animation-delay: var(--animation-delay-3);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(4) {
        animation-delay: var(--animation-delay-4);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(5) {
        animation-delay: var(--animation-delay-5);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(6) {
        animation-delay: var(--animation-delay-6);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(7) {
        animation-delay: var(--animation-delay-7);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(8) {
        animation-delay: var(--animation-delay-8);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(9) {
        animation-delay: var(--animation-delay-9);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(10) {
        animation-delay: var(--animation-delay-10);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(11) {
        animation-delay: var(--animation-delay-11);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(12) {
        animation-delay: var(--animation-delay-12);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(13) {
        animation-delay: var(--animation-delay-13);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(14) {
        animation-delay: var(--animation-delay-14);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(15) {
        animation-delay: var(--animation-delay-15);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(16) {
        animation-delay: var(--animation-delay-16);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(17) {
        animation-delay: var(--animation-delay-17);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(18) {
        animation-delay: var(--animation-delay-18);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(18) {
        animation-delay: var(--animation-delay-19);
    }

    body .motion-move-up-elements.active .overlay-content > *:nth-child(20) {
        animation-delay: var(--animation-delay-20);
    }

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

@keyframes move-down {
    0% {
        transform: translateY(-50px);
        opacity: 0;
        transform-style: preserve-3d;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
        transform-style: preserve-3d;
    }
}

body .motion-move-right.active .overlay-content {
    animation-name: move-right;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: both;
}

@keyframes move-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
        transform-style: preserve-3d;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateX(0vw);
        opacity: 1;
        transform-style: preserve-3d;
    }
}

body .motion-move-left.active .overlay-content {
    animation-name: move-left;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: both;
}


@keyframes move-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
        transform-style: preserve-3d;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        transform-style: preserve-3d;
    }
}

/*  -- FADE MOTIONS -- */
body .motion-fade-in .overlay-content {
    opacity: 0;
}

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

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

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

.motion-fade-in-open {
  opacity:0;
  visibility:hidden;
}
.motion-fade-in-open.active {
    animation-name: fade-in-open;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;

}

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

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

    100% {
        opacity: 1;
        visibility:visible;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-out-slow {
    0% {
        opacity: 1;
    }

    99% {
        opacity: .1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-in-open {
    0% {
        opacity: 0;
        visibility:hidden;
        height: 0px;
    }

    1% {
        opacity: 0;
        visibility: hidden;
        height: 40%;
    }

    100% {
        opacity: 1;
        visibility: visible;
        height: 100%;
    }
}

@keyframes fade-out-close {
    0% {
        opacity: 1;
        height: auto;
        visibility: visible;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        height: 0px;
        visibility: hidden;
    }
}



body .motion-pull-up .overlay-content,
body .motion-pull-down .overlay-content,
body .motion-pull-left .overlay-content,
body .motion-pull-right .overlay-content {
    position: relative;
    z-index: 2;
}

    body .motion-pull-up .overlay-content *,
    body .motion-pull-down .overlay-content *,
    body .motion-pull-left .overlay-content *,
    body .motion-pull-right .overlay-content * {
        visibility: hidden;
        background-color:inherit;
        color:inherit;
    }

body .motion-pull-up.active .overlay-content *,
body .motion-pull-down.active .overlay-content *,
body .motion-pull-left.active .overlay-content *,
body .motion-pull-right.active .overlay-content * {
    animation: 200ms ease-in 1.3s forwards fade-in;
}

body .motion-pull-up.active:before,
body .motion-pull-down.active:before,
body .motion-pull-left.active:before,
body .motion-pull-right.active:before {
    content: " ";
    position: absolute;
    background-color: var(--my-gray);
    opacity: 1;
    bottom: 0px;
    left: 0px;
    height: 3px;
    width: 0px;
    z-index: 5;
    animation: 1.5s linear 100ms forwards pull-up;
}

body .motion-pull-down.active:before {
    animation: 1.5s linear 100ms forwards pull-down;
}

body .motion-pull-left.active:before {
    animation: 1.5s linear 100ms forwards pull-left;
}

body .motion-pull-right.active:before {
    animation: 1.5s linear 100ms forwards pull-right;
}

body .motion-reveal-left .overlay-content {
    position: relative;
    z-index: 2;
}

    body .motion-reveal-left .overlay-content * {
        opacity: 0;
    }

body .motion-reveal-left.active .overlay-content * {
    animation: 10ms ease-in 1.7s forwards fade-in;
}

body .motion-reveal-left.active .overlay-content:before {
    content: " ";
    position: absolute;
    background-color: var(--my-gray);
    opacity: 1;
    top: 0px;
    left: 0px;
    height: 0px;
    width: 3px;
    z-index: 5;
    animation: 400ms ease-in 100ms forwards expand-down, 1s ease-in 600ms forwards reveal-left;
}


body .motion-reveal-bottom .overlay-content {
    position: relative;
    z-index: 2;
}

    body .motion-reveal-bottom .overlay-content * {
        opacity: 0;
    }

body .motion-reveal-bottom.active .overlay-content * {
    animation: 10ms ease-in 1.2s forwards fade-in;
}

body .motion-reveal-bottom.active .overlay-content:before {
    content: " ";
    position: absolute;
    background-color: var(--my-gray);
    opacity: 1;
    bottom: 0px;
    left: 0px;
    height: 3px;
    width: 0px;
    z-index: 5;
    animation: 400ms ease-in 100ms forwards expand-right, 1s ease-in 600ms forwards reveal-up;
}

body .motion-reveal-wipe .overlay-content {
    position: relative;
    z-index: 2;
}

body .motion-reveal-wipe {
    opacity: 0;
}

    body .motion-reveal-wipe.active {
        animation: 1.5s linear 600ms forwards reveal-wipe;
    }

body .motion-reveal-iris {
    opacity: 0;
}

    body .motion-reveal-iris.active {
        animation: 1.5s linear 600ms forwards reveal-iris;
    }

body .motion-reveal-sunrise {
    opacity: 0;
}

    body .motion-reveal-sunrise.active {
        animation: 1.5s linear 600ms forwards reveal-sunrise;
    }

body .motion-reveal-up {
    opacity: 0;
}

    body .motion-reveal-up.active {
        animation: var(--animation-time) linear var(--animation-delay) forwards reveal-up;
    }


body .motion-background-first, body .motion-background-first .overlay-content {
    opacity: 0;
}

    body .motion-background-first .overlay-content {
        transform: translateY(5vh);
    }

    body .motion-background-first.active {
        animation: 550ms linear 10ms forwards reveal-up;
    }

        body .motion-background-first.active .overlay-content {
            animation: 200ms linear 900ms forwards fade-in, 600ms linear 1s forwards move-up;
        }


body .motion-pivot-up .overlay-content {
    transform: rotateX(0deg);
    transform-origin: bottom;
    opacity: 0;
}

body .motion-pivot-up.active .overlay-content {
    animation: 1s linear 1s forwards pivot-up;
}

body .motion-pivot-down .overlay-content {
    transform: rotateX(0deg);
    transform-origin: top;
    opacity: 0;
}

body .motion-pivot-down.active .overlay-content {
    animation: 1s linear 1s forwards pivot-down;
}

body .motion-pivot-left .overlay-content {
    transform: rotateY(90deg);
    transform-origin: left;
    opacity: 0;
}

body .motion-pivot-left.active .overlay-content {
    animation: 1s linear 1s forwards pivot-left;
}

body .motion-pivot-right .overlay-content {
    transform: rotateY(90deg);
    transform-origin: right;
    opacity: 0;
}

body .motion-pivot-right.active .overlay-content {
    animation: 1s linear 1s forwards pivot-right;
}

body .motion-image-glow {
    z-index: 5;
}

    body .motion-image-glow .overlay-content {
        position: relative;
        padding: 0px;
        background-color: var(--primary);
        color: var(--primary-text);
        z-index: 5;
    }

    body .motion-image-glow.active:after {
        content: " ";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        /* height: 100%; */
        /* width: 100%; */
        margin: 0 auto;
        filter: blur(3px);
        /* transform: scale(0.98); */
        background: linear-gradient(270deg, var(--secondary), var(--orange));
        background-size: 250% 250%;
        z-index: -1;
        animation: 5s ease 900ms infinite background-glow;
    }

    body .motion-image-glow.active .overlay-content {
        border: solid 1px var(--border-dark-gray);
    }

body .motion-header-outline h1, body .motion-header-outline h2, body .motion-header-outline h3, body .motion-header-outline h4 {
    padding: 20px;
    position: relative;
    width: calc(100% - 20px);
    margin: 8px auto;
    z-index: 5;
    text-align: center;
}

body .motion-header-outline.active h1, body .motion-header-outline.active h2, body .motion-header-outline.active h3, body .motion-header-outline.active h4 {
    text-shadow: var(--text-shadow);
    animation: 400ms linear 1s forwards text-shadow-down, 400ms linear 2s forwards outline-gray;
}

    body .motion-header-outline.active h1:before, body .motion-header-outline.active h2:before, body .motion-header-outline.active h3:before, body .motion-header-outline.active h4:before {
        position: absolute;
        content: "";
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        opacity: 0;
        z-index: -1;
        animation: 600ms linear 300ms forwards motion-header-before;
    }

    body .motion-header-outline.active h1:after, body .motion-header-outline.active h2:after, body .motion-header-outline.active h3:after, body .motion-header-outline.active h4:after {
        position: absolute;
        content: "";
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: var(--my-white);
        opacity: 0;
        z-index: -2;
        animation: 600ms linear 1.3s forwards motion-header-after;
    }

body.dark-mode .motion-header-outline.active h1, body.dark-mode .motion-header-outline.active h2, body.dark-mode .motion-header-outline.active h3, body.dark-mode .motion-header-outline.active h4 {
    text-shadow: var(--text-shadow);
    animation: 400ms linear 1s forwards text-shadow-down, 400ms linear 2s forwards outline-white;
}

    body.dark-mode .motion-header-outline.active h1:before, body.dark-mode .motion-header-outline.active h2:before, body.dark-mode .motion-header-outline.active h3:before, body.dark-mode .motion-header-outline.active h4:before {
        position: absolute;
        content: "";
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        opacity: 0;
        z-index: -1;
        animation: 600ms linear 300ms forwards motion-header-before-dark;
    }

    body.dark-mode .motion-header-outline.active h1:after, body.dark-mode .motion-header-outline.active h2:after, body.dark-mode .motion-header-outline.active h3:after, body.dark-mode .motion-header-outline.active h4:after {
        position: absolute;
        content: "";
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: var(--my-white);
        opacity: 0;
        z-index: -2;
        animation: 600ms linear 1.3s forwards motion-header-after-dark;
    }

.motion-button-wipe a[class*='button'] {
    overflow: hidden;
    position: relative;
}

    .motion-button-wipe a[class*='button']:after {
        background: #fff;
        content: "";
        height: 155px;
        left: -75px;
        opacity: 0.2;
        position: absolute;
        top: -50px;
        transform: rotate(35deg);
        transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
        width: 50px;
        z-index: 1;
    }

    .motion-button-wipe a[class*='button']:hover:after {
        left: 122%;
        transition: left 550ms cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 1;
    }

.motion-button-outline a[class*='button'] {
    position: relative;
    overflow: hidden;
    z-index: 5;
}

    .motion-button-outline a[class*='button'] span.outline {
        display: none;
    }

    .motion-button-outline a[class*='button']:hover span.outline {
        display: block;
    }

        .motion-button-outline a[class*='button']:hover span.outline:nth-child(1) {
            background: linear-gradient(to right, rgba(255, 255, 255, .15), rgba(255, 255, 255, .001));
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 6px;
            animation: 500ms linear 100ms forwards outline-top;
        }

        .motion-button-outline a[class*='button']:hover span.outline:nth-child(2) {
            background: linear-gradient(to top, rgba(255, 255, 255, .25), rgba(255, 255, 255, .01));
            position: absolute;
            top: -100%;
            left: 0px;
            width: 1px;
            height: 100%;
            animation: 500ms linear 200ms forwards outline-left;
        }

        .motion-button-outline a[class*='button']:hover span.outline:nth-child(4) {
            background: linear-gradient(to left, rgba(255, 255, 255, .25), rgba(255, 255, 255, .01));
            position: absolute;
            bottom: 0;
            left: -100%;
            width: 100%;
            height: 6px;
            animation: 500ms linear 400ms forwards outline-bottom;
        }

        .motion-button-outline a[class*='button']:hover span.outline:nth-child(3) {
            background: linear-gradient(to top, rgba(255, 255, 255, .25), rgba(255, 255, 255, .01));
            position: absolute;
            top: 100%;
            right: 0px;
            width: 1px;
            height: 100%;
            animation: 500ms linear 500ms forwards outline-right;
        }


.motion-button-bars a[class*='button'] {
    position: relative;
    z-index: 5;
}

    .motion-button-bars a[class*='button']:hover {
        background-color: var(--my-gray) !important;
        color: var(--my-gray-text) !important;
        border-color: transparent;
        box-shadow: var(--box-shadow);
        transition: all linear 200ms;
    }

.motion-button-bars.active a[class*='button']:hover:before {
    z-index: -1;
    content: "";
    position: absolute;
    top: -3px;
    left: 100%;
    right: -3px;
    background-color: var(--orange);
    animation: 200ms linear forwards button-bars-before;
}

.motion-button-bars.active a[class*='button']:hover:after {
    z-index: -1;
    content: "";
    position: absolute;
    bottom: -3px;
    left: -3px;
    right: 100%;
    background-color: var(--orange);
    animation: 200ms linear forwards button-bars-after;
}

.motion-grow-col, .motion-grow-row, .motion-grow-col-zoom, .motion-grow-row-zoom {
    opacity: 0;
}


    .motion-grow-col.active {
        clip-path: polygon(47% 0%, 53% 0%, 53% 100%, 47% 100%);
        animation: 400ms linear 500ms forwards grow-col;
    }

    .motion-grow-col-zoom.active {
        clip-path: polygon(47% 0%, 53% 0%, 53% 100%, 47% 100%);
        background-image: none;
        overflow: hidden;
        animation: 400ms linear 500ms forwards grow-col;
    }

    .motion-grow-row.active {
        clip-path: polygon(50% 0%, 50% 100%, 50% 100%, 50% 0%);
        animation: 400ms linear 500ms forwards grow-row;
    }

    .motion-grow-row-zoom.active {
        clip-path: polygon(50% 0%, 50% 100%, 50% 100%, 50% 0%);
        overflow: hidden;
        animation: 400ms linear 500ms forwards grow-row;
    }

.motion-grow-expand {
    transform: translate3d(0px, 0px, 0px) scale3d(0.65, 0.65, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    opacity: 0;
}

    .motion-grow-expand.active {
        animation: 400ms linear 500ms forwards grow-expand;
    }


.zoom-background {
    position: absolute;
    z-index: -1 !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    .zoom-background:before {
        position: absolute;
        z-index: 0 !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: " ";
        background-color: var(--box-shade-background);
    }

    .zoom-background.background-darker:before {
        position: absolute;
        z-index: 0 !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: " ";
        background-color: var(--box-shade-background-more);
    }

    .zoom-background.background-lighter:before {
        position: absolute;
        z-index: 0 !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: " ";
        background-color: var(--box-shade-background-less);
    }

.motion-grow-col-zoom.active .zoom-background, .motion-grow-row-zoom.active .zoom-background {
    animation: 800ms linear 500ms forwards zoom-to-normal;
}



/*----------------------------------------------------
    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-move-down.motion-fade-in.active {
    animation-name: fade-in, move-down;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: forwards;
}

.motion-delay-0.active, .motion-delay-0.active .overlay-content {
    animation-delay: var(--animation-delay-0) !important;
}

[class*='motion-pull'].motion-delay-0.active .overlay-content, [class*='motion-pull'].motion-delay-0.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-0) + 1200ms) !important;
}

.motion-delay-1.active, .motion-delay-1.active .overlay-content {
    animation-delay: var(--animation-delay-1) !important;
}

[class*='motion-pull'].motion-delay-1.active .overlay-content, [class*='motion-pull'].motion-delay-1.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-1) + 1200ms) !important;
}

.motion-delay-2.active, .motion-delay-2.active .overlay-content {
    animation-delay: var(--animation-delay-2) !important;
}

[class*='motion-pull'].motion-delay-2.active .overlay-content, [class*='motion-pull'].motion-delay-2.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-2) + 1200ms) !important;
}

.motion-delay-3.active, .motion-delay-3.active .overlay-content {
    animation-delay: var(--animation-delay-3) !important;
}

[class*='motion-pull'].motion-delay-3.active .overlay-content, [class*='motion-pull'].motion-delay-3.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-14) + 1200ms) !important;
}

.motion-delay-4.active, .motion-delay-4.active .overlay-content {
    animation-delay: var(--animation-delay-4) !important;
}

[class*='motion-pull'].motion-delay-4.active .overlay-content, [class*='motion-pull'].motion-delay-4.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-4) + 1200ms) !important;
}

.motion-delay-5.active, .motion-delay-5.active .overlay-content {
    animation-delay: var(--animation-delay-5) !important;
}

[class*='motion-pull'].motion-delay-5.active .overlay-content, [class*='motion-pull'].motion-delay-5.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-5) + 1200ms) !important;
}

.motion-delay-6.active, .motion-delay-6.active .overlay-content {
    animation-delay: var(--animation-delay-6) !important;
}

[class*='motion-pull'].motion-delay-6.active .overlay-content, [class*='motion-pull'].motion-delay-6.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-6) + 1200ms) !important;
}

.motion-delay-7.active, .motion-delay-7.active .overlay-content {
    animation-delay: var(--animation-delay-7) !important;
}

[class*='motion-pull'].motion-delay-7.active .overlay-content, [class*='motion-pull'].motion-delay-7.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-7) + 1200ms) !important;
}

.motion-delay-8.active, .motion-delay-8.active .overlay-content {
    animation-delay: var(--animation-delay-8) !important;
}

[class*='motion-pull'].motion-delay-8.active .overlay-content, [class*='motion-pull'].motion-delay-8.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-8) + 1200ms) !important;
}

.motion-delay-9.active, .motion-delay-9.active .overlay-content {
    animation-delay: var(--animation-delay-9) !important;
}

[class*='motion-pull'].motion-delay-9.active .overlay-content, [class*='motion-pull'].motion-delay-9.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-9) + 1200ms) !important;
}

.motion-delay-10.active, .motion-delay-10.active .overlay-content {
    animation-delay: var(--animation-delay-10) !important;
}

[class*='motion-pull'].motion-delay-10.active .overlay-content, [class*='motion-pull'].motion-delay-10.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-10) + 1200ms) !important;
}

.motion-delay-11.active, .motion-delay-11.active .overlay-content {
    animation-delay: var(--animation-delay-11) !important;
}

[class*='motion-pull'].motion-delay-11.active .overlay-content, [class*='motion-pull'].motion-delay-11.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-11) + 1200ms) !important;
}

.motion-delay-12.active, .motion-delay-12.active .overlay-content {
    animation-delay: var(--animation-delay-12) !important;
}

[class*='motion-pull'].motion-delay-12.active .overlay-content, [class*='motion-pull'].motion-delay-12.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-12) + 1200ms) !important;
}

.motion-delay-13.active, .motion-delay-13.active .overlay-content {
    animation-delay: var(--animation-delay-13) !important;
}

[class*='motion-pull'].motion-delay-13.active .overlay-content, [class*='motion-pull'].motion-delay-13.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-13) + 1200ms) !important;
}

.motion-delay-14.active, .motion-delay-14.active:before, .motion-delay-14.active .overlay-content {
    animation-delay: var(--animation-delay-14) !important;
}

[class*='motion-pull'].motion-delay-14.active .overlay-content, [class*='motion-pull'].motion-delay-14.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-14) + 1200ms) !important;
}


.motion-delay-15.active, .motion-delay-15.active .overlay-content {
    animation-delay: var(--animation-delay-15) !important;
}

[class*='motion-pull'].motion-delay-15.active .overlay-content, [class*='motion-pull'].motion-delay-15.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-15) + 1200ms) !important;
}

.motion-delay-16.active, .motion-delay-16.active .overlay-content {
    animation-delay: var(--animation-delay-16) !important;
}

[class*='motion-pull'].motion-delay-16.active .overlay-content, [class*='motion-pull'].motion-delay-16.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-16) + 1200ms) !important;
}

.motion-delay-17.active, .motion-delay-17.active .overlay-content {
    animation-delay: var(--animation-delay-17) !important;
}

[class*='motion-pull'].motion-delay-17.active .overlay-content, [class*='motion-pull'].motion-delay-17.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-17) + 1200ms) !important;
}

.motion-delay-18.active, .motion-delay-18.active .overlay-content {
    animation-delay: var(--animation-delay-18) !important;
}

[class*='motion-pull'].motion-delay-18.active .overlay-content, [class*='motion-pull'].motion-delay-18.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-18) + 1200ms) !important;
}

.motion-delay-19.active, .motion-delay-19.active .overlay-content {
    animation-delay: var(--animation-delay-19) !important;
}

[class*='motion-pull'].motion-delay-19.active .overlay-content, [class*='motion-pull'].motion-delay-19.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-19) + 1200ms) !important;
}

.motion-delay-20.active, .motion-delay-20.active .overlay-content {
    animation-delay: var(--animation-delay-20) !important;
}

[class*='motion-pull'].motion-delay-20.active .overlay-content, [class*='motion-pull'].motion-delay-20.active .overlay-content * {
    animation-delay: calc(var(--animation-delay-20) + 1200ms) !important;
}


/*--------------------------------------------------
    ANIMATIONS
*/
@keyframes grow-up {
    0% {
        clip-path: polygon(0 0%, 100% 0%, 100% 0%, 0 0%);
    }

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

@keyframes expand-right {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes expand-down {
    0% {
        height: 0%;
    }

    100% {
        height: 100%;
    }
}

@keyframes pull-up {
    0% {
        height: 3px;
        left: 0px;
        bottom: 0px;
        width: 0px;
    }

    40% {
        height: 3px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: 100%;
    }

    80% {
        bottom: 0px;
        height: 100%;
        width: 100%;
    }

    100% {
        bottom: 100%;
        height: 0px;
        width: 100%;
    }
}

@keyframes pull-down {
    0% {
        height: 3px;
        left: 0px;
        top: 0px;
        width: 0px;
    }

    40% {
        height: 3px;
        left: 0px;
        right: 0px;
        top: 0px;
        width: 100%;
    }

    80% {
        top: 0px;
        height: 100%;
        width: 100%;
    }

    100% {
        top: 100%;
        height: 0px;
        width: 100%;
    }
}

@keyframes pull-left {
    0% {
        top: 0px;
        bottom: 100%;
        left: 0px;
        width: 3px;
    }

    40% {
        width: 3px;
        left: 0px;
        top: 0px;
        bottom: 0px;
        height: 100%;
    }

    80% {
        left: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
    }

    100% {
        left: 100%;
        right: 0px;
        width: 0px;
        height: 100%;
    }
}


@keyframes pull-right {
    0% {
        top: 0px;
        bottom: 100%;
        left: 100%;
        right: 0px;
        width: 3px;
    }

    40% {
        width: 3px;
        right: 0px;
        left: 100%;
        top: 0px;
        bottom: 0px;
        height: 100%;
    }

    80% {
        left: 0px;
        right: 0px;
        width: 100%;
        height: 100%;
    }

    100% {
        right: 100%;
        left: 0px;
        width: 0px;
        height: 100%;
    }
}


@keyframes reveal-up {
    0% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
        opacity: 1;
    }


    100% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
        opacity: 1;
    }
}

@keyframes reveal-wipe {
    0% {
        clip-path: polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%);
        backdrop-filter: blur(5px);
        opacity: 1;
    }


    100% {
        clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%);
        backdrop-filter: blur(0px);
        opacity: 1;
    }
}

@keyframes reveal-iris {
    0% {
        clip-path: circle(0% at 50% 50%);
        opacity: 1;
    }


    100% {
        clip-path: circle(100% at 50% 50%);
        opacity: 1;
    }
}

@keyframes reveal-sunrise {
    0% {
        clip-path: circle(0% at 50% 100%);
        opacity: 1;
    }

    10% {
        clip-path: circle(2% at 50% 90%);
    }

    30% {
        clip-path: circle(18% at 50% 90%);
    }

    100% {
        clip-path: circle(100% at 50% 90%);
        opacity: 1;
    }
}

@keyframes pivot-up {
    0% {
        transform: rotateX(-80deg);
        opacity: 0;
        text-shadow: 0px -10px 11px rgba(0, 0,0,0);
    }

    20% {
        opacity: 1;
        text-shadow: 00px -50px 11px rgba(0, 0,0,.05);
    }

    100% {
        transform: rotateX(1deg);
        opacity: 1;
        text-shadow: 0px 0px 1px rgba(0, 0,0,0);
    }
}


@keyframes pivot-down {
    0% {
        transform: rotateX(-80deg);
        opacity: 0;
        text-shadow: 0px 10px 11px rgba(0, 0,0,0);
    }

    20% {
        opacity: 1;
        text-shadow: 10px 50px 11px rgba(0, 0,0,.05);
    }

    100% {
        transform: rotateX(1deg);
        opacity: 1;
        text-shadow: 0px 0px 1px rgba(0, 0,0,0);
    }
}


@keyframes pivot-left {
    0% {
        transform: rotateY(90deg);
        opacity: 0;
        text-shadow: 00px 00px 11px rgba(0, 0,0,0);
    }

    20% {
        opacity: 1;
        text-shadow: 50px 10px 11px rgba(0, 0,0,.05);
    }


    100% {
        transform: rotateY(0deg);
        opacity: 1;
        text-shadow: 0px 0px 1px rgba(0, 0,0,0);
    }
}

@keyframes pivot-right {
    0% {
        transform: rotateY(90deg);
        opacity: 0;
        text-shadow: 0px 0px 11px rgba(0, 0,0,0);
    }

    20% {
        opacity: 1;
        text-shadow: -100px 10px 11px rgba(0, 0,0,.05);
    }


    100% {
        transform: rotateY(0deg);
        opacity: 1;
        text-shadow: 0px 0px 1px rgba(0, 0,0,0);
    }
}


@keyframes background-glow {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes text-shadow-down {
    0% {
        text-shadow: var(--text-shadow-none);
        box-shadow: var(--box-shadow-less);
        background-color: var(--inherit);
        color: var(--my-white);
    }

    100% {
        text-shadow: var(--text-shadow-down);
        box-shadow: var(--box-shadow);
        color: var(--my-white);
    }
}

@keyframes motion-header-before {
    0% {
        opacity: 0;
        background-color: var(--primary);
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    }

    100% {
        opacity: 1;
        background-color: var(--secondary);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes motion-header-after {
    0% {
        opacity: 0;
        background-color: var(--orange-hover);
        clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%);
    }

    10% {
        opacity: 1;
    }

    33% {
        opacity: 1;
        background-color: var(--orange-hover);
        clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 0% 10%);
    }


    66% {
        opacity: 1;
        background-color: var(--orange);
        clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 80%);
    }

    100% {
        opacity: 1;
        background-color: var(--orange);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes motion-header-before-dark {
    0% {
        opacity: 0;
        background-color: var(--secondary);
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    }

    100% {
        opacity: 1;
        background-color: var(--primary);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes motion-header-after-dark {
    0% {
        opacity: 0;
        background-color: var(--orange-dark);
        clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%);
    }

    10% {
        opacity: 1;
    }

    33% {
        opacity: 1;
        background-color: var(--orange-dark);
        clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 0% 10%);
    }


    66% {
        opacity: 1;
        background-color: var(--orange-dark-hover);
        clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 80%);
    }

    100% {
        opacity: 1;
        background-color: var(--orange-dark-hover);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes outline-white {
    0% {
        outline: solid 0px var(--my-white);
    }

    100% {
        outline: solid 1px var(--my-white-dark);
    }
}

@keyframes outline-gray {
    0% {
        outline: solid 0px var(--my-gray);
    }

    100% {
        outline: solid 1px var(--my-gray-dark);
    }
}

@keyframes outline-black {
    0% {
        outline: solid 0px var(--my-black);
    }

    100% {
        outline: solid 1px var(--my-black-dark);
    }
}

@keyframes outline-top {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}


@keyframes outline-bottom {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(200%);
    }
}


@keyframes outline-left {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(200%);
    }
}


@keyframes outline-right {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(-200%);
    }
}


@keyframes button-bars-before {
    0% {
        height: 0px;
        left: 100%;
    }

    100% {
        height: 3px;
        left: -3px
    }
}

@keyframes button-bars-after {
    0% {
        height: 0px;
        right: 100%;
    }

    100% {
        height: 3px;
        right: -3px;
    }
}

@keyframes grow-col {
    0% {
        opacity: 0;
        clip-path: polygon(47% 0%, 53% 0%, 53% 100%, 47% 100%);
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes grow-col-zoom {
    0% {
        overflow: hidden;
        opacity: 0;
        clip-path: polygon(47% 0%, 53% 0%, 53% 100%, 47% 100%);
        transform: scale(1.3);
    }

    10% {
        overflow: hidden;
        opacity: 1;
    }

    100% {
        overflow: unset;
        opacity: 1;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        transform: scale(1);
    }
}

@keyframes grow-row {
    0% {
        opacity: 0;
        clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%);
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes grow-expand {
    0% {
        transform: translate3d(0px, 0px, 0px) scale3d(.65, .65, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
        transform-style: preserve-3d;
        opacity: 1;
    }
}


@keyframes zoom-to-normal {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*----------------------------------------------
    MOTION COMBINATIONS
*/

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

@keyframes move-up-fade {
    0% {
        transform: translateY(30px);
        opacity: 0;
        transform-style: preserve-3d;
    }

    30% {
        opacity: 1;
    }

    80% {
        transform: translateY(0vw);
        opacity: 1;
        transform-style: preserve-3d;
    }

    100% {
        opacity: 1;
    }
}

body .motion-move-down.motion-fade-in.active {
    animation-name: move-down-fade;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: both;
}

@keyframes move-down-fade {
    0% {
        transform: translateY(-30px);
        opacity: 0;
        transform-style: preserve-3d;
    }

    30% {
        opacity: 1;
    }

    80% {
        transform: translateY(0vw);
        opacity: 1;
        transform-style: preserve-3d;
    }

    100% {
        opacity: 1;
    }
}

body .motion-move-right.motion-fade-in.active {
    animation-name: move-right-fade;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: both;
}

@keyframes move-right-fade {
    0% {
        transform: translateX(50px);
        opacity: 0;
        transform-style: preserve-3d;
    }

    30% {
        opacity: 1;
    }

    80% {
        transform: translateX(0vw);
        opacity: 1;
        transform-style: preserve-3d;
    }

    100% {
        opacity: 1;
    }
}


body .motion-move-left.motion-fade-in.active {
    animation-name: move-left-fade;
    animation-duration: var(--animation-time);
    animation-delay: var(--animation-delay);
    animation-fill-mode: both;
}

@keyframes move-left-fade {
    0% {
        transform: translateX(-50px);
        opacity: 0;
        transform-style: preserve-3d;
    }

    30% {
        opacity: 1;
    }

    80% {
        transform: translateX(0vw);
        opacity: 1;
        transform-style: preserve-3d;
    }

    100% {
        opacity: 1;
    }
}

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

.waiting-message {
    opacity: 0;
    visibility: hidden;
    padding: 8px;
    display:grid;
    grid-template-columns:1fr 22px 22px 22px;
    gap:4px;
    width:fit-content;
    align-items:center;
}

    .waiting-message.active {
        animation-name: fade-in;
        animation-duration: var(--animation-time);
        animation-delay: var(--animation-delay);
        animation-fill-mode: both;
    }

        .waiting-message.active .bullet1,
        .waiting-message.active .bullet2,
        .waiting-message.active .bullet3{
            display: inline-grid;
            position:relative;
            width: 16px;
            height: 16px;
        }

            .waiting-message.active .bullet1:before,
            .waiting-message.active .bullet2:before,
            .waiting-message.active .bullet3:before {
                content: " ";
                position: absolute;
                top: 4px;
                left: 4px;
                height: 8px;
                width: 8px;
                background-color: var(--primary);
                animation-name: pulse-box;
                animation-duration: var(--animation-time-slow);
                animation-iteration-count: infinite;
                animation-fill-mode: both;
                animation-delay: var(--animation-delay-1);
            }
        .waiting-message.active .bullet2:before {
            animation-delay: var(--animation-delay-2);
        }
        .waiting-message.active .bullet3:before {
            animation-delay: var(--animation-delay-3);
        }

            @keyframes pulse-box {
                0% {
                    top: 4px;
                    left: 4px;
                    height: 8px;
                    width: 8px;
                    background-color: var(--primary);
                }

                50% {
                    top: 2px;
                    left: 2px;
                    height: 12px;
                    width: 12px;
                    background-color: var(--secondary);
                }

                100% {
                    top: 4px;
                    left: 4px;
                    height: 8px;
                    width: 8px;
                    background-color: var(--accent-2);
                }
            }
            /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+              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      +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/