.interactive-numbers{
    width: 94%;
    display: flex;
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 30px;
}

.interactive-number > *{
    display: block;
}

.interactive-number{
    max-width: 270px;
}

.interactive-number .value{
    font-size: 110px;
    font-weight: 300;
}

.interactive-number .label{
    font-size: 30px;
    font-weight: 500;
}

.interactive-number{
    text-align: center;
    max-width: 220px;
}

.part.part-interactive-numbers .content{
    padding-top: 100px;
}

.interactive-numbers{
    margin-top: calc( 15vh - 50px );
}

/* FOR ANIMATION */

/*

.interactive-number{
    opacity: 0;
    transition: 1s;
    transition-delay: 1s;
}

.numbers-faded-in .interactive-number{
    transition-delay: 1s;
}

.numbers-faded-in .interactive-number.final_number{
    opacity: 0;
}

.numbers-faded-in .interactive-number:nth-child(1){
    transition-delay: calc( 1s * 1.2 * 1 );
}

.numbers-faded-in .interactive-number:nth-child(2){
    transition-delay: calc( 1s * 1.2 * 2 );
}

.numbers-faded-in .interactive-number:nth-child(3){
    transition-delay: calc( 1s * 1.2 * 3 );
}

.numbers-faded-in .interactive-number:nth-child(4){
    transition-delay: calc( 1s * 1.2 * 4 );
}

.numbers-faded-out .interactive-number.final_number{
    transition-delay: 1.5s !important;
}

.numbers-faded-out .interactive-number{
    opacity: 0;
    transition-delay: 0.5s !important;
}

*/

.interactive-number.final_number{
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

.wp-admin .interactive-number,
.numbers-faded-in .interactive-number,
.numbers-faded-out .interactive-number.final_number{
    opacity: 1;
}

@media only screen and (max-width: 1200px){
    .interactive-number .value{
        font-size: 90px;
    }
}

@media only screen and (max-width: 990px){

    .interactive-number .value{
        font-size: 60px;
    }
    .interactive-number .label{
        font-size: 22px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .interactive-numbers{
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (max-width: 650px){

    
    .part.part-interactive-numbers .content{
        max-width: 100%;
    }

    .interactive-numbers{
        flex-wrap: wrap;
        width: calc( 100% - 30px * 2 );
        justify-content: center;
        margin-bottom: 80px;
        flex-direction: column;

    }
    
    .interactive-number{
        margin-left: auto;
        margin-right: auto;
    }
    
}


.part-interactive-numbers .lottie-container{
    position: absolute;
    pointer-events: none;
    left: 50%;
    top: 50%;
    transform: translate(calc( -50% - 20px ),calc( -50% - 80px )) scale(1.5);
    opacity: 0;
    transition: .5s;
}

.interactive-numbers{
    margin-top: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.part-interactive-numbers .container .content{
    position: relative;
}

.interactive-number > *{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.part-interactive-numbers .interactive-numbers .interactive-number > .inner-wrapper{
    opacity: 0;
    transition: 0.5s;
    transform: translatey(100px);
}


.part-interactive-numbers .interactive-numbers .interactive-number.final_number > .inner-wrapper{
    transform: translatey(0);
}



.part-interactive-numbers.anim-step-1 .interactive-numbers .interactive-number:nth-child(1) > .inner-wrapper{
    opacity: 1;
    transform: translatey(0);
}

.part-interactive-numbers.anim-step-2 .lottie-container,
.part-interactive-numbers.anim-step-3 .lottie-container,
.part-interactive-numbers.anim-step-4 .lottie-container,
.part-interactive-numbers.anim-step-5 .lottie-container{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 0.3s;
    transition-timing-function: ease-in-out;
}

.part-interactive-numbers.anim-step-2 .interactive-numbers .interactive-number:nth-child(1) > .inner-wrapper,
.part-interactive-numbers.anim-step-2 .interactive-numbers .interactive-number:nth-child(2) > .inner-wrapper{
    opacity: 1;
    transform: translatey(0);
}

.part-interactive-numbers.anim-step-3 .interactive-numbers .interactive-number:nth-child(1) > .inner-wrapper,
.part-interactive-numbers.anim-step-3 .interactive-numbers .interactive-number:nth-child(2) > .inner-wrapper,
.part-interactive-numbers.anim-step-3 .interactive-numbers .interactive-number:nth-child(3) > .inner-wrapper{
    opacity: 1;
    transform: translatey(0);
}

.part-interactive-numbers.anim-step-4 .interactive-numbers .interactive-number:nth-child(1) > .inner-wrapper,
.part-interactive-numbers.anim-step-4 .interactive-numbers .interactive-number:nth-child(2) > .inner-wrapper,
.part-interactive-numbers.anim-step-4 .interactive-numbers .interactive-number:nth-child(3) > .inner-wrapper,
.part-interactive-numbers.anim-step-4 .interactive-numbers .interactive-number:nth-child(4) > .inner-wrapper{
    opacity: 1;
    transform: translatey(0);
}

.part-interactive-numbers.anim-step-5 .interactive-numbers .interactive-number:nth-child(1) > .inner-wrapper,
.part-interactive-numbers.anim-step-5 .interactive-numbers .interactive-number:nth-child(2) > .inner-wrapper,
.part-interactive-numbers.anim-step-5 .interactive-numbers .interactive-number:nth-child(3) > .inner-wrapper,
.part-interactive-numbers.anim-step-5 .interactive-numbers .interactive-number:nth-child(4) > .inner-wrapper{
    opacity: 0;
    transition-duration: 2s;
    transform: translatey(0);
}

.part-interactive-numbers.anim-step-5 .interactive-numbers .interactive-number.final_number > .inner-wrapper{
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 1s;
    transform: translatey(0);
}

.part.part-interactive-numbers .content{
    padding-top: 100px;
}

.part-interactive-numbers .lottie-container{
    transform: translate(calc( -50% - 10px ),calc( -50% - 50px )) scale(1.1);
}

.part-interactive-numbers .lottie-container,
.interactive-numbers{
    top: calc( 50% + 50px );
}

@media only screen and (max-width: 768px) {
    .part.part-interactive-numbers .content{
        padding-top: 50px;
    }
    .interactive-number.final_number,
    .interactive-numbers{
        position: relative;
        top: unset;
        transform: unset;
        left: unset;
        margin-left: auto;
        margin-right: auto;
    }
    .part-interactive-numbers .interactive-numbers .interactive-number.final_number > .inner-wrapper,
    .part-interactive-numbers .interactive-numbers .interactive-number > .inner-wrapper{
        opacity: 1 !important;
        transform: unset;
    }
    .interactive-numbers .interactive-number.final_number,
    .interactive-numbers .interactive-number:not(:first-child){
        margin-top: 50px;
    }
    .interactive-number .value{
        font-size: 81px;
    }
    .interactive-number{
        max-width: 190px;
    }
    .part-interactive-numbers .lottie-container{
        top: unset;
        bottom: 0;
        transform: translate(calc( -50% - 5px ),calc( -70px )) scale(3);
        opacity: 1 !important;
    }
    .part-interactive-numbers{
        background-image: url(/wp-content/themes/wpstack-child/assets/images/interactive-numbers-bg.png);
        background-size: 100% 100%;
    }
}