<style>
#rec223769201 h2 { /*Указываем идентификатор и/или тег и/или селектор класса текста*/
     background: radial-gradient(96% 384% at 1.5% 10%, #EAE5B9 11.46%, #B9EAE4 50%, #EAB9E5 90.1%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}
</style>

<style>
h2 {
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(to right , #BBB086 , #000000, #BBB086 60%);
    background-position: 0 0;
    transition: all 0.8s ease-in-out;
}
h2:hover {
    background-position: 500px!important; /*Дистанция в пикселях на сколько сдвинется фон при наведении*/
}
</style>

<style>
#rec93790438 .text { /*Указываем селектор элемента (текста)*/
    background: #fff; /*Фон только белый. При выборе других цветов фон приобретает прозрачность вплоть до 0%. Цвет текста ставим #000000.*/
    mix-blend-mode: screen;
    display:block !important;
    padding: 20px 0;
}
</style>

<style>
#rec213603084 .t001__title .tn-atom {
    -webkit-text-stroke-width: 1px; /*Толщина контура*/
    -webkit-text-stroke-color: #ff0000; /*Цвет контура*/
     color: transparent!important;
}
</style>

<style>
/*Задаём вид и время анимации*/
#rec221407994 .glav .tn-atom {
    transition: ease-in-out 0.5s;
}
/*Эффекты при наведении*/
#rec221407994 .glav:hover .tn-atom { 
    color: #f5e503; /*Цвет текста*/
    padding-left: 5px; /*Сдвиг вправо*/
    border-left: 3px solid #f5e503; /*Левая граница*/
    font-weight: 600;
} 
</style>

<style>
#rec215068614 .t-submit:hover { /*Указываем идентификатор и/или селектор класса кнопки*/
    background-color: transparent!important;
}
</style>

<style>
#rec188967014 {
    background-image: url(http://lubowl.ucoz.ru/kartinki/rasdelitel.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    background-attachment: scroll;
    background-size: cover;
}
</style>

<style>
@media screen and (max-width: 1199px) {
#rec247728081 .t396__carrier {
    position: fixed;
    z-index: -1;
}
}
</style>

<style>
#rec265928400 .t830m {
    background-color: rgb(2 2 2 / 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/granim/1.1.1/granim.min.js'></script>

<canvas id="canvas-basic"></canvas>
<style>
#canvas-basic {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
</style>
<script>
    var granimInstance = new Granim({
    element: '#canvas-basic',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: [1, 1],
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#AA076B', '#61045F'],
                ['#02AAB0', '#00CDAC'],
                ['#DA22FF', '#9733EE']
            ]
        }
    }
});
</script>

<style>
#rec221626223  {
    position: fixed;
    width: 100%;
    z-index: 999;
    bottom: 0px;
    box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.4); /*Задаем тень для блока, если надо*/
}
</style>

<style>
#rec221609739  {
    position: fixed;
    width: 100%;
    bottom: 0px;
    z-index: 999;
    transition: all .3s ease; /*Задаем функцию плавности и скорость анимации тапбара*/ 
    box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.4); /*Задаем тень для всего блока*/
}
#rec221609739.out {
    opacity: 0; /*Задаем свойство и значение завершения анимации тапбара*/
    pointer-events: none;
}
</style>

<script>
var header = $('#rec221609739'),
	scrollPrev = 0;

$(window).scroll(function() {
	var scrolled = $(window).scrollTop();
//значение 50 здесь означает, что после прокрутки страницы вверх на 50px начнут работать условия скрипта и тапбар скроется.
	if ( scrolled > 50 && scrolled > scrollPrev ) { 
		header.addClass('out');
	} else {
		header.removeClass('out');
	}
	scrollPrev = scrolled;
});
//Еще один вариант скрытия тапбара. Заменить в коде выше соответствующие строки кода.
        if ( scrolled > 100 && scrolled > scrollPrev ) {
                $('#rec221609739').fadeOut();
        } else {
                $('#rec221609739').fadeIn();
        }
</script>

<!-- Этот код добавляем в html элемент в zero block -->
<a id="upbutton" href="#" onclick="smoothJumpUp(); return false;">
<img src="https://static.tildacdn.com/tild3363-3465-4339-a162-373233616265/ion_chevron-up_2.svg" width="50px" border="none" title="Наверх">
</a>

<!-- Стили и скрипт добавляем в блок Т123 -->
<style>
#upbutton {
    height: 50px;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
    visibility: hidden;
    position: fixed;
    z-index: 899!important;
}
.fadeIn {
  opacity: 0;
  transition:all .4s ease-in;
-webkit-transition:all .4s ease-in;

}
.fadeOut {
  opacity: 1;
  transition:all .4s ease-out;
-webkit-transition:all .4s ease-out;
}
</style>

<script>
    var smoothJumpUp = function() {
        if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
            window.scrollBy(0,-100); //чем ближе значение -100 к нулю, тем медленнее будет прокручиваться страница наверх. Оптимальные значения от -100 до -500.
            setTimeout(smoothJumpUp, 10);
        }
    }
    
    window.onscroll = function() {myFunction()};
    function myFunction() {
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop < 5000) {//здесь 5000 это кол-во пикселей, после прокрутки которых, появится кнопка "Наверх".
        document.getElementById("upbutton").className = "fadeIn";
        document.getElementById("upbutton").style.visibility = "hidden";
    } else {
        document.getElementById("upbutton").className = "fadeOut";
        document.getElementById("upbutton").style.visibility = "visible";
    }
}
</script>

<a href="#" class="btn">
  <svg width="210" height="60">
    <defs>
        <linearGradient id="grad1">
            <stop offset="0%" stop-color="#FF8282"/>
            <stop offset="100%" stop-color="#E178ED" />
        </linearGradient>
    </defs>
     <rect x="5" y="5" rx="25" fill="none" stroke="url(#grad1)" width="200" height="50"></rect>
  </svg>
    <span>Отправить</span>
</a>

<style>
.btn {
    position: relative;
    display: inline-block;
    width: 210px;
    height: 60px;
    font-size: 1em;
    font-weight: bold;
    line-height: 60px;
    text-align: center;
    text-transform: uppercase;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Halvar-SuisseIntl', Arial, sans-serif;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 0.045em;
}
.btn svg {
    position: absolute;
    top: 0;
    left: 0;
}
.btn svg rect {
    stroke-width: 4;
    stroke-dasharray: 353, 0;
    stroke-dashoffset: 0;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
}
.btn span{
  background: -moz-linear-gradient(left,  rgba(255,130,130,1) 0%, rgba(225,120,237,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);
  background: linear-gradient(to right,  rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn:hover svg rect {
    stroke-width: 4;
    stroke-dasharray: 132, 543; /*первое значение отвечает за длину нижнего бордера в конце анимации*/
    stroke-dashoffset: 437;
}
</style>

<style>
#rec248761810 {
    overflow: auto;
}
@media screen and (max-width: 960px) {
#rec248761810 .t395__wrapper {
    display: inline-block;
    margin: 0 10px; /*Отступ от края экрана*/
    width: max-content;
}
#rec248761810 .t395__wrapper_mobile {
    display: none;
}
#rec248761810 .t395__col {
    padding: 0;
}
#rec248761810 .t395__width_16 {
    width: auto; /*Ширина вкладки зависит от длины текста*/
}
}
</style>

<style>
#rec248763405 {
    overflow: auto;
}
@media screen and (max-width: 960px) {
#rec248763405 .t397__wrapper {
    display: block;
}
#rec248763405 .t397__wrapper_mobile {
    display: none;
}
#rec248763405 .t397__col {
    padding: 0;
}
#rec248763405 .t397__title {
    padding: 0 20px;
}
}
</style>

<style>
#rec247605786 .t456__leftwrapper {
    padding-right: 50px;
}
@media screen and (max-width: 980px) {
#rec247605786 .t456__maincontainer {
    display: flex;
}
#rec247605786 .t456__leftwrapper {
    padding: 0px;
    display: flex;
}
#rec247605786 .t456__imglogo {
    padding: 0;
}
#rec247605786 .t456__list {
    display: flex;
    width: max-content;
}
#nav247605786 {
    display: none;
    position: fixed;
}
}
</style>

<script>
//код для плавного появления и исчезания меню при прокрутке
$(window).scroll(function(){
    if ($(this).scrollTop() > 700) { //задаем дистанцию появления меню в px 
        $('#nav247605786').fadeIn();
    } else {
        $('#nav247605786').fadeOut();
    }
});
//код отвечающий за подсвечивание активных ссылок при прокрутке
function t456_checkAnchorLinks(recid){
    if($(window).width()>=640){
        var t456_navLinks=$("#rec"+recid+" .t456__list_item a:not(.tooltipstered)[href*='#']");
    if(t456_navLinks.length>0){
        t456_catchScroll(t456_navLinks)}
    }
}
</script>

<style>
@media screen and (min-width: 768px) {
#rec352093639 .t-slds {
    width: 1200px;
    margin: 0 auto;
}
#rec352093639 .t604__imgwrapper .t-slds__bgimg {
    border-radius: 25px;
    transform: scale(0.8);
    transition: .6s ease;
}
#rec352093639 .t-slds__item_active .t604__imgwrapper .t-slds__bgimg {
    transform: scale(1);
}
#rec352093639 .t-slds__bullet_active .t-slds__bullet_body {
    width: 28px;
}
#rec352093639 .t-slds__bullet_body {
    width: 16px;
    -webkit-transition: all ease-in-out .6s;
    -moz-transition: all ease-in-out .6s;
    -o-transition: all ease-in-out .6s;
    transition: all ease-in-out .6s;
}
#rec352093639 .t-slds__arrow_wrapper {
    width: calc(100% / 2 - 385px) !important;
}
#rec352093639 .t-container:before, #rec352093639 .t-container:after {
    display: block;
    position: absolute;
    width: 50px;
    height: 100%;
    z-index: 10;
}
#rec352093639 .t-container:before {
    background-image: linear-gradient( 90deg, #f9f9f9, rgb(249 249 249 / 0%));
}
#rec352093639 .t-container:after {
    top: 0;
    right: 0;
    background-image: linear-gradient( 270deg, #f9f9f9, rgb(249 249 249 / 0%));
}
}
@media (min-width: 768px) and (max-width: 1199px) {
#rec352093639 .t-slds {
    width: inherit;
}
#rec352093639 .t-container:before {
    left: 0;
}
}
</style>

<!-- Этот код вставляем в html контейнер внутри zero block. Важно помнить, что от ширины html контейнера зависит размер анимации! -->
<div id="lottie-1"></div>

<!-- Этот код загружает библиотеку. Его вставляем один раз на страницу в блок Т123. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.5/lottie.min.js"></script>

<!-- Этот код тоже вставляем в html блок Т123. -->
<script>
    bodymovin.loadAnimation({
    container: document.getElementById("lottie-1"),
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: "https://gist.githubusercontent.com/bocmanbarada/ef40e0c1febb41aa601ddfa419a42631/raw/7e0c251a9f2f9dc780a8e75f3e9145f938f8889c/dezinfector.json"
    });
</script>

<!-- Вторая анимация и так далее по образцу. -->
<div id="lottie-2"></div>

<!-- Каждую новую анимацию лучше вставлять в отдельный html блок T123, а не то могут быть конфликты. -->
<script>
    bodymovin.loadAnimation({
    container: document.getElementById("lottie-2"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://gist.githubusercontent.com/bocmanbarada/080b7ce42348f81df1d0b7f419d1816f/raw/23694b2b2f5ed4a7cf3fd467e6376933ab050f8e/choose.json"
    });
</script>

<script>
$( document ).ready(function() {
    $(".tn-elem__2125347751605182698629").addClass('parcon2'); //Добавляем элементу свой класс
    $(".tn-elem__2136194601595378227976").append('<a name="anchor">'); //Добавляем элементу якорь
    $(".parcon2").append('<a name="anchor2">'); //Добавляем своему классу якорь
});
</script>