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

body:not(.mobile) [class*='motion-move'] {
    opacity: 0;
}

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

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

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

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

body:not(.mobile) .motion-fade-in {
    opacity: 0;
}

    body:not(.mobile) .motion-fade-in.active {
        animation: var(--animation-time) linear var(--animation-delay) forwards fade-in;
    }


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

    body:not(.mobile) .motion-pull-up .overlay-content *,
    body:not(.mobile) .motion-pull-down .overlay-content *,
    body:not(.mobile) .motion-pull-left .overlay-content *,
    body:not(.mobile) .motion-pull-right .overlay-content * {
        opacity: 0;
    }

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

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

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

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

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

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

    body:not(.mobile) .motion-reveal-left .overlay-content * {
        opacity: 0;
    }

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

body:not(.mobile) .motion-reveal-left.active .overlay-content:before {
    content: " ";
    position: absolute;
    background-color: var(--my-gray-dark);
    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:not(.mobile) .motion-reveal-bottom .overlay-content {
    position: relative;
    z-index: 2;
}

    body:not(.mobile) .motion-reveal-bottom .overlay-content * {
        opacity: 0;
    }

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

body:not(.mobile) .motion-reveal-bottom.active .overlay-content:before {
    content: " ";
    position: absolute;
    background-color: var(--my-gray-dark);
    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:not(.mobile) .motion-reveal-wipe .overlay-content {
    position: relative;
    z-index: 2;
}

body:not(.mobile) .motion-reveal-wipe {
    opacity: 0;
}

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

body:not(.mobile) .motion-reveal-iris {
    opacity: 0;
}

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

body:not(.mobile) .motion-reveal-sunrise {
    opacity: 0;
}

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

body:not(.mobile) .motion-reveal-up {
    opacity: 0;
}

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


body:not(.mobile) .motion-background-first, body:not(.mobile) .motion-background-first .overlay-content {
    opacity: 0;
}

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

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

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


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

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

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

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

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

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

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

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

body:not(.mobile) .motion-image-glow {
    z-index: 5;
}

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

    body:not(.mobile) .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:not(.mobile) .motion-image-glow.active .overlay-content {
        border: solid 1px var(--border-dark-gray);
    }

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

body:not(.mobile) .motion-header-outline.active h1, body:not(.mobile) .motion-header-outline.active h2, body:not(.mobile) .motion-header-outline.active h3, body:not(.mobile) .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:not(.mobile) .motion-header-outline.active h1:before, body:not(.mobile) .motion-header-outline.active h2:before, body:not(.mobile) .motion-header-outline.active h3:before, body:not(.mobile) .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:not(.mobile) .motion-header-outline.active h1:after, body:not(.mobile) .motion-header-outline.active h2:after, body:not(.mobile) .motion-header-outline.active h3:after, body:not(.mobile) .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:not(.mobile).dark-mode .motion-header-outline.active h1, body:not(.mobile).dark-mode .motion-header-outline.active h2, body:not(.mobile).dark-mode .motion-header-outline.active h3, body:not(.mobile).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:not(.mobile).dark-mode .motion-header-outline.active h1:before, body:not(.mobile).dark-mode .motion-header-outline.active h2:before, body:not(.mobile).dark-mode .motion-header-outline.active h3:before, body:not(.mobile).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:not(.mobile).dark-mode .motion-header-outline.active h1:after, body:not(.mobile).dark-mode .motion-header-outline.active h2:after, body:not(.mobile).dark-mode .motion-header-outline.active h3:after, body:not(.mobile).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;
    }

    .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 fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    20% {
        opacity: 1;
    }

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

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

    20% {
        opacity: 1;
    }

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

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

    20% {
        opacity: 1;
    }

    100% {
        transform: translateX(0vw);
        opacity: 1;
    }
}


@keyframes move-left {
    0% {
        transform: translateX(-5vw);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateX(0vw);
        opacity: 1;
    }
}

@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 zoom-to-normal {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }

    10% {
        opacity: 1;
    }

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

/*----------------------------------------------
    MOBILE UPDATES
*/
.mobile [class*='motion-move']{
    opacity:0;
}
.mobile [class*='motion-move'].active {
    animation-name: fade-in !important;
    animation-fill-mode: forwards;
    animation-duration:var(--animation-time);
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+              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      +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/