.ht--al-absolute{
    position: absolute;
}

.ht--al-relative{
    position: relative;
}

.ht--parallax-wrap img{
    position: absolute;
}

.ht--parallax-wrap img[data-tilt-effect]{
    z-index: 9;
}

.ht--parallax-h-align-center{
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.ht--parallax-v-align-middle{
    margin-top: auto;
    margin-bottom: auto;
    top: 0;
    bottom: 0;
}

.ht--section-particles {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.ht--parallax-bg,
.ht--parallax-wrap,
.ht--particles,
.ht--bg-effects{
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.elementor-section .ht--parallax-bg,
.elementor-section .ht--parallax-wrap,
.elementor-section .ht--particles,
.elementor-section .ht--bg-effects{
    display: block;
}

.ht--parallax-bg-yes.ht--water-ripples-yes .ht--parallax-bg,
.ht--bg-effects-yes.ht--water-ripples-yes .ht--bg-effects{
    z-index: -2;
}

/* Colors Animation */
.ht--ca-fade,
.ht--ca-ver-moving,
.ht--ca-hor-moving,
.ht--ca-custom-moving{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.ht--ca-fade{
    background-image: none !important;
}

.ht--ca-hor-moving{
    animation-name: totalplus_ca_hor_moving;
}

.ht--ca-ver-moving{
    animation-name: totalplus_ca_ver_moving;
}

.ht--ca-custom-moving{
    animation-name: totalplus_ca_custom_moving;
}

@keyframes totalplus_ca_hor_moving {
    0% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}
@keyframes totalplus_ca_ver_moving {
    0% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 100% 100%;
    }
}
@keyframes totalplus_ca_custom_moving {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* Transforms Start */
.ht--transform-yes .elementor-widget-container{
    -webkit-transition-duration: var(--ht--transition-duration, 0.2s);
    transition-duration: var(--ht--transition-duration, 0.2s);
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transform: translate(var(--ht--translate-x, 0), var(--ht--translate-y, 0)) 
        scale(var(--ht--scale-x, 1), var(--ht--scale-y, 1)) 
        skew(var(--ht--skew-x, 0), var(--ht--skew-y, 0)) 
        rotateX(var(--ht--rotate-x, 0)) 
        rotateY(var(--ht--rotate-y, 0)) 
        rotateZ(var(--ht--rotate-z, 0));
    transform: translate(var(--ht--translate-x, 0), var(--ht--translate-y, 0)) 
        scale(var(--ht--scale-x, 1), var(--ht--scale-y, 1)) 
        skew(var(--ht--skew-x, 0), var(--ht--skew-y, 0)) 
        rotateX(var(--ht--rotate-x, 0)) 
        rotateY(var(--ht--rotate-y, 0)) 
        rotateZ(var(--ht--rotate-z, 0));
}

.ht--transform-yes .elementor-widget-container:hover{
    -webkit-transform: translate(var(--ht--translate-x-hover, var(--ht--translate-x, 0)), var(--ht--translate-y-hover, var(--ht--translate-y, 0))) 
        scale(var(--ht--scale-x-hover, var(--ht--scale-x, 1)), var(--ht--scale-y-hover, var(--ht--scale-y, 1))) 
        skew(var(--ht--skew-x-hover, var(--ht--skew-x, 0)), var(--ht--skew-y-hover, var(--ht--skew-y, 0))) 
        rotateX(var(--ht--rotate-x-hover, var(--ht--rotate-x, 0))) 
        rotateY(var(--ht--rotate-y-hover, var(--ht--rotate-y, 0))) 
        rotateZ(var(--ht--rotate-z-hover, var(--ht--rotate-z, 0)));
    transform: translate(var(--ht--translate-x-hover, var(--ht--translate-x, 0)), var(--ht--translate-y-hover, var(--ht--translate-y, 0))) 
        scale(var(--ht--scale-x-hover, var(--ht--scale-x, 1)), var(--ht--scale-y-hover, var(--ht--scale-y, 1))) 
        skew(var(--ht--skew-x-hover, var(--ht--skew-x, 0)), var(--ht--skew-y-hover, var(--ht--skew-y, 0))) 
        rotateX(var(--ht--rotate-x-hover, var(--ht--rotate-x, 0))) 
        rotateY(var(--ht--rotate-y-hover, var(--ht--rotate-y, 0))) 
        rotateZ(var(--ht--rotate-z-hover, var(--ht--rotate-z, 0)));
}

.ht--mask-yes .ht--mask-span {
    position: relative;
    overflow: hidden;
    -js-display: inline-flex!important;
    display: -webkit-inline-box!important;
    display: -webkit-inline-flex!important;
    display: -moz-inline-box!important;
    display: -ms-inline-flexbox!important;
    display: inline-flex!important
}

.ht--mask-yes .ht--mask-span::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-backface-visibility: visible;
    backface-visibility: visible
}

.ht--mask-active.ht--mask-tr .ht--mask-span::after {
    -webkit-animation: ht--mask-tr 1.7s cubic-bezier(1,0,.18,1) forwards;
    animation: ht--mask-tr 1.7s cubic-bezier(1,0,.18,1) forwards;
    -webkit-transform: translateX(-103%);
    -ms-transform: translateX(-103%);
    transform: translateX(-103%)
}

.ht--mask-active.ht--mask-tl .ht--mask-span::after {
    -webkit-animation: ht--mask-tl 1.7s cubic-bezier(1,0,.18,1) forwards;
    animation: ht--mask-tl 1.7s cubic-bezier(1,0,.18,1) forwards;
    -webkit-transform: translateX(103%);
    -ms-transform: translateX(103%);
    transform: translateX(103%)
}

.ht--mask-active.ht--mask-tb .ht--mask-span::after {
    -webkit-animation: ht--mask-tb 1.7s cubic-bezier(1,0,.18,1) forwards;
    animation: ht--mask-tb 1.7s cubic-bezier(1,0,.18,1) forwards;
    -webkit-transform: translateY(-103%);
    -ms-transform: translateY(-103%);
    transform: translateY(-103%)
}

.ht--mask-active.ht--mask-tt .ht--mask-span::after {
    -webkit-animation: ht--mask-tt 1.7s cubic-bezier(1,0,.18,1) forwards;
    animation: ht--mask-tt 1.7s cubic-bezier(1,0,.18,1) forwards;
    -webkit-transform: translateY(103%);
    -ms-transform: translateY(103%);
    transform: translateY(103%)
}

.ht--infinite-rotation-yes{
    animation: ht--infinite-rotate 3s infinite forwards linear;
}

.ht--al-infinite-rotation-yes .ht--al-element {
    animation: ht--infinite-rotate 3s infinite forwards linear;
}

@-webkit-keyframes ht--mask-tr {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

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

@keyframes ht--mask-tr {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

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

@-webkit-keyframes ht--mask-tl {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

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

@keyframes ht--mask-tl {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

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

@-webkit-keyframes ht--mask-tb {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(103%);
        transform: translateY(103%)
    }
}

@keyframes ht--mask-tb {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(103%);
        transform: translateY(103%)
    }
}

@-webkit-keyframes ht--mask-tt {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-103%);
        transform: translateY(-103%)
    }
}

@keyframes ht--mask-tt {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-103%);
        transform: translateY(-103%)
    }
}

@keyframes ht--infinite-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}