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