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

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

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

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

.elementor-section > .ht--parallax-wrap > img{
    display: block;
}

.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--img-layers-list-section,
.ht--bg-effects{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* 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%;
    }
}

/* Reading Progressbar */
.ht--pro-reading-progressbar-wrap{
    position: fixed;
    width: 100%;
    z-index: 9999999;
}
.ht--reading-progressbar{
    width: 0;
}
.ht--pro-reading-progressbar-wrap.top{
    top: 0
}
.ht--pro-reading-progressbar-wrap.bottom{
    bottom: 0
}
/*Elementor Plugin Hack*/
.elementor-section > .elementor-column-gap-default > .elementor-row {
    width: calc(100% + 20px);
    margin: -10px;
}

.elementor-section > .elementor-column-gap-narrow > .elementor-row {
    width: calc(100% + 10px);
    margin: -5px;
}

.elementor-section > .elementor-column-gap-extended > .elementor-row {
    width: calc(100% + 30px);
    margin: -15px;
}

.elementor-section > .elementor-column-gap-wide > .elementor-row {
    width: calc(100% + 40px);
    margin: -20px;
}

.elementor-section > .elementor-column-gap-wider > .elementor-row {
    width: calc(100% + 60px);
    margin: -30px;
}

.elementor-section.elementor-section-stretched.elementor-section-full_width > .elementor-container > .elementor-row {
    width: 100%;
    margin: 0;
}

/* Theme Block */
.ht--theme-box-wrapper{
    position: relative;
}

.ht--theme-image-box-img{
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.ht--theme-button-wrapper{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: rgba(0,0,0,.3);
}

.ht--theme-box-wrapper .ht--theme-button-wrapper.ht--on-hover{
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.ht--theme-box-wrapper:hover .ht--theme-button-wrapper.ht--on-hover{
    transform: translateY(0);
}

.ht--theme-button-wrapper .ht--theme-button{
    display: inline-block;
    padding: 10px;
    background: #000;
    color: #FFF;
    fill: #FFF;
    line-height: 1.2;
}

.ht--theme-button-content-wrapper{
    display: flex;
    align-items: center;
}

.ht--theme-button .ht--theme-button-align-icon-left {
    margin-right: 5px;
    order: 5;
}

.ht--theme-button .ht--theme-button-align-icon-right {
    margin-left: 5px;
    order: 15;
}

.ht--theme-button-icon svg{
    width: 1em;
    height: auto;
}

.ht--theme-button .ht--theme-button-text{
    order: 10;
}

.ht--theme-title{
    display: block;
    margin: 0;
}

.ht--title-align-center .ht--theme-title{
    text-align: center;
}

.ht--title-align-right .ht--theme-title{
    text-align: right;
}

.ht--theme-tag {
    position: absolute;
    top: -6px;
}

.ht--tag-align-right .ht--theme-tag {
    right: 10px;
}

.ht--tag-align-left .ht--theme-tag{
    left: 20px;
}

.ht--theme-tag span {
    position: relative;
    display: block;
    text-align: center;
    background: #F8463F;
    font-size: 14px;
    line-height: 1;
    padding: 12px 20px 8px;
    border-top-right--radius: 8px;
    text-transform: uppercase;
    color: white;
}

.ht--theme-tag span:before {
    position: absolute;
    content: "";
    height: 6px;
    width: 6px;
    left: -6px;
    top: 0;
    background: #F8463F;
}

.ht--theme-tag span:after {
    position: absolute;
    content: "";
    height: 6px;
    width: 8px;
    left: -8px;
    top: 0;
    border-radius: 8px 8px 0 0;
    background: #C02031;
    filter: saturate(30%);
}

.ht--theme-tag:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 10px;
    clip-path: polygon(100% 0, 100% 25%, 50% 100%, 0 25%, 0 0);
    background: #F8463F;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: -3px;
}

.ht--theme-box-wrapper.ht--theme-button-open .ht--theme-button-wrapper{
    transform: translateY(0);
}

.ht--theme-supports{
    position: absolute;
    display: flex;
    margin: 0 -4px;
}

.ht--theme-supports-icon{
    position: relative;
    margin: 0 4px;
}

.ht--theme-supports-icon span{
    position: absolute;
    left: 50%;
    background: #000;
    font-size: 10px;
    padding: 5px 8px;
    line-height: 1;
    color: #FFF;
    text-transform: uppercase;
    border-radius: 5px;
    opacity: 0;
    transition: all 0.3s ease;
}

.ht--theme-supports-icon:hover span{
    opacity: 1;
}

.ht--support-icon-align-v-start .ht--theme-supports-icon span{
    top: 100%;
    margin-top: 6px;
    transform: translateX(-50%);
}

.ht--support-icon-align-v-end .ht--theme-supports-icon span{
    bottom: 100%;
    margin-bottom: 6px;
    transform: translateX(-50%);
}

/* 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);
    }
}