/***************************************************************************/
/************** РАЗМЕР ТЕКСТА МЕНЯТЬ ТОЛЬКО СДЕСЬ (это переменная) **************************/
:root{
    @media only screen and (min-width:640px) {
    /*размер текста*/
    --size-text: 35px;
    /*отступ от круга*/
    --gap: 1em;
}
    @media only screen and (max-width:639px) {
    /*размер текста*/
    --size-text: 24px;
    /*отступ от круга*/
    --gap: 1em;
}}
/***************************************************************************/
/****************************************************************************/




    @media only screen and (min-width:640px) {
 .text-container{
    position: relative;
    font-size: var(--size-text);
    line-height: 1;
    /*ширина поля где появляется текст*/
    width: 500px;
    height: calc(var(--size-text) + 10px);
    overflow: hidden;
    background-color: #F5F5F5;
    text-align: center;
}
}

    @media only screen and (max-width:639px) {
 .text-container{
    position: relative;
    font-size: var(--size-text);
    line-height: 1;
    /*ширина поля где появляется текст*/
    width: 310px;
    height: calc(var(--size-text) + 10px);
    overflow: hidden;
    background-color: #F5F5F5;
    text-align: center;
}
}


#rec663157059 .tn-elem[data-elem-id="1699336718139"].active-wrapper {
  z-index: 30;
}
#rec663806572 .tn-elem[data-elem-id="1699336718139"].active-wrapper {
  z-index: 30;
}
#rec663817487 .tn-elem[data-elem-id="1699336718139"].active-wrapper {
  z-index: 30;
}
#rec663827478 .tn-elem[data-elem-id="1699336718139"].active-wrapper {
  z-index: 30;
}

.text1,
.text2,
.text4,
.text3{
    position: absolute;
    top:calc(var(--size-text) + 20px);
    background-color: #f5f5f5;
    width: 100%;
    font-family: 'Lab',Arial,sans-serif;
    
}
.text1.active-wrapper{
    /*анимация появление первого текста, время анимации 3 секунды*/
    animation: slider 3s ease-in-out forwards;
}
/*анимация появление второго текста, время анимации 3 секунды, запуск после первого текста = задержка появления 3 секунды */
.text2.active-wrapper{
    animation: slider 3s ease-in-out forwards;
    animation-delay: 3s;
}
/*анимация появление третьего текста, время анимации 3 секунды, запуск после первого текста = задержка появления 6 секунды */
.text3.active-wrapper{
    animation: slider 3s ease-in-out forwards;
    animation-delay: 6s;
}
/*анимация появление четвертого текста, время анимации 3 секунды, запуск после первого текста = задержка появления 9 секунды */
.text4.active-wrapper{
    animation: slider 3s ease-in-out forwards;
    animation-delay: 9s;
}

/*анимация появления текста*/
@keyframes slider {
    0%{
        top:45px;
        opacity: 0;
        z-index: 37;
    }
    20%{
        opacity: 1;
        top:0;
    }
    99%{
        top: 0;
        opacity: 1;
        z-index: 37;
    }
    100%{
        opacity: 0;
        /*top:-45px;*/
        top: 0;
        z-index: -1;
    }
}


.wrapper-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
}

/********************галочка***********************************/
.koleso{
    position: relative;
    width: 60px;
    height: 60px;
    border: 5px solid transparent;
    border-radius: 50%;
    border-left-color: #2ab06f;
    box-sizing: unset;
    opacity: 0;
    z-index: -1;
}
.bacg{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #2ab06f;
    top:0;
    left: 0;
    border-radius: 50%;
    opacity: 0;
    z-index: -1;
}
.galka{
    width: 25px;
    height: 10px;
    border-left: 5px solid #fff;
    border-bottom: 5px solid #fff;
    position: relative;
    transform: rotate(-45deg) translateX(-1px) translateY(25px);
}
/*вращение*/
.koleso.active-wrapper{
    opacity: 1;
    transition: opacity 1s ease-in-out;
    z-index: 35;
    /*сразу запускаем вращение, время вращения 9.5 секунды*/
    animation: cirkle 9.5s linear;
    animation-fill-mode: forwards
}
/*для вращения прогресса*/
@keyframes cirkle {
    0%{
        opacity: 1;
        transform: rotate(0deg);
    }
    95%{
        border-left-color: #2ab06f;
    }
    99.9%{
        opacity: 1;
    }

    100%{
        border-left-color: transparent;
        transform: rotate(3600deg);
        opacity: 1;
    }
}
.bacg.active-wrapper{
    z-index: 35;
    /*появление галочки в кругу через 10 секунд после появления первого текста, продолжительность анимации 1,5 секунды*/
    animation: bags 1.5s cubic-bezier(.19,1,.22,1);
    animation-delay: 10s;
    animation-fill-mode: forwards
}
/*появление "ок"*/
@keyframes bags {
    0%{
        opacity: 0;
    }
    10%{
        opacity: 1;
    }
    99%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        z-index: -1;
    }
}