/*
* Element Name: UX BUilder Marquee
* Discover More: https://flelements.com/
* Author: Obelix Media
*/
.obelix-marquee-wrapper .obelix-marquee {
    --obelix-text-dark-gray: #555353;
    --marquee-gap: 0px;
    --obelix-duration: 30s;
    --obelix-scroll-distance: calc(100% + var(--marquee-gap));
    --obelix-color-white: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    gap: var(--marquee-gap);
    position: relative;
}

.obelix-marquee-wrapper .obelix-marquee.is-vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: var(--box-height, 400px);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.obelix-marquee-wrapper .obelix-marquee .obelix-scroll-text {
    line-height: 1.65;
    text-align: center;
}

.obelix-marquee-wrapper .obelix-marquee .obelix-scroll-text,
.obelix-marquee-wrapper .obelix-marquee .obelix-marquee-group i {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.obelix-marquee-wrapper .obelix-marquee .obelix-marquee-group svg {
    height: auto;
    width: 2rem;
    fill: currentColor;
}

.obelix-marquee-wrapper .obelix-marquee .obelix-text-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--marquee-gap);
}

.obelix-marquee-wrapper .obelix-marquee.is-vertical.icon-right .obelix-text-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.obelix-marquee-wrapper .obelix-marquee.is-vertical.icon-bottom .obelix-text-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.obelix-marquee-wrapper .marquee-icon {
    --icon-width: 1.5rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Image icon */
.obelix-marquee-wrapper .marquee-icon.is-image {
    width: calc(var(--icon-width) * 2);
}

.obelix-marquee-wrapper .marquee-icon img {
    /* height: var(--icon-width, 3rem); */
    width: 100%;
    max-width: unset;
}

/* Svg inline icon */
.obelix-marquee-wrapper .marquee-icon.is-image svg {
    width: var(--icon-width);
}

.obelix-marquee-wrapper .marquee-icon.is-image svg>* {
    fill: currentColor !important;
}

/* Library icon */
.obelix-marquee-wrapper i.marquee-icon {
    font-size: var(--icon-width);
}

.obelix-marquee .obelix-scroll-image img {
    height: var(--image-ratio);
    width: auto;
    max-width: unset;
}

.obelix-marquee-wrapper .is-vertical .obelix-scroll-image img {
    width: var(--image-ratio);
    height: auto;
}

@-webkit-keyframes obelix-scroll-x {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(calc(-1 * var(--obelix-scroll-distance)));
        transform: translateX(calc(-1 * var(--obelix-scroll-distance)));
    }
}

@keyframes obelix-scroll-x {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(calc(-1 * var(--obelix-scroll-distance)));
        transform: translateX(calc(-1 * var(--obelix-scroll-distance)));
    }
}

@-webkit-keyframes obelix-scroll-y {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(calc(-1 * var(--obelix-scroll-distance)));
        transform: translateY(calc(-1 * var(--obelix-scroll-distance)));
    }
}

@keyframes obelix-scroll-y {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(calc(-1 * var(--obelix-scroll-distance)));
        transform: translateY(calc(-1 * var(--obelix-scroll-distance)));
    }
}

@-webkit-keyframes fade {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes fade {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Wrapper Styles */
.obelix-marquee-wrapper .obelix-marquee-group {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    gap: var(--marquee-gap);
    white-space: nowrap;
    -webkit-animation: obelix-scroll-x var(--obelix-duration) linear infinite;
    animation: obelix-scroll-x var(--obelix-duration) linear infinite;
}

.obelix-marquee.is-vertical .obelix-marquee-group {
    -webkit-animation-name: obelix-scroll-y;
    animation-name: obelix-scroll-y;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.obelix-marquee-wrapper .is-vertical.v-align-left .obelix-marquee-group {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    text-align: left;
}

.obelix-marquee-wrapper .is-vertical.v-align-right .obelix-marquee-group {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    text-align: right;
}

.obelix-marquee-wrapper .obelix-marquee.reverse .obelix-marquee-group {
    animation-direction: reverse;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
}

/* Text effect */
.obelix-marquee-wrapper .stroke .obelix-scroll-text.odd {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px;
}

.obelix-marquee-wrapper .gold .obelix-scroll-text {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(18%, #dec58d), color-stop(24%, #d8c08c), color-stop(26%, #cfc09f), color-stop(27%, #cfc09f), color-stop(40%, #ffecb3), color-stop(78%, #af8734));
    background: -o-linear-gradient(top, #dec58d 18%, #d8c08c 24%, #cfc09f 26%, #cfc09f 27%, #ffecb3 40%, #af8734 78%);
    background: linear-gradient(to bottom, #dec58d 18%, #d8c08c 24%, #cfc09f 26%, #cfc09f 27%, #ffecb3 40%, #af8734 78%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    position: relative;
}

.obelix-marquee-wrapper .is-vertical.v-align-left {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.obelix-marquee-wrapper .is-vertical.v-align-right {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.obelix-marquee-wrapper .is-vertical.v-align-left .obelix-scroll-text {
    text-align: left;
}

.obelix-marquee-wrapper .is-vertical.v-align-right .obelix-scroll-text {
    text-align: right;
}

/* Shadow */
.obelix-marquee-wrapper .obelix-marquee.has-shadow::before,
.obelix-marquee-wrapper .obelix-marquee.has-shadow::after {
    position: absolute;
    content: "";
    z-index: 1;
    pointer-events: none;
}

.obelix-marquee-wrapper .has-shadow.is-vertical::before,
.obelix-marquee-wrapper .has-shadow.is-vertical::after {
    width: 100%;
    height: var(--shadow-width, 20%);
}

.obelix-marquee-wrapper .has-shadow.is-horizontal::before,
.obelix-marquee-wrapper .has-shadow.is-horizontal::after {
    height: 100%;
    width: var(--shadow-width, 20%);
}

.obelix-marquee-wrapper .has-shadow.is-vertical::before {
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left bottom, left top, from(var(--shadow-color, #fff)), to(rgba(255, 255, 255, 0)));
    background-image: -o-linear-gradient(bottom, var(--shadow-color, #fff), rgba(255, 255, 255, 0));
    background-image: linear-gradient(to top, var(--shadow-color, #fff), rgba(255, 255, 255, 0));
}

.obelix-marquee-wrapper .has-shadow.is-vertical::after {
    top: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--shadow-color, #fff)), to(rgba(0, 0, 0, 0)));
    background-image: -o-linear-gradient(top, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to bottom, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
}

.obelix-marquee-wrapper .has-shadow.is-horizontal::before {
    left: 0;
    top: 0;
    bottom: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(var(--shadow-color, #fff)), to(rgba(0, 0, 0, 0)));
    background-image: -o-linear-gradient(left, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to right, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
}

.obelix-marquee-wrapper .has-shadow.is-horizontal::after {
    right: 0;
    top: 0;
    bottom: 0;
    background-image: -webkit-gradient(linear, right top, left top, from(var(--shadow-color, #fff)), to(rgba(0, 0, 0, 0)));
    background-image: -o-linear-gradient(right, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to left, var(--shadow-color, #fff), rgba(0, 0, 0, 0));
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .obelix-marquee-wrapper .obelix-marquee-group {
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }
}

/* End UX BUilder Marquee */