Arfey/font.js

## font.js
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=cyrillic" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic" rel="stylesheet">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/elusive-icons.min.css">
	<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>

</head>
<body>
	<header>
		<div class="wrap-access-type">
			<input type="text" id="input-access-type" name="input" >
			<div class="access-type ">
				<span class="chek-type">Особистий</span>
				<span>Малий та середній бізнес</span>
				<span>Корпоративний</span>
			</div>
		</div>
		<div class="setting">
			<div class="change-lang">
				<span class="ua">українська</span>
				<span class="en">english</span>
				<span class="ru">русская</span>
			</div>

			<div class="size-allfont">
				<div class="font-minus">
					<i class="fa fa-font" aria-hidden="true"></i>
					<i class="fa fa-minus" aria-hidden="true"></i>
				</div>
				<div class="font-plus">
					<i class="fa fa-font" aria-hidden="true"></i>
					<i class="fa fa-plus" aria-hidden="true"></i>
				</div>
			</div>
		</div>
	</header>
	<aside>
		<ul class="services">
			<li class="search-service">
				<label for="s1"><i class="fa fa-search" aria-hidden="true"></i></label>
				<input id="s1" type="search" placeholder="Пошук послуг банку">
			</li>
			<li class="title">Ощадбанк 24/7</li>
			<li class="login"><a href="#">Увійти до Веб-банкінгу</a></li>
			<br>
			<li class="about-bank"><a href="#">Про Ощад 24/7</a></li>
			<li class="about-bank"><a href="#">Мобільні додатки</a></li>
		</ul>
		<ul class="submenu">
			<li class="other-services">інші послуги</li>
			<li><a href="#">Комунальні послуги</a></li>
			<li><a href="#">Платежі по рахунках</a></li>
			<li><a href="#">Сплата штрафів</a></li>
			<li><a href="#">Переказ коштів</a></li>
			<li><a href="#">Придбати квитки</a></li>
			<li><a href="#">Поповнити мобільний</a></li>
			<li><a href="#">Відділення та банкомати</a></li>
		</ul>
		<ul class="contacts">
			<li class="title-contacts">контакт-центр</li>
			<li class="telephone">0 800 210 800</li>
			<li class="online-help"><a href="#">Онлайн-помічник</a></li>
		</ul>
	</aside>
	<main>
		<div class="navigation">
			<div class="menu">
				<ul>
					<div class="inner-wrapper">
						<li>
							<a href="#">Депозити</a>
							 <ul class="menu__popup">
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
							</ul>
						</li>
						<li>
							<a href="#">Кредити</a>
							<ul class="menu__popup">
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
							</ul>
						</li>
						<li>
							<a href="#">Картки</a>
							<ul class="menu__popup">
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
							</ul>
						</li>
						 <li>
						 	<a href="#">Платежі</a>
						 	<ul class="menu__popup">
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
							</ul>
						 </li>
						 <li>
						 	<a href="#">Перекази</a>
						 	<ul class="menu__popup">
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
								<li>
									<ul>
										<li>Державні програми</li>
										<li>Енергокредит</li>
										<li>Кредити від Ощадбанку</li>
										<li>На авто</li>
										<li>На житло <span>(на вторинному ринку)</span></li>
										<li>Кредитні картки</li>
										<li>Споживчі кредити під іпотеку</li>
										<li>Під заставу грошей на депозиті</li>
										<li>Кредитування під поруку</li>
										<li>Програма перекридитування</li>
									</ul>
								</li>
							</ul>
						 </li>
						 <li>
						 	<a href="#">Інші розділи</a>
						 	<ul class="menu__popup search">
						 		<input type="text" id="search">
						 		<div class="grid">
									<li class="grid-item">
										<ul>
											<li>Державні програми</li>
											<li>Енергокредит</li>
										</ul>
									</li>
									<li class="grid-item">
										<ul>
											<li>Кредитні картки</li>
											<li>Споживчі кредити під іпотеку</li>
										</ul>
									</li>
									<li class="grid-item">
										<ul>
											<li>Державні програми</li>
											<li>Енергокредит</li>
											<li>Кредити від Ощадбанку</li>
											<li>На авто</li>
											<li>На житло <span>(на вторинному ринку)</span></li>
										</ul>
									</li>
									<li class="grid-item">
										<ul>
											<li>Державні програми</li>
											<li>Енергокредит</li>
										</ul>
									</li>
									<li class="grid-item">
										<ul>
											<li>Кредитні картки</li>
											<li>Споживчі кредити під іпотеку</li>
										</ul>
									</li>
								</div>
							</ul>
						 </li>
					 </div>
				</ul>
			</div>
		</div>
		<section class="slider">
			<img src="img/site-logo.png" alt="" class="site-logo">
			<div class="additional-info">
				<p>Усі депозити населення, розміщені в Ощадбанку захищені державою, незалежно від суми</p>
			</div>
			<div class="main-slider">
				<div class="proposal-1">
					<h2>депозит довіра</h2>
				 	<br>
					<p><span>₴<i class="fa fa-usd" aria-hidden="true"></i></span> <br><br>Можливість дострокового зняття<br><span class="other-color">Поповнення лише один раз<br>Виплата відсотків наприкінці терміну</span><br><br><span class="other-size">Мінімальна сума депозиту</span> <br><span>10000 UAH</span></p>
				</div>
				<div class="proposal-2">
					<h2>моя картка</h2>
					<img src="img/kartka.png" alt="" class="kartka">
				</div>
				<div class="proposal-3">
					<h2>акція<br> вигравай електромобіль</h2>
				</div>
			</div>
		</section>
		<section class="table" >
			<div class="wrap-caption">
				<h2>відсоткові ставки</h2>
				<select name="" id="selectedCurrency" size="1">
					<option value="" currency="UAH" class="selected activeCurrency" checked>у гривні</option>
					<option value="" currency="USD" class="activeCurrency">у доларах</option>
				</select>
				<span>на 10.11.2015</span>
			</div>
			<table data-currency="UAH">
				<tr >
					<th></th>
					<th>від 100 ₴</th>
					<th>від 1000 ₴</th>
					<th>від 3000 ₴</th>
					<th>від 5000 ₴</th>
					<th>від 10000 ₴</th>
				</tr>
				<tr>
					<td>1 тиждень</td>
					<td>18%</td>
					<td>18.5%</td>
					<td>19.2%</td>
					<td>19.5%</td>
					<td>20.5%</td>
				</tr>
				<tr>
					<td>2 тижні</td>
					<td>18%</td>
					<td>18.5%</td>
					<td>19.5%</td>
					<td>19.3%</td>
					<td>20.5%</td>
				</tr>
				<tr>
					<td>1 місяць</td>
					<td>18%</td>
					<td>18.5%</td>
					<td>19%</td>
					<td>19.5%</td>
					<td>20.5%</td>
				</tr>
				<tr>
					<td>2 місяці</td>
					<td>18%</td>
					<td>18.5%</td>
					<td>20%</td>
					<td>19.5%</td>
					<td>20.5%</td>
				</tr>
				<tr>
					<td>6 місяців</td>
					<td>18%</td>
					<td>18.5%</td>
					<td>20.2%</td>
					<td>19.5%</td>
					<td>20.5%</td>
				</tr>
			</table>
			<!-- <table data-currency="USD">
				<tr >
					<th></th>
					<th>від 100 ₴</th>
					<th>від 1000 ₴</th>
					<th>від 3000 ₴</th>
					<th>від 5000 ₴</th>
					<th>від 10000 ₴</th>
				</tr>
				<tr>
					<td>1 тиждень</td>
					<td>18%</td>
					<td>18.5%</td>
					<td>19.2%</td>
					<td>19.5%</td>
					<td>20.5%</td>
				</tr>
				<tr>
					<td>2 тижні</td>
					<td>18%</td>
					<td>18.5%</td>
					<td>19.5%</td>
					<td>19.3%</td>
					<td>20.5%</td>
				</tr>
				<tr>
					<td>1 місяць</td>
					<td>18%</td>
					<td>18.5%</td>
					<td>19%</td>
					<td>19.5%</td>
					<td>20.5%</td>
				</tr>
				<tr>
					<td>2 місяці</td>
					<td>18%</td>
					<td>18.5%</td>
					<td>20%</td>
					<td>19.5%</td>
					<td>20.5%</td>
				</tr>
				<tr>
					<td>6 місяців</td>
					<td>18%</td>
					<td>18.5%</td>
					<td>20.2%</td>
					<td>19.5%</td>
					<td>20.5%</td>
				</tr>
			</table> -->
			<button type="submit">порівняти з іншими депозитами</button>
		</section>
		<section class="loyalty-program">
			<h2>програма лояльності</h2>
			<p>У відділеннях банку, де відкрито Ваш рахунок Ви можете оформити довіреність на право розпорядження коштами або заповідальне розпорядження. Вартість послуги складає до 15 гривень, а для пенсіонерів - <span>безкоштовно</span>.</p>
			<ul>
				<li><i class="el el-ok"></i>Готівкою через касу</li>
				<li><i class="el el-ok"></i>За допомогою платіжної картки</li>
				<li><i class="el el-ok"></i>Без відвідування відділення Банку, отримувати проценти та розпоряджатися коштами</li>
			</ul>
		</section>
		<section class="info">
			<div class="info-deposit">
				<h2>як відкрити депозит?</h2>
				<p>
					Щоб оформити депозит треба звернутися до найближчого відділення Ощадбанку, маючи при собі наступні документи:
					<br><br>
					<b><i class="fa fa-minus" aria-hidden="true"></i>паспорт</b><br>
					<b> <i class="fa fa-minus" aria-hidden="true"></i>довідку про присвоєння індефікаційного номеру</b>
					<br><br>
					За додатковою інформацією можна <u>звертатися до служби підтримки</u> банку онлайн, заповнити онлайн-заявку нижче, або звертатися за телефоном:<br><br>
					 <span><i class="fa fa-phone" aria-hidden="true"></i>+380 44 363-01-33</span>
				</p>
			</div>
			<div class="map" id="map"></div>
		</section>
		<section class="useful-info">
			<h2>інформація, що стане в нагоді</h2>
			<h3>Як відбувається зарахування коштів?</h3>
			<ul>
				<li><i class="el el-ok"></i>Готівкою через касу, в день відкриття депозиту</li>
				<li><i class="el el-ok"></i>Безготівкове зарахування</li>
			</ul>
			<h3>Як оформлюється довіреність?</h3>
			<p>У відділені банку, де відкрито Ваш рахунок Ви можете оформити довіреність на право розпорядження коштами або заповідальне розпорядження. Вартість послуги складає до 15 гривень, а для пенсіонерів - <span>безкоштовно</span>.</p>
			<h3>Як здійснюється отримання процентів та повернення вкладу?</h3>
			<ul>
				<li><i class="el el-ok"></i>Готівкою через касу</li>
				<li><i class="el el-ok"></i>За допомогою платіжної картки</li>
				<li><i class="el el-ok"></i>Без відвідування відділення Банку, отримувати проценти та розпоряджатися коштами</li>
			</ul>
		</section>
		<section class="application">
			<div>
				<h2>заповнити онлайн заявку</h2>
				<button type="submit" class="checked">консультація</button>
				<button type="submit">попереднє оформлення</button>
				<p>Після заповнення заявки, з вами зв'яжеться працівник нашого банку та допоможе з подальшим оформленням депозиту.</p>
				<form action="" id="form">
					<select name="" id="" size="1">
						<option value="Оберіть Ваше місто">Оберіть Ваше місто</option>
						<option value="Київ">Київ</option>
						<option value="Одеса">Одеса</option>
						<option value="Харків">Харків</option>
					</select>
					<input type="text" name="UserSurname" placeholder="ПІБ">
					<input type="text" name="userEmail" placeholder="E-mail">
					<input type="tel" name="userPhone" class="userPhone" placeholder="Контактний номер телефону">
					<input type="submit" value="Відправити заявку">
				</form>
			</div>
		</section>
		<section class="master-card">
			<h2>гроші повертаються</h2>
			<p>Акція для держателів безконтактних карток Master Card</p>
			<img src="img/master-card.png" alt="" class="logo-master-card">
			<img src="img/master-card-2.png" alt="" class="picture-1">
		</section>
		<section class="credit-program">
			<h2>кредитна програма <br>"ощадний дім"</h2>
			<p>Бережіть тепло та гроші <br><br> Державна кредитна програма на утеплення житла та модернізацію <br>опалювального обладнання.</p>
			<img src="img/credit-program.png" alt="">
		</section>
	</main>
	<footer>
		<div class="wrapper-footer">
			<ul class="helpful-link">
				<li class="title-helpful-link">корисні посилання</li><br>
				<li class="different-services">Відділеня та банкомати</li>
				<li class="different-services">Оплата комунальних послуг</li>
				<li class="different-services">Поповнення мобільного</li>
				<li class="different-services">Контакти</li>
				<li class="different-services">Мобільні додатки</li><br><br><br>
			</ul>
			<ul class="info-contact ">
				<li>контакт-центр ощадбанку</li><br>
				<li class="ph">0 800 210 800</li>
				<li>безкоштовно зі стаціонарних та мобільних телефонів з території України</li><br>
				<li class="ph">+380 44 363-01-33</li>
			</ul>
			<ul class="footer-link">
				<li>ощадбанк у соціальних мережах</li><br><br>
				<li><img src="img/icon-facebook.svg" alt=""></li>
				<li><img src="img/icon-instagram.svg" alt=""></li>
				<li><img src="img/icon-twitter.svg" alt=""></li>
				<li><img src="img/icon-youtube.svg" alt=""></li>
			</ul>
			<ul class="label">
				<li class="mark">ОЩАДБАНК, від 1991</li><br>
				<li class="license">Ліцензія Національного банку України №48 від 05.10.2011</li><br><br><br>
			</ul>
		</div>
	</footer>
	<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
	<script type="text/javascript" src="https://unpkg.com/isotope-layout@3.0.1/dist/isotope.pkgd.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script type="text/javascript" src="https://rawgit.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js"></script>
	<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
	<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
	<script src="js/script.js"></script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDi1D5LcfExS5pVnTYDqArLKog8VOLV5P0&callback=initMap"></script>
</body>
</html>

//slider
$('.main-slider').slick({
  dots: false,
  nextArrow: false,
  prevArrow: false,
});

// for google map
function initMap() {
  var uluru = {lat: 50.503603, lng: 30.435749};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: uluru,
    zoomControl: false,
    scaleControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
};

// validation form
$('.userPhone').mask('+38(999) 999-9999');
$('#form').submit(function (){
  $(this).validate({
    validClass: 'success',
    errorClass: 'error',
    errorElement: "em",
    rules: {
        UserSurname: {
        required: true,
        minlength: 3
      },
      userEmail: {
        email: true,
        required: true
      },
      userPhone: {
        required: true,
        minlength: 10,
      },
    },
    messages: {
      UserSurname: {
        required: "Не введено ім'я",
        minlength: "Мінімальна кількість символів 3"
      },
      userEmail: {
        email: "Не вірно введено пошту",
        required: "Не введено пошту",
      },
      userPhone: {
        required: "Не введено номер телефону",
        minlength: "Мінімальна кількість символів 10"
      },
    },
  });
  return false;
});

var mq = window.matchMedia("(max-width: 1000px)");

function changeAccess(mq) {
  if (mq.matches) {
    $('#input-access-type').val("Особистий");

    $('.access-type').hide();

$('#input-access-type').focus(function(){
    $('.access-type').show();
});

$('#content span').click(function(){
    $('#input-access-type').val($(this).html())
    $('.access-type').hide();
});

$(window).click(function(){
    if ($("#input-access-type").is(":focus")) {
    }
    else {
        $('.access-type').hide();
    }
});
  }
};

//change size of font
var fontSize = $.cookie('fontSize');

if (fontSize != undefined) {
  $('html').css('fontSize', fontSize + 'px');
};

var minSize = 14,
    maxSize = 20,
    fontStep = 2,
    $html = $('html');

$('.font-minus').click(function() {
  var fontSize = $.cookie('fontSize');

  if (fontSize != undefined) {
    if (fontSize != minSize) {
      fontSize = parseFloat(fontSize) - fontStep;
    };
    $.cookie('fontSize', fontSize, { path: '/' });
    $html.css('fontSize', fontSize + 'px');
  }
});

$('.font-plus').click(function() {
  var fontSize = $.cookie('fontSize');

  if (fontSize != undefined) {
    if (fontSize != maxSize) {
      fontSize = parseFloat(fontSize) + fontStep;
    };

  } else {
    fontSize = minSize + fontStep;
  }
  $.cookie('fontSize', fontSize, { path: '/' });
  $html.css('fontSize', fontSize + 'px');
});

// search

$('.search #search').keyup(function () {
  $('.search li').each(function (index) {
    var nameTag = $(this).text().toLowerCase(),
        searchStr = $('.search #search').val().toLowerCase();

    if (nameTag.indexOf(searchStr) == -1) {
      $(this).hide();
    } else {
      $(this).show();
    }
  });
  changeGrid();
});

// grid
function changeGrid() {
  $('.grid').isotope({
    itemSelector: '.grid-item',
    percentPosition: true,
  });
  var $selector = $('.search div');

  $selector.animate({height: $selector.parent().height() - 42 +'px'}, 250, "linear")
}
changeGrid()


main
	font-family: 'Roboto', sans-serif
	box-sizing: border-box
	.navigation
		width: 100%
		// height: 72px
		position: relative
		z-index: 1
		.menu
			perspective: 1000px
			width: 1000px
			// float: right
			right: -240px
			ul
				list-style: none
				display: block
				text-align: right
				width: 100%
				box-sizing: border-box
				.inner-wrapper
					display: inline-block
					position: relative
				li
					display: inline-block
					width: 100px
					height: 36px
					line-height: 36px
					transition: background .3s
					cursor: pointer
					text-align: center
					text-transform: uppercase
					font-weight: bold
					font-size: .88rem
					letter-spacing: 1px
					vertical-align: middle

					.menu__popup
						transform-origin: center top
						transform: rotateX(-87deg)
						overflow: hidden
						display: inline-block
						position: absolute
						left: 0
						top: 36px
						background: #dcdf3c
						visibility: hidden
						transition: visibility 0s linear 0.3s, transform 0.3s
						z-index: 2

					&:hover
						background: #dcdf3c
						.menu__popup
							visibility: visible;
							transform: rotateX(0)
							transition: visibility 0s linear 0s,  transform 0.3s
							z-index: 3

					a
						text-decoration: none
						color: #000
				// li
				// 	display: inline-block
				// 	width: 100px
				// 	height: 50px
				// 	&:hover
				// 		ul
				// 			div
				// 				// display: block
				// 	ul
				// 		div
				// 			display: none
	.slider
		position: relative
		width: calc(100% - 260px)
		.site-logo
			position: absolute
			top: -52px
			left: 40px
			width: 209px
			height: 104px
			z-index: 2
		.additional-info
			width: 354px
			height: 112px
			position: absolute
			bottom: -20px
			right: 20px
			background: #dcdf3c
			font-size: 1.142rem
			font-weight: 500
			z-index: 2
			p
				margin: 0
				padding-left: 25px
				padding-top: 20px
				line-height: 25px
		.main-slider
			.proposal-1
				background: #7196da
				width: calc(100% - 260px)
				position: relative
				box-sizing: border-box
				height: 550px
				h2
					font-size: 5.285rem
					color:#fff
					padding-top: 80px
					font-weight: 600
					margin: 0
					padding-left: 60px
				p
					font-size: 1rem
					color:#fff
					padding-top: 40px
					font-weight: 600
					padding-bottom: 100px
					padding-left: 60px
					margin: 0
					line-height: 26px
					span
						&:first-child
							font-size: 1.571rem
							i
								padding-left: 30px
						&:last-child
							font-size: 1.571rem
					.other-color
						color:#465f8c
					.other-size
						color: #b8c8eb
						font-size: 0.785rem
			.proposal-2
				background: #fa323c
				width: calc(100% - 260px)
				position: relative
				box-sizing: border-box
				height: 550px
				h2
					font-size: 5.285rem
					color:#fff
					padding-top: 80px
					font-weight: 600
					margin: 0
					padding-left: 60px
				.kartka
					width: 500px
					position: absolute
					right: 60px
					bottom: 0
			.proposal-3
				background: #00a27d
				width: calc(100% - 260px)
				position: relative
				box-sizing: border-box
				height: 550px
				h2
					font-size: 5.285rem
					color:#fff
					padding-top: 80px
					font-weight: 600
					margin: 0
					padding-left: 60px
	.table
		height: 450px
		width: calc(100% - 300px)
		.wrap-caption
			text-align: left
			padding-left: 60px
			padding-top: 50px
			h2
				margin: 0
				font-weight: 600
				font-size: 2rem
				display: inline-block
				padding-right: 22px
			select
				display: inline-block
				width: 136px
				height: 36px
				border: 2px solid #7196da
				background: transparent
				option
					i
						color: black
			span
				display: block
				font-size: 0.714rem
		table
			padding-left: 60px
			width: 90%
			tr
				padding-bottom: 20px
				height: 40px
				th
					color: #bdbdbd
					font-size: 0.714rem
					padding-bottom: 20px

				td
					text-align: center
					&:first-child
						text-align: left
		button
			width: 320px
			height: 48px
			margin-top: 40px
			margin-left: 60px
			border: 2px solid #7196da
			background: transparent
			outline: none
			transition: background, 1s, easy
			&:hover
				background: #7196da
			&:active
				background: #557dc8
	.loyalty-program
		padding-left: 60px
		padding-top: 88px
		padding-bottom: 100px
		width: calc(100% - 260px)
		box-sizing: border-box
		h2
			margin: 0
			font-weight: 600
			font-size: 2rem
		p
			padding-top: 33px
			font-size: 1rem
			max-width: 434px
			margin: 0
			line-height: 23px
			span
				text-transform: uppercase
		ul
			list-style: none
			font-size: 1rem
			margin: 0
			padding-left: 0px
			padding-top: 25px
			line-height: 23px
			i
				padding-right: 10px
	.info
		width: calc(100% - 260px)
		height: 489px
		overflow: hidden
		.info-deposit
			width: 62%
			padding-left: 60px
			background: #7196da
			float: left
			display: inline-block
			height: 100%
			h2
				font-weight: 600
				font-size: 2rem
				color: white
				margin: 0
				padding-top: 60px
				padding-bottom: 50px
			p
				font-size: 1rem
				max-width: 510px
				margin: 0
				line-height: 23px
				color: white
				padding-bottom: 114px
				i
					padding-right: 10px
				span
					font-size: 1.5rem
					font-weight: 600

		.map
			width: 32%
			background: #eee
			float: left
			display: inline-block
			height: 100%
			clear:right
	.useful-info
		padding-left: 60px
		padding-top: 88px
		width: calc(100% - 260px)
		height: 600px
		box-sizing: border-box
		h2
			padding-left: 0
			margin: 0
			font-weight: 600
			font-size: 2rem
			padding-bottom: 30px
		h3
			margin: 0
			font-weight: 600
			font-size: 1.2rem
			padding-bottom: 15px
		p
			// padding-top: 33px
			font-size: 1rem
			max-width: 434px
			margin: 0
			line-height: 23px
			padding-bottom: 30px

			span
				text-transform: uppercase
		ul
			list-style: none
			font-size: 1rem
			margin: 0
			padding-left: 0px
			line-height: 23px
			padding-bottom: 30px
			i
				padding-right: 10px
	.application
		width: calc(100% - 260px)
		height: 680px
		background: #f8f8e7
		border: 1px solid #ebeb88
		box-sizing: border-box
		div
			width: 550px
			margin: auto
			margin-top: 60px
			font-size: 0
			h2
				padding-left: 0
				margin: 0
				font-weight: 600
				font-size: 2rem
				padding-bottom: 30px
			button
				height: 44px
				font-size: 1rem
				margin: 0
				text-align: center
				border: 2px solid #dcdf3c
				background: white
				margin-bottom: 43px
				font-weight: 500
				outline: none
				&:nth-child(3)
					width: 200px
			.checked
				background: #dcdf3c
				width: 122px
			p
				padding-bottom: 40px
				font-size: 1rem
				max-width: 540px
				margin: 0
				line-height: 23px
			select, input
				width: 540px
				height: 48px
				text-indent: 10px
				display: block
				padding: 0
				margin-bottom: 20px
				background: transparent
				border: 2px solid #c6c6b9
				font-size: 1rem
				font-weight: 600
				outline: none
			select
				width: 544px
			input::-webkit-input-placeholder
				color: black
				opacity: 1
				transition: opacity 0.3s ease
			input[type="submit"]
				border: 2px solid #dcdf3c
				background: white
				box-sizing: border-box
				width: 544px
				transition: background, 1s, easy
				outline: none
				&:hover
					background: #dcdf3c
				&:active
					background: #a8aa2a
	.master-card
		width: calc(100% - 260px)
		height: 300px
		background: #5bdcaa
		padding-left: 60px
		padding-top: 50px
		margin-top: 20px
		box-sizing: border-box
		color: white
		position: relative
		h2
			padding-left: 0
			margin: 0
			font-weight: 600
			font-size: 2.7rem
			padding-bottom: 30px
		p
			padding-bottom: 70px
			margin: 0
		.logo-master-card
			width: 153px
			position: absolute
			bottom: 15px
		.picture-1
			width: 250px
			right: 90px
			position: absolute
			bottom: 0px
	.credit-program
		width: calc(100% - 260px)
		height: 300px
		background: #ebb641
		padding-left: 60px
		padding-top: 40px
		margin-top: 20px
		box-sizing: border-box
		color: white
		margin-bottom: 20px
		position: relative
		h2
			padding-left: 0
			margin: 0
			font-weight: 600
			font-size: 2.7em
			padding-bottom: 30px
		p
			padding-bottom: 70px
			margin: 0
			line-height: 23px
		img
			width: 250px
			right: 75px
			position: absolute
			bottom: 0px
.success
	border: 1px solid #7CFC00!important

.error
	border: 1px solid red!important

em.error
	color: #f45336
	border: none!important
	float: right
	font-size: 1rem
	display: inline-block
	top: -20px
	right: 10px
	position: relative

// search
.search
	transition: all 0.5s
	padding: 0
	text-align: left
	font-size: 0
	input
		display: block
		font-size: 1rem
		width: 100%
	& > div li
		height: auto !important
		width: 33% !important
		vertical-align: top !important
		float: left
	ul
		display: inline-block !important
		text-align: left !important
		border: 1px solid
		float: left
		li
			height: auto !important
			text-align: left !important