<?php

	defined('_JEXEC') or die;

?>
<div class="mdl-header"><span>Получите точный расчет за 3 минуты</span></div>
<div id="quizz" class="mdl-quizz"> 
	<div id="quizz-box" class="quizz-box"> 
		<form class="form quizz__inner tab-content h-100" action="#">
		<div class="quizz__cont">
			<div class="quizz__left">
				<div class=" quizz__inner">
					<div id="quizz-content-1" class="quizz-tab quizz-1 quizz-pic">
						<div class="d-flex flex-column h-100"> 
							<div class="progress-item">
								<div class="meter blue nostripes">
									<span style="width:20%"></span>
								</div>
								<div class="progressbar">  
									<span style="width: 20%"></span>
								</div>
								<text>1 вопрос из 4</text>
							</div>
							<div class="answer_item">
								<div class="quizz__name">Какой объект тонируем?</div>
								<div class="action d-none d-xl-flex">По окончании теста <span>подарим скидку до <i>20%</i></span></div>
							</div>
							<div class="quizz__answer">
								<div class="row ans__row">
									<div class="ans__outer ans__1 col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal1" type="radio" value="Офис" /> 
											<div class="ans__inner">
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/1/1.svg" alt="Офис" /> 
												</span>  
												<div class="mdl-hdr d-flex align-items-center">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">Офис</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer ans__2 col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal1" type="radio" value="Магазин" /> 
											<div class="ans__inner">  
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/1/2.svg" alt="Магазин" /> 
												</span>
												<div class="mdl-hdr d-flex align-items-center">
													<span class="ans__check_pos">
														<span class="ans__check"></span>	
													</span>	
													<span class="ans__title">Магазин</span>
												</div>
											</div> 
										</label>
									</div> 
									<div class="ans__outer col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal1" type="radio" value="Здание" /> 
											<div class="ans__inner">
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/1/3.svg" alt="Здание" /> 
												</span>
												<div class="mdl-hdr d-flex align-items-center">
												<span class="ans__check_pos">
													<span class="ans__check"></span> 
												</span> 
												<span class="ans__title">Здание</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal1" type="radio" value="Квартира" /> 
											<div class="ans__inner">
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/1/4.svg" alt="Квартира" /> 
												</span>
												<div class="mdl-hdr d-flex align-items-center">
												<span class="ans__check_pos">
													<span class="ans__check"></span> 
												</span> 
												<span class="ans__title">Квартира</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal1" type="radio" value="Частный дом" /> 
											<div class="ans__inner">
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/1/5.svg" alt="Частный дом" /> 
												</span>
												<div class="mdl-hdr d-flex align-items-center">
												<span class="ans__check_pos">
													<span class="ans__check"></span> 
												</span> 
												<span class="ans__title">Частный дом</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal1" type="radio" value="Другое" /> 
											<div class="ans__inner">
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/1/6.svg" alt="Другое" /> 
												</span>
												<div class="mdl-hdr d-flex align-items-center">
												<span class="ans__check_pos">
													<span class="ans__check"></span> 
												</span> 
												<span class="ans__title">Другое</span>
												</div>
											</div> 
										</label>
									</div>
									<!-- # ITEM -->
									<div class="quizz__btn">
										<p>Рассчитаем стоимость тонировки в 5 вариантах<span> и найдем лучшее решение Вашей задачи</span></p>
										<a class="button next" hrf="#quizz-content-2">
											<span>Далее</span>
										</a>
									</div>
								</div>
							</div>
							<div class="action d-flex d-xl-none">По окончании теста <span>подарим скидку до <i>20%</i></span></div> 
						</div>
					</div>
					<!-- # quizz 1 -->
					<!-- quizz 2 -->
					<div id="quizz-content-2" class="quizz-tab quizz-2 quizz-pic">
						<div class="d-flex flex-column h-100">
							<div class="progress-item">
								<div class="meter blue nostripes">
									<span style="width:40%"></span>
								</div>
								<div class="progressbar">  
									<span style="width: 40%"></span>
								</div>
								<text>2 вопрос из 4</text>
							</div>
							<div class="answer_item">
								<div class="quizz__name">Какую поверхность тонируем?</div>
								<div class="action d-none d-xl-flex">По окончании теста <span>подарим скидку до <i>20%</i></span></div>
							</div>
							<div class="quizz__answer">
								<div class="row ans__row">
									<div class="ans__outer ans__1 col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal2" type="radio" value="Перегородки" /> 
											<div class="ans__inner">
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/2/1.svg" alt="Перегородки" /> 
												</span>  
												<div class="mdl-hdr d-flex align-items-center">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">Перегородки</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer ans__2 col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal2" type="radio" value="Витрины" /> 
											<div class="ans__inner">  
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/2/2.svg" alt="Витрины" /> 
												</span>
												<div class="mdl-hdr d-flex align-items-center">
													<span class="ans__check_pos">
														<span class="ans__check"></span>	
													</span>	
													<span class="ans__title">Витрины</span>
												</div>
											</div> 
										</label>
									</div> 
									<div class="ans__outer col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal2" type="radio" value="Фасады" /> 
											<div class="ans__inner">
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/2/3.svg" alt="Фасады" /> 
												</span>
												<div class="mdl-hdr d-flex align-items-center">
												<span class="ans__check_pos">
													<span class="ans__check"></span> 
												</span> 
												<span class="ans__title">Фасады</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal2" type="radio" value="Окна, балконы" /> 
											<div class="ans__inner">
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/2/4.svg" alt="Окна, балконы" /> 
												</span>
												<div class="mdl-hdr d-flex align-items-center">
												<span class="ans__check_pos">
													<span class="ans__check"></span> 
												</span> 
												<span class="ans__title">Окна, балконы</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal2" type="radio" value="Двери" /> 
											<div class="ans__inner">
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/2/5.svg" alt="Двери" /> 
												</span>
												<div class="mdl-hdr d-flex align-items-center">
												<span class="ans__check_pos">
													<span class="ans__check"></span> 
												</span> 
												<span class="ans__title">Двери</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer col-6 col-sm-6 col-md-4">
										<label class="ans__item"> 
											<input name="animal2" type="radio" value="Другое" /> 
											<div class="ans__inner">
												<span class="ans__img"> 
													<img loading="lazy" src="images/quizz/2/6.svg" alt="Другое" /> 
												</span>
												<div class="mdl-hdr d-flex align-items-center">
												<span class="ans__check_pos">
													<span class="ans__check"></span> 
												</span> 
												<span class="ans__title">Другое</span>
												</div>
											</div> 
										</label>
									</div> 
									<!-- # ITEM -->
									<div class="quizz__btn">
										<p>Рассчитаем стоимость тонировки в 5 вариантах<span> и найдем лучшее решение Вашей задачи</span></p>
										<a class="button prev" hrf="#quizz-content-1" >
											<span>Назад</span>
										</a>
										<a class="button next" hrf="#quizz-content-3">
											<span>Далее</span>
										</a>
									</div>
								</div>
							</div>
							<div class="action d-flex d-xl-none">По окончании теста <span>подарим скидку до <i>20%</i></span></div>
						</div>
					</div>
					<!-- # quizz 2 --> <!-- quizz 3 -->
					<div id="quizz-content-3" class="quizz-tab quizz-3">
						<div class="d-flex flex-column h-100">
							<div class="progress-item">
								<div class="meter blue nostripes">
									<span style="width:60%"></span>
								</div>
								<div class="progressbar">  
									<span style="width: 60%"></span>
								</div>
								<text>3 вопрос из 5</text>
							</div>
							<div class="answer_item">
								<div class="quizz__name">Какие задачи должна решить тонировка пленкой?</div>
								<div class="action d-none d-xl-flex">По окончании теста <span>подарим скидку до <i>20%</i></span></div>
							</div>
							<div class="quizz__answer">
								<div class="row ans__row">
									<div class="ans__outer col-6 col-sm-6">
										<label class="ans__item"> 
											<input name="animal3" type="radio" value="Защита от теплопотерь, энергосбережение" /> 
											<div class="ans__inner">
												<div class="mdl-hdr d-flex align-items-center">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">Защита от теплопотерь, энергосбережение</span>
												</div>
											</div> 
										</label>
									</div>		
									<div class="ans__outer col-6 col-sm-6">
										<label class="ans__item"> 
											<input name="animal3" type="radio" value="Обеспечить приватность, cкрыть обзор" /> 
											<div class="ans__inner">  
												<div class="mdl-hdr d-flex align-items-center">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">Обеспечить приватность, cкрыть обзор</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer col-6 col-sm-6">
										<label class="ans__item"> 
											<input name="animal3" type="radio" value="Защита от ударов и взломов" /> 
											<div class="ans__inner"> 
												<div class="mdl-hdr d-flex align-items-center">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">Защита от ударов и взломов</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer col-6 col-sm-6">
										<label class="ans__item"> 
											<input name="animal3" type="radio" value="Спастись от перегрева в помещении" /> 
											<div class="ans__inner"> 
												<div class="mdl-hdr d-flex align-items-center">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">Спастись от перегрева в помещении</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer col-6 col-sm-6">
										<label class="ans__item"> 
											<input name="animal3" type="radio" value="Спастись от перегрева в помещении" /> 
											<div class="ans__inner"> 
												<div class="mdl-hdr d-flex align-items-center">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">Спастись от перегрева в помещении</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer col-6 col-sm-6">
										<label class="ans__item"> 
											<input name="animal3" type="radio" value="Защитить предметы интерьера и вещи от выгорания" /> 
											<div class="ans__inner"> 
												<div class="mdl-hdr d-flex align-items-center">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">Защитить предметы интерьера и вещи от выгорания</span>
												</div>
											</div> 
										</label>
									</div>
									<div class="ans__outer col-12">
										<label class="ans__item"> 
											<input name="animal3" type="radio" value="Другое" /> 
											<div class="ans__inner"> 
												<div class="mdl-hdr d-flex align-items-center">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">Другое</span>
												</div>
											</div> 
										</label>
									</div>
									<!-- # ITEM -->
									<div class="quizz__btn">
										<p>Рассчитаем стоимость тонировки в 5 вариантах<span> и найдем лучшее решение Вашей задачи</span></p>
										<a class="button prev" hrf="#quizz-content-2" >
											<span>Назад</span>
										</a>
										<a class="button next" hrf="#quizz-content-4" >
											<span>Далее</span>
										</a>
									</div>
								</div>
							</div>
							<div class="action d-flex d-xl-none">По окончании теста <span>подарим скидку до <i>20%</i></span></div>
						</div>
					</div>
					<!-- # quizz 3 --> <!-- quizz 4 -->
					<div id="quizz-content-4" class="quizz-tab quizz-4 quizz-radio">
						<div class="d-flex flex-column h-100">
							<div class="progress-item">
								<div class="meter blue nostripes">
									<span style="width:80%"></span>
								</div>
								<div class="progressbar">  
									<span style="width: 80%"></span>
								</div>
								<text>4 вопрос из 4</text>
							</div>
							<div class="answer_item">
								<div class="quizz__name">Укажите площадь тонировки</div>
								<div class="action d-none d-xl-flex">По окончании теста <span>подарим скидку до <i>20%</i></span></div>
							</div>
							<div class="quizz__answer">
								<div class="row ans__row">
									<div class="ans__outer col-12">
										<div class="list-label">
											<label class="ans__item"> 
												<input name="animal4" type="radio" value="до 10 м" />
												<div class="ans__inner">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">до 10 м<sup>2</sup></span> 
												</div> 
											</label>
											<label class="ans__item"> 
												<input name="animal4" type="radio" value="до 20 м" />
												<div class="ans__inner">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">до 20 м<sup>2</sup></span> 
												</div> 
											</label>
											<label class="ans__item"> 
												<input name="animal4" type="radio" value="до 50 м" />
												<div class="ans__inner">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">до 50 м<sup>2</sup></span> 
												</div> 
											</label>
											<label class="ans__item"> 
												<input name="animal4" type="radio" value="до 100 м" />
												<div class="ans__inner">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">до 100 м<sup>2</sup></span> 
												</div> 
											</label>
											<label class="ans__item"> 
												<input name="animal4" type="radio" value="до 300 м" />
												<div class="ans__inner">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">до 300 м<sup>2</sup></span> 
												</div> 
											</label>
											<label class="ans__item"> 
												<input name="animal4" type="radio" value="более 300 м" />
												<div class="ans__inner">
													<span class="ans__check_pos"> 
														<span class="ans__check"></span>
													</span>
													<span class="ans__title">более 300 м<sup>2</sup></span>
												</div> 
											</label>
										</div>
										<div class="textarea">
											<div class="variant">Свой вариант</div>
											<textarea placeholder="Введите текст здесь"></textarea>
										</div>
									</div>
									<!-- # ITEM -->
									<div class="quizz__btn">
										<p>Рассчитаем стоимость тонировки в 5 вариантах<span> и найдем лучшее решение Вашей задачи</span></p>
										<a class="button prev" hrf="#quizz-content-3" >
											<span>Назад</span>
										</a>
										<a class="button next" hrf="#quizz-content-final" >
											<span>Далее</span>
										</a>
									</div>
								</div>
							</div>
							<div class="action d-flex d-xl-none">По окончании теста <span>подарим скидку до <i>20%</i></span></div>
						</div>
					</div>
					<!-- # quizz 4 --> <!-- FINAL -->
					<div id="quizz-content-final" class="quizz-tab quizz-final">
						<div class="d-flex flex-column h-100">
							<div class="progress-item">
								<div class="meter blue nostripes">
									<span style="width:100%"></span>
								</div>
								<div class="progressbar">  
									<span style="width: 100%"></span>
								</div>
								<text>Опрос пройден</text>
							</div>
							<div class="final__cont">
								<div class="final__title">Оставьте номер телефона, чтобы получить расчет сметы на ремонт.</div>
								<div class="final__inp">
									<div class="final__label">Выберите удобный способ связи:</div>
									<div class="final__vals">
										<label class="final__item">
											<input type="checkbox" name="connect[]" value="Телефон">
											<span class="final__in">
												<i class="fas fa-phone"></i>
											</span>
										</label>
										<label class="final__item">
											<input type="checkbox" name="connect[]" value="Whatsapp">
											<span class="final__in">
												<i class="fab fa-whatsapp"></i>
											</span>
										</label>
										<label class="final__item">
											<input type="checkbox" name="connect[]" value="Viber">
											<span class="final__in">
												<i class="fab fa-viber"></i>
											</span>
										</label>
										<label class="final__item">
											<input type="checkbox" name="connect[]" value="Telegram">
											<span class="final__in">
												<i class="fab fa-telegram-plane"></i>
											</span>
										</label>
									</div>
								</div>
								<div class="final__bottom">
									<div class="form__inp">
										<input class="form__input" name="phone" type="tel" placeholder="+7 (___) ___ - -__ - __" />
									</div>
									<div class="form__subm quizz__btn">
										<button class="button button_big form__submit" type="submit"> 
											<span>Отправить заявку </span> 
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="quizz-err col-12" style="display:none;">
						Выберите вариант ответа
					</div>
					<div id="quizz-content-thanks" class="quizz-tab quizz-thanks">
						<div class="d-flex flex-column h-100">
							<div class="progress-item">
								<div class="meter blue nostripes">
									<span style="width:100%"></span>
								</div>
								<div class="progressbar">  
									<span style="width: 100%"></span>
								</div>
								<text>Спасибо!</text>
							</div>
							<div class="final__title">Заявка отправлена!</div>
						</div>
					</div>
					<!-- # FINAL --> 
					<input name="form" type="hidden" value="Квиз" />
				</div>
			</div>
		</div>
		<section class="preloader hidden">
			<div class='sk-folding-cube'>
				<div class='sk-cube sk-cube-1'></div>
				<div class='sk-cube sk-cube-2'></div>
				<div class='sk-cube sk-cube-4'></div>
				<div class='sk-cube sk-cube-3'></div>
			</div>
		</section>	
		<div class="preloader-bg hidden"></div>
		</form>
	</div>
</div>