<div class="modal fade" id="order-theme" tabindex="-1" role="dialog" aria-labelledby="order-theme" aria-hidden="true">
  <div class="form-modal stepform modal-dialog modal-dialog-centered" role="document">
    <div class="stepform-modal-content modal-content">
	<button type="button" class="close form-modal__close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
	<form action="#" id="stepForm">
		<div class="stepform-content tab-content">
			<ul class="stepform-nav">
				<li><a href="#step-1" data-toggle="tab">Step 1</a></li>
				<li><a href="#step-2" data-toggle="tab">Step 2</a></li>
				<li><a href="#step-3" data-toggle="tab">Step 3</a></li>
				<li><a href="#step-4" data-toggle="tab">Step 4</a></li>
				<li><a href="#complete" data-toggle="tab">Step 5</a></li>
			</ul>
			<div id="step-1" class="stepform-step tab-pane fade in show active">
				<div class="stepform-header">
						<div class="stepform-header__wrap">
							<div class="form-modal__title stepform__title"><span class="stepform__steptitle">Шаг 1</span>Экраны</div>
							<div class="stepform-price">Цена одного экрана: <span class="stepform-pricecount">1 000 руб</span></div>
						</div>
				</div>
				<div class="stepform-body">
						<div class="stepform-body__title">Выберите количество экранов</div>
						<div class="stepform-body__text">Экран - это видимая часть страницы, которая умещается на монитор. Например, на одной странице может быть от 3 до 20 экранов, соответственно, чем больше экранов, тем длиннее будет страница и больше информации на нее поместится</div>
						<div class="stepform-body__main">
							<select id="screens"  name="window">
								<option value="2000">2</option>
								<option value="3000">3</option>
								<option value="5000">5</option>
							</select>
						</div>
				</div>
				<div class="stepform-footer">
						<div class="stepform-total">Общая стоимость заказа на данный момент <div class="stepform-total__count"><span data-total=""></span> руб</div></div>
						<button class="btn btn_size4 stepform__btn" type="button" data-href="#step-2">Далее</button>
				</div>
			</div>
			<div id="step-2" class="stepform-step tab-pane fade in">
				<div class="stepform-header">
						<div class="stepform-header__wrap">
							<div class="form-modal__title stepform__title"><span class="stepform__steptitle">Шаг 2</span>Эффекты</div>
							<div class="stepform-price">Цена внедрения одного эффекта: <span class="stepform-pricecount">1 000 руб</span></div>
						</div>
				</div>
				<div class="stepform-body stepform-body_step2 stepform-body_check">
						<div class="stepform-body__title">Выберите эффекты, которые вы хотели бы видеть у себя на сайте</div>
						<div class="stepform-body__text">Эффекты делают страницу динамичнее, интереснее, современнее, Можно обойтись и без эффектов, если вы считаете, что они вам ненужны</div>
						<div class="stepform-body__main stepform-body__main_wrap">
							<div class="stepform-check">
								<input type="checkbox" value="1000">
								<div class="stepform-check__label">
									<span>Параллакс</span>
									<a href="#">Пример</a>
								</div>
							</div>
							<div class="stepform-check">
								<input type="checkbox" value="1000">
								<div class="stepform-check__label">
									<span>Фоновое видео на главном экране</span>
									<a href="#">Пример</a>
								</div>
							</div>
						</div>
				</div>
				<div class="stepform-footer">
						<div class="stepform-total">Общая стоимость заказа на данный момент <div class="stepform-total__count"><span data-total=""></span> руб</div></div>
						<button class="btn btn_size4 stepform__btn" type="button" data-href="#step-3">Далее</button>
				</div>
			</div>
			<div id="step-3" class="stepform-step tab-pane fade in">
				<div class="stepform-header">
						<div class="stepform-header__wrap">
							<div class="form-modal__title stepform__title"><span class="stepform__steptitle">Шаг 3</span>Формы оплаты и подписки</div>
						</div>
				</div>
				<div class="stepform-body stepform-body_step3">
						<div class="stepform-body__main">
							<div class="stepform-check">
								<input type="checkbox" value="1000">
								<div class="stepform-check__label">
									<span>Добавить форму оплаты</span>
								</div>
							</div>
							<div class="stepform-check">
								<input type="checkbox" value="1000">
								<div class="stepform-check__label">
									<span>Добавить форму подписки</span>
								</div>
							</div>
						</div>
				</div>
				<div class="stepform-footer">
						<div class="stepform-total">Общая стоимость заказа на данный момент <div class="stepform-total__count"><span data-total=""></span> руб</div></div>
						<button class="btn btn_size4 stepform__btn" type="button" data-href="#step-4">Далее</button>
				</div>
			</div>
			<div id="step-4" class="stepform-step tab-pane fade in">
				<div class="stepform-header">
						<div class="stepform-header__wrap">
							<div class="form-modal__title stepform__title"><span class="stepform__steptitle">Шаг 4</span>Наполнение контентом</div>
							<div class="stepform-price">Цена написания текстов: <span class="stepform-pricecount">1 000 руб / 5 000 символов</span></div>
						</div>
				</div>
				<div class="stepform-body">
						<div class="stepform-body__title">Выберите примерное количество текста на будущей странице</div>
						<div class="stepform-body__main">
							<select id="words" name="words" data-placeholder="Выберите количество символов">
								<option></option>
								<option value="1000">от 5 000 символов до 30 000 символов</option>
								<option value="2000">от 5 000 символов до 30 000 символов</option>
							</select>
						</div>
				</div>
				<div class="stepform-footer">
						<div class="stepform-total">Общая стоимость заказа на данный момент <div class="stepform-total__count stepform-total__count_last"><span data-total=""></span> руб</div></div>
						<button class="btn btn_size4 stepform__btn" type="button" data-href="#complete">Далее</button>
				</div>
			</div>
			<div id="complete" class="stepform-step tab-pane fade in">
				<div class="stepform-header">
						<div class="form-modal__title stepform__title">Оформление заказа</div>
				</div>
				<div class="stepform__warning">
						<p>Помните! Вы узнали примерную цену. Точную цену вам назовет менеджер, <br>после того, как уточнит все детали заказа</p>
					</div>
				<div class="stepform-body stepform-body_finish">
						<div class="stepform-body__title stepform-body__title_center">Примерная стоимость вашего заказа: <div class="stepform-total__count stepform-total__count_last stepform-total__count_totalprice"><span data-total=""></span> руб</div><input id="final-price" type="text" hidden></div>
						<div class="stepform-body-form">
							<div class="stepform-body-form__in">
								<input type="text" class="mail-in" placeholder="Ваша электронная почта:" required>
							</div>
							<div class="stepform-body-form__in">
								<input type="text" class="phone-in" placeholder="Ваш номер телефона:" required>
							</div>
							<textarea name="" cols="30" rows="10" placeholder="Комментарий к заказу:"></textarea>
						</div>
				</div>
				<div class="stepform-footer stepform-footer_finish">
						<button class="btn btn_size4 btn_center stepform__btn" type="submit">Оформить заказ</button>
						<div class="stepform-footer__mes">Спасибо за оформление заказа. Менеджер свяжется с вами в ближайшее время <br>для уточнения деталей заказа</div>
				</div>
			</div>
		</div>
	</form>
    </div>
  </div>
</div>