Какой из тебя лесоруб?
Пройдите этот простой тест
Вы узнаете какая бензопила подходит именно вам и заработаете скидку за свои ответы
Видели ли вы бензопилы Husqvarna?
Шаг 1/8
Работали ли бензопилой вообще?
Шаг 2/8
Что планируете делать бензопилой?
Шаг 3/8
Какая мощность должна быть у пилы?
Шаг 4/8
Какого веса должна быть пила?
Шаг 5/8
Какая длина шины у пилы?
Шаг 6/8
Нужна ли система хранения для пилы?
Шаг 7/8
Нужна ли фирменная экипировка для защиты?
Шаг 8/8
Отлично. Вы прошли тест.
Чтобы получить результаты теста и зафиксировать скидку заполните форму ниже. Спасибо!
Нажимая на кнопку "Получить ответы" Вы соглашаетесь с политикой конфиденциальности
Результаты теста
Вы - Новичок
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
— Романенко Константин, эксперт по бензопилам Husqvarna
Вы - Профи
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
— Романенко Константин, эксперт по бензопилам Husqvarna
Вы Любитель
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
— Романенко Константин, эксперт по бензопилам Husqvarna
Вам не нужна пила, но Вы можете её подарить
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
— Романенко Константин, эксперт по бензопилам Husqvarna
1
Husqvarna 236
Delivers lower fuel consumption and reduced exhaust emission levels in accordance with the world´s most stringent environmental regulations.
2
Husqvarna 135
Delivers lower fuel consumption and reduced exhaust emission levels in accordance with the world´s most stringent environmental regulations.
3
Husqvarna 435
Delivers lower fuel consumption and reduced exhaust emission levels in accordance with the world´s most stringent environmental regulations.
4
Husqvarna 445
Delivers lower fuel consumption and reduced exhaust emission levels in accordance with the world´s most stringent environmental regulations.
Константин Р.
эксперт по бензопилам Husqvarna
Текст 1
Константин Р.
эксперт по бензопилам Husqvarna
Текст 2
Константин Р.
эксперт по бензопилам Husqvarna
Текст 3
Константин Р.
эксперт по бензопилам Husqvarna
Текст 4
Константин Р.
эксперт по бензопилам Husqvarna
Текст 5
Константин Р.
эксперт по бензопилам Husqvarna
Текст 6
Константин Р.
эксперт по бензопилам Husqvarna
Текст 7
Константин Р.
эксперт по бензопилам Husqvarna
Текст 8
You can't connect the dots looking forward, you can only connect them looking backwards.
The words "think different" were created by Chiat Day art director Craig Tanimoto. The text of the various versions of this commercial was tinkered with by Rob Siltanen and Ken Segall. However it is important to point out that the text was simply lifted from an original piece written by Jack Kerouac (and certainly not created for Apple). Music was composed by Chip Jenkins for Elias Arts.
Квиз в скрытом блоке на сайте c 4 вариантами ответов, выполнено в Tilda
Данный квиз состоит из нескольких штатных блоков.
Появляется он не в pop-up, а прямо в контенте сайта.
Состав штатных блоков:
1-ый экран - это обложка CR30N
Квиз:
- Форма BF204N - основа квиза (полное сохранение штатного функционала, текст вопросов и ответов редактируется штатно)
- Блок TM103 - персоны (фото и текст для персон менять можно прямо в этом блоке)
- Блок ответов IP404, CL22 ,
- Блок BF101 кнопка Дальше (настройки штатно, кроме Hover)

1 - код - алгоритм квиза
2 - код - внешний вид
3 - код - progress bar

Скрипт добавляется в блок ДРУГОЕ►Т123


1
<script>
//Скрываем лишние шаги
$(".t678 .t-input-group:eq(1)").css("display" , "none");
$(".t678 .t-input-group:eq(2)").css("display" , "none");
$(".t678 .t-input-group:eq(3)").css("display" , "none");
$(".t678 .t-input-group:eq(4)").css("display" , "none");
$(".t678 .t-input-group:eq(5)").css("display" , "none");
$(".t678 .t-input-group:eq(6)").css("display" , "none");
$(".t678 .t-input-group:eq(7)").css("display" , "none");
$(".t678 .t-input-group:eq(8)").css("display" , "none");
$(".t678 .t-input-group:eq(9)").css("display" , "none");

//Скрываем кнопку отправить
$(".t678 .t-submit").css("display" , "none");

//Скрываем основную форму
$("[data-record-type='678']").addClass("hithblk newbgr repl");
//Скрываем блок с персоной
$("[data-record-type='526']").addClass("hithblk");
//Скрываем блок кнопки и карточек товара
$("[data-record-type='191']").addClass("hithblk");
$("[data-record-type='603']").addClass("hithblk");
//Скрываем блоки ответов теста Заголовок, Ответ, Товар со скидкой
$("[data-record-type='128']").addClass("hithblk repl");
$("[data-record-type='276']").addClass("hithblk repl");
$("[data-record-type='180']").addClass("hithblk repl");

 $(".repl").wrap("<div class='newplace'></div>");
 
 
 //*************************************

 $(".newplace").insertAfter($("#rec44323330"));

 //*************************************
 


//Вставляем оригинальные фотографии для персон
$(".t526__bgimg:eq(0)").css('backgroundImage', 'url('+$(".t526__bgimg:eq(0)").data("original")+')');
$(".t526__bgimg:eq(1)").css('backgroundImage', 'url('+$(".t526__bgimg:eq(1)").data("original")+')');
$(".t526__bgimg:eq(2)").css('backgroundImage', 'url('+$(".t526__bgimg:eq(2)").data("original")+')');
$(".t526__bgimg:eq(3)").css('backgroundImage', 'url('+$(".t526__bgimg:eq(3)").data("original")+')');
$(".t526__bgimg:eq(4)").css('backgroundImage', 'url('+$(".t526__bgimg:eq(4)").data("original")+')');
$(".t526__bgimg:eq(5)").css('backgroundImage', 'url('+$(".t526__bgimg:eq(5)").data("original")+')');
$(".t526__bgimg:eq(6)").css('backgroundImage', 'url('+$(".t526__bgimg:eq(6)").data("original")+')');
$(".t526__bgimg:eq(7)").css('backgroundImage', 'url('+$(".t526__bgimg:eq(7)").data("original")+')');
$(".t526__bgimg:eq(8)").css('backgroundImage', 'url('+$(".t526__bgimg:eq(8)").data("original")+')');

 //Клонируем кнопки
 $(".t142 .t-btn").clone().appendTo(".t678 .t-form__submit");  
 //Блокируем кнопку при старте 
 $(".t142__submit").addClass("buttton-blk"); 
 
 //Функция блокировки кнопки 
function blockbutt(){
     $(".t142__submit").addClass("buttton-blk");
     $(".ink").removeClass("animate"); 
          
};

 
//Добавляем прогресс бар
   $('.t678 .t-input-group').prepend('<div class="progress gradient stripe gloss"><span>11%</span></div>');   
   
//Добавляем новый класс для контейнера формы + Добавляем контейнер справа от формы 
  $(".t678 .t-container:eq(1)").addClass("vnblock").append('<div class="t-col t-col_4 managerr"></div>');   

//Добавляем нашего первого человека в правую колонку
   $(".t526 .t526__col:eq(0)").clone().appendTo(".managerr");
   
//Добавляем тающую скидку над менеджером
   $(".managerr").prepend("<div class='sktimer'><span>С каждым ответом скидка увеличивается. <br> Сейчас она составляет:</span><div class='dsumma'><span><span>500</span> руб</span></div></div>");
   

    //При клике на кнопку ТЕСТ скрываем первый экран и запускаем тест
   $(".t734 .t-btn:eq(0)").click(function () {
       
        //Блокируем кнопку запуска теста  
           $(this).addClass("buttton-blk");
        $("[data-record-type='678']").removeClass("hithblk");
        $(".dsumma span span").html("500");
       
   });
   
  

//Объявляем переменную переменную номера шага 
         var numstep=1;  
// Функция второго шага
function step2(){
             //Пишем скидку
             $(".dsumma span").html("").html("800 руб");
             //Блокируем кнопку
             blockbutt();
             //Скрываем одну персону
             $(".t678 .t526__col:eq(0)").css("display" , "none");
             //Показываем другую персону
             $(".t526 .t526__col:eq(1)").clone().appendTo(".managerr"); 
             
            //Скрыть первый шаг
            $(".t678 .t-input-group:eq(0)").css("display" , "none");
            //Открыть второй
             $(".t678 .t-input-group:eq(1)").css("display" , "block");
            //Изменить надпись на 22% 
             $(".progress").html("<span>22%</span>");
            //Изменить ширину progress bar до 22%
             $(".progress > span").css("width" , "22%");
             numstep++;
};   

// Функция третьего шага
function step3(){
             //Пишем скидку
             $(".dsumma span").html("").html("1500 руб");
             //Блокируем кнопку
             blockbutt();
             //Скрываем одну персону
             $(".t678 .t526__col:eq(1)").css("display" , "none");
             //Показываем другую персону
             $(".t526 .t526__col:eq(2)").clone().appendTo(".managerr"); 
             
            //Скрыть первый шаг
            $(".t678 .t-input-group:eq(1)").css("display" , "none");
            //Открыть второй
             $(".t678 .t-input-group:eq(2)").css("display" , "block");
            //Изменить надпись на 33% 
             $(".progress").html("<span>33%</span>");
            //Изменить ширину progress bar до 33%
             $(".progress > span").css("width" , "33%");
             numstep++;
}; 
// Функция четвёртого шага
function step4(){
              //Пишем скидку
             $(".dsumma span").html("").html("2700 руб");
             //Блокируем кнопку
             blockbutt();
             //Скрываем одну персону
             $(".t678 .t526__col:eq(2)").css("display" , "none");
             //Показываем другую персону
             $(".t526 .t526__col:eq(3)").clone().appendTo(".managerr"); 
             
            //Скрыть первый шаг
            $(".t678 .t-input-group:eq(2)").css("display" , "none");
            //Открыть второй
             $(".t678 .t-input-group:eq(3)").css("display" , "block");
            //Изменить надпись на 44% 
             $(".progress").html("<span>44%</span>");
            //Изменить ширину progress bar до 44%
             $(".progress > span").css("width" , "44%");
             numstep++;
}; 
// Функция пятого шага
function step5(){
             //Пишем скидку
             $(".dsumma span").html("").html("3700 руб");
             //Блокируем кнопку
             blockbutt();
             //Скрываем одну персону
             $(".t678 .t526__col:eq(3)").css("display" , "none");
             //Показываем другую персону
             $(".t526 .t526__col:eq(4)").clone().appendTo(".managerr"); 
             
            //Скрыть первый шаг
            $(".t678 .t-input-group:eq(3)").css("display" , "none");
            //Открыть второй
             $(".t678 .t-input-group:eq(4)").css("display" , "block");
            //Изменить надпись на 55% 
             $(".progress").html("<span>55%</span>");
            //Изменить ширину progress bar до 55%
             $(".progress > span").css("width" , "55%");
             numstep++;
}; 
// Функция шестого шага
function step6(){
              //Пишем скидку
             $(".dsumma span").html("").html("4500 руб");
             //Блокируем кнопку
             blockbutt();
             //Скрываем одну персону
             $(".t678 .t526__col:eq(4)").css("display" , "none");
             //Показываем другую персону
             $(".t526 .t526__col:eq(5)").clone().appendTo(".managerr"); 
             
            //Скрыть первый шаг
            $(".t678 .t-input-group:eq(4)").css("display" , "none");
            //Открыть второй
             $(".t678 .t-input-group:eq(5)").css("display" , "block");
            //Изменить надпись на 66% 
             $(".progress").html("<span>66%</span>");
            //Изменить ширину progress bar до 66%
             $(".progress > span").css("width" , "66%");
             numstep++;
}; 
// Функция седьмого шага
function step7(){
             //Пишем скидку
             $(".dsumma span").html("").html("5600 руб");
             //Блокируем кнопку
             blockbutt();
             //Скрываем одну персону
             $(".t678 .t526__col:eq(5)").css("display" , "none");
             //Показываем другую персону
             $(".t526 .t526__col:eq(6)").clone().appendTo(".managerr"); 
             
            //Скрыть первый шаг
            $(".t678 .t-input-group:eq(5)").css("display" , "none");
            //Открыть второй
             $(".t678 .t-input-group:eq(6)").css("display" , "block");
            //Изменить надпись на 77% 
             $(".progress").html("<span>77%</span>");
            //Изменить ширину progress bar до 77%
             $(".progress > span").css("width" , "77%");
             numstep++;
}; 
// Функция седьмого шага
function step8(){
             //Пишем скидку
             $(".dsumma span").html("").html("6300 руб");
             //Блокируем кнопку
             blockbutt();
             //Скрываем одну персону
             $(".t678 .t526__col:eq(6)").css("display" , "none");
             //Показываем другую персону
             $(".t526 .t526__col:eq(7)").clone().appendTo(".managerr"); 
             
            //Скрыть первый шаг
            $(".t678 .t-input-group:eq(6)").css("display" , "none");
            //Открыть второй
             $(".t678 .t-input-group:eq(7)").css("display" , "block");
            //Изменить надпись на 88% 
             $(".progress").html("<span>88%</span>");
            //Изменить ширину progress bar до 88%
             $(".progress > span").css("width" , "88%");
             numstep++;
}; 
             

function step9(){     
            $(".sktimer span").html("").html("Тест пройден <br> Итоговая скидка:");
            $(".dsumma span").html("").html("6300 руб");
        
            //Скрываем кнопку дальше
             $(".t678 .t142__submit").css("display" , "none");
             //Скрываем последний прогресс
             $(".progress:eq(9)").css("display" , "none");
             //Добавляем Отступ от телефона
             $(".t-input-subtitle").css("margin-bottom" , "20px");
            //Скрыть первый шаг
            $(".t678 .t-input-group:eq(7)").css("display" , "none"); 
            //Открыть второй
             $(".t678 .t-input-group:eq(8)").css("display" , "block");
             $(".t678 .t-input-group:eq(9)").css("display" , "block");
             //Показать кнопку ОТПРАВИТЬ
             $(".t678 .t-submit").css("display" , "block");
             //Изменить надпись на 100% 
             $(".progress").html("<span>100%</span>");
            //Изменить ширину progress bar до 100%
             $(".progress > span").css("width" , "100%");
           
};

var nat=0 , lis=0 , bel=0 , kuk=0;



 //Описываем действия при клике на кнопку Дальше
   $(function(){
       $(".t678 .t142__submit").click(function () {
         //Если первый шаг пройден вызываем функцию второго шага
         if (numstep==1) {
            step2();
            if ($(".t-radio:eq(0)").prop("checked")){nat++;};
            if ($(".t-radio:eq(1)").prop("checked")){bel++;};
            if ($(".t-radio:eq(2)").prop("checked")){kuk++;};
            if ($(".t-radio:eq(3)").prop("checked")){lis++;};
            
            return;
           
         };
         //Если второй шаг пройден вызываем функцию третьего шага
         if (numstep==2) {
           step3();
           if ($(".t-radio:eq(4)").prop("checked")){lis++;};
           if ($(".t-radio:eq(5)").prop("checked")){nat++;};
           if ($(".t-radio:eq(6)").prop("checked")){bel++;};
           if ($(".t-radio:eq(7)").prop("checked")){kuk++;};
           
           return;
         };    
         //Если третий шаг пройден вызываем функцию четвёртого шага
         if (numstep==3) {
           step4();
           if ($(".t-radio:eq(8)").prop("checked")){kuk++;};
           if ($(".t-radio:eq(9)").prop("checked")){lis++;};
           if ($(".t-radio:eq(10)").prop("checked")){nat++;};
           if ($(".t-radio:eq(11)").prop("checked")){bel++;};
           
           return;
         };     
         //Если четвёртый шаг пройден вызываем функцию пятого шага
         if (numstep==4) {
           step5();
           if ($(".t-radio:eq(12)").prop("checked")){lis++;};
           if ($(".t-radio:eq(13)").prop("checked")){nat++;};
           if ($(".t-radio:eq(14)").prop("checked")){bel++;};
           if ($(".t-radio:eq(15)").prop("checked")){kuk++;};
           
           return;
         };  
         //Если пятый шаг пройден вызываем функцию шестого шага
         if (numstep==5) {
           if ($(".t-radio:eq(16)").prop("checked")){lis++;};
           if ($(".t-radio:eq(17)").prop("checked")){kuk++;};
           if ($(".t-radio:eq(18)").prop("checked")){nat++;};
           if ($(".t-radio:eq(19)").prop("checked")){bel++;};
           
           step6();
           return;
         }; 
         //Если шестой шаг пройден вызываем функцию седьмого шага
         if (numstep==6) {
           step7();
           if ($(".t-radio:eq(20)").prop("checked")){lis++;};
           if ($(".t-radio:eq(21)").prop("checked")){nat++;};
           if ($(".t-radio:eq(22)").prop("checked")){kuk++;};
           if ($(".t-radio:eq(23)").prop("checked")){bel++;};
           
           return;
         }; 
         //Если седьмой шаг пройден вызываем функцию восьмого шага
         if (numstep==7) {
           step8();
           if ($(".t-radio:eq(24)").prop("checked")){lis++;};
           if ($(".t-radio:eq(25)").prop("checked")){kuk++;};
           if ($(".t-radio:eq(26)").prop("checked")){bel++;};
           if ($(".t-radio:eq(27)").prop("checked")){nat++;};
          
           return;
         }; 
         //Если восьмой шаг пройден вызываем функцию девятого шага
         if (numstep==8) {
           if ($(".t-radio:eq(28)").prop("checked")){kuk++;};
           if ($(".t-radio:eq(29)").prop("checked")){bel++;};
           if ($(".t-radio:eq(30)").prop("checked")){lis++;};
           if ($(".t-radio:eq(31)").prop("checked")){nat++;};
           
           step9();
           return;
         }; 
         
      });
    });
    
    
   
$(".t678 .t-radio__control").addClass("rbcont");



 //При клике на переключатель или фото разблокируем кнопку 
 $(".rbcont").click(function () {
    $(".t142__submit").removeClass("buttton-blk"); 
    $(".ink").addClass("animate"); 
    
});
  
  
//БЛОК ПРИНЯТИЯ РЕШЕНИЯ ПОСЛЕ ОТПРАВКИ ДАННЫХ  
  
  

$(document).ready(function(){
    window.mySuccessFunction= function($form){
        
        
       //Скрываем тест
       $("[data-record-type='678']").addClass("hithblk");
       
       //Получаем значение переключателя
       var  storona =$("input[type='radio']:checked").val();
       var max=0;
       
       //Условия для выбора 
       //Если натурального больше всего
       if (nat>bel && nat>kuk && nat>lis){
           $("[data-record-type='128']").removeClass("hithblk");
           $("[data-record-type='276']:eq(0)").removeClass("hithblk");
           $("[data-record-type='180']:eq(0)").removeClass("hithblk");
           document.location = "#startest";
           max=1;
          
           
           
       };
       //Если беличий больше всего
       if (bel>nat && bel>kuk && bel>lis){
           $("[data-record-type='128']").removeClass("hithblk");
           $("[data-record-type='276']:eq(1)").removeClass("hithblk");
           $("[data-record-type='180']:eq(1)").removeClass("hithblk");
           document.location = "#startest";
           max=2;
        
           
       };
       //Если кукольного больше всего
       if (kuk>nat && kuk>bel && kuk>lis){
           
           $("[data-record-type='128']").removeClass("hithblk");
           $("[data-record-type='276']:eq(2)").removeClass("hithblk");
           $("[data-record-type='180']:eq(2)").removeClass("hithblk");
           document.location = "#startest";
           max=3;
       
           
       };
       //Если лисьего больше всего
       if (lis>nat && lis>bel && lis>kuk){
           
            $("[data-record-type='128']").removeClass("hithblk");
           $("[data-record-type='276']:eq(3)").removeClass("hithblk");
           $("[data-record-type='180']:eq(3)").removeClass("hithblk");
           document.location = "#startest";
           max=4;
         
           
       };
         
       //Если всех типов одинаково показываем первый блок
           if ( nat==2 && bel==2 && lis==2 && kuk==2){
           $("[data-record-type='128']").removeClass("hithblk");
           $("[data-record-type='276']:eq(0)").removeClass("hithblk");
           $("[data-record-type='180']:eq(0)").removeClass("hithblk");
           document.location = "#startest";
           max=5;
        
           };
      
       
     
       //Если максимального среди них нет и не все одинаковые
       if (max==0){
           //Если натуральный больше или равен 3, то показываем первый блок
           if (nat>=3){
           $("[data-record-type='128']").removeClass("hithblk");
           $("[data-record-type='276']:eq(0)").removeClass("hithblk");
           $("[data-record-type='180']:eq(0)").removeClass("hithblk");
           document.location = "#startest";
           max=6;
       
           
           
       };
       //Если беличий больше или равен 3, то показываем второй блок
       if (bel>=3 && max==0){
           $("[data-record-type='128']").removeClass("hithblk");
           $("[data-record-type='276']:eq(1)").removeClass("hithblk");
           $("[data-record-type='180']:eq(1)").removeClass("hithblk");
           document.location = "#startest";
           max=7;
        
           
       };
       //Если кукольного больше или равен 3, то показываем третий блок
       if (kuk>=3 && max==0){
           
           $("[data-record-type='128']").removeClass("hithblk");
           $("[data-record-type='276']:eq(2)").removeClass("hithblk");
           $("[data-record-type='180']:eq(2)").removeClass("hithblk");
           document.location = "#startest";
           max=8;
         
           
       };
       
           
       };
      
    };
   
    $('.js-form-proccess').each(function(){
        $(this).data('success-callback', 'window.mySuccessFunction');
    });
});
             
  
</script>

2
<style>
/*Скрываем родительские блоки*/
.hithblk{
    display:none;
    opacity:0;
}

/*Положение кнопки слева*/
.t678 .t-form__submit {
    
    text-align: left !important;
    
}



/*Рамка и отступы вокруг фото*/
.managerr {
    border: 1px solid #ffffff;
    padding: 10px 0 20px 0;
    height: fit-content;
    display: grid;
}
/*Цвет радио-буттон и текста*/
.t678 .t-radio__control,
.t-checkbox__control,
.t678 .t-input-title{
    color:#ffffff;
}
/*Цвет обводки радио-буттон + чек-бокс*/
.t678 .t-radio__indicator,
.t-checkbox__indicator {
    border-color: #ffffff !important;
}
/*Цвет точки радио-буттон*/
.t678 .t-radio__indicator:after{
    background: #ffffff;
}
/*Цвет галочки чек-бокс*/
.t-checkbox__indicator:after{
    border-top-color: rgb(255, 255, 255) !important;
    border-top-style: solid;
    border-top-width: 0px;
    border-right-color: rgb(255, 255, 255) !important;
    border-right-style: solid;
    border-right-width: 2px;
    border-bottom-color: rgb(255, 255, 255) !important;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-left-color: rgb(255, 255, 255) !important;
    border-left-style: solid;
    border-left-width: 0px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
   
    border-width: 0 2px 2px 0;
}



/*Задаём стили подзаголовка блока*/
.t678 .t-section__descr div{
      font-size:22px;
      margin-bottom: 20px !important;
     /*Задаёт цвет и прозрачность*/
      background-color: rgba(161, 158, 255, 0.75);
      /*Если убрать строчку ниже, то окраситься не построчно, а целиком*/
      display: inline !important;
      
}
/*Увеличиваем ширину подзаголовка блока*/
.t678 .t-section__descr {
    max-width: 800px !important;
}




/*Задаём стили вопроса*/
.t678 .t-input-title.t-descr.t-descr_md {
    font-size: 24px !important;
    font-weight: 300 !important;
    padding: 10px 0 10px 0;
    
}

/*Отступ кнопки сверху*/
.t678 .t-submit {
    margin-top: 30px;
}


/*Ширина фотографий*/
.t678 .t-input-group img {
    width: 150px;
    margin-bottom: 5px;
    transition: transform 0.15s linear;
}
/*Позиция и отступы блоков с  фотографиями*/
.rbcont {
    margin: 20px 0px 0px 10px !important
}

    /*Фото  - эффект при наведении*/
   .t678 .t-input-group img:hover {
    transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -webkit-transform: scale(1.04);
    -o-transform: scale(1.04);
     position: relative;
     z-index: 2;
    -webkit-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.75);
    -moz-box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.75);
    box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.75);
}
/*Отключить эффект для картинок на экранах меньше 960рх*/
   @media screen and (max-width: 960px) {

    .t698__mainwrapper img {
    transform: none!important;
}}

/*Стили для  скидки*/
.sktimer {
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0 40px 0;
    font-family: 'Open Sans',serif;
    font-weight: 300;
    display: inline-grid;
    width: 100%;
}
/*Стили для  скидки*/
    .sktimer .dsumma {
    background: rgba(161, 158, 255, 0.75);
    margin-top: 10px;
    padding: 10px;
    border: 1px solid;
    font-size: 24px;
    font-weight: 600;
    height: 35px;
    margin-top: 10px;
}  
/*Стили для скидки*/
   .sktimer{
      margin-top: 0px; 
   }

  
    
     /*Стиль для блокировки кнопки*/  
       .buttton-blk{
       background-color: rgba(55, 50, 209, 0.5) !important;
       pointer-events: none;
       
   }
   /*Политика конфиденциальности*/   
.t678__form-bottom-text {
    margin: 30px 0 30px 0 !important;
    text-align: left !important;
    font-size: 10px !important;
}
/*Стили для надписи шагов*/
.t678 .t-input-subtitle
  {
    padding-bottom: 0px !important;
    color: #ffffff;
    font-size: 16px;
    background-color: rgba(161, 158, 255, 0.75);
    width: fit-content;
    text-align: center;
}




/*Имя персоны по центру*/
   .t526__persname, .t526__persdescr {
    text-align: center;
}


  /*Размер  полей ввода 100% по ширине для экранов меньше 640px*/
    @media screen and (max-width: 640px){
    .t678 .t-input {
    width: 100%;
}}
    /*Размер поля ввода на большом экране*/
    .t678 .t-input {
     width: 350px;
     height: 50px;
}
 /*Отступ от телефона сверху*/
.input.t-input.js-tilda-rule.js-tilda-mask {
    margin-top: 20px !important;
}

  /*Задаём цвет таблички успешной отправки дпнных*/  
   .t-form__successbox {
    background: rgba(223, 49, 105, 0.8) !important;
   }
 /*Персона проекта*/   
.t678 .t526__col {
    margin-left: auto;
    margin-right: auto;
}
 /*Ширина текста для персоны на экранах < 960px*/   
@media screen and (max-width: 960px){

.t526__col-mobstyle {
    width: 100% !important;
    margin-bottom: 0px !important;
}    
.t526__itemwrapper{
    max-width: none !important;
    
    
}}

.t526__col-mobstyle {
    width: 100% !important;
    margin-bottom: 0px !important;
}

/*Ширина кнопки на экранах < 640px*/   
@media screen and (max-width: 640px){

.t678 .t-submit {
    width: 350px !important;
}}
 


/*Ширина текста для персоны на экранах > 960px*/   
.t526__col {
    max-width: none !important;
}

</style>

3
<style>

/*Прогресс бар*/

 .progress span{
    color: #ffffff;
    font-family: roboto;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
 }  
   
   
   
   
   
    .progress {
margin: 5px 0 3px;
border: 1px solid #ffffff;
background: rgba(161, 158, 255, 0.75);
overflow: hidden;
-webkit-border-radius: 50px;
   -moz-border-radius: 50px;
        border-radius: 50px;

-webkit-box-shadow: 1px 1px 1px #000000;
   -moz-box-shadow: 1px 1px 1px #000000;
        box-shadow: 1px 1px 1px #000000;
}
.progress > span {
display: block;
height: 20px;
width: 11%;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
}

.gradient > span {
-webkit-box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
   -moz-box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
        box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;

filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#33ffffff',
endColorstr='#33000000',
GradientType=0 );
}
    
    
.gloss > span {
background-image: -moz-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.2)),
color-stop(45%,rgba(255,255,255,0.1)),
color-stop(55%,rgba(0,0,0,0.2)),
color-stop(100%,rgba(0,0,0,0.1)));
background-image: -webkit-linear-gradient(top,
rgba(255,255,255,0.5) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -o-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -ms-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: linear-gradient(to bottom,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
}    
    
 .stripe > span {
background-size: 30px 30px;
background-image: -moz-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(0%,rgba(255,255,255,0.2)),
color-stop(25%,rgba(255,255,255,0.2)),
color-stop(25%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(75%,rgba(255,255,255,0.2)),
color-stop(75%,rgba(255,255,255,0)),
color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(-45deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.3) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0.3) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: linear-gradient(135deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
}   
    
</style>
Made on
Tilda