<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).attr('data-success-callback', 'window.mySuccessFunction');
    });
});
             
  
</script>

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

.t142__submit {
    display: flex;
    width: fit-content;
    align-items: center;
}

/*Положение кнопки слева*/
.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>

<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>