<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- CDN JS -->
<script src="//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Jasny Bootstrap and JS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/js/jasny-bootstrap.min.js"></script>
<!-- Bootstrap select JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/i18n/defaults-ua_UA.js"></script>
<!-- FontAwesome and JS -->
<script type="text/javascript" src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Bootstrap select CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
<hgroup class="panel-nav container-fluid" style="background: rgba(255,35,51,1);z-index:2;">
<div class="row">
<div class="menu col-3 p-0">
<span class="btn btn-secondary rounded-0 w-100 h-100" role="button">
<i class="fas fa-bars"></i> Category
</span>
<menu class="position-absolute bg-light w-100 border-left border-right" style="z-index:3;">
<div>
<a href="" class="p-1 d-block">Category №1</a>
<nav class="position-absolute bg-white h-100 border-bottom border-right p-1">
<div class="position-relative w-100 img-thumbnail text-center" style="background:url(https://my-asia.net/image/catalog/NP-truck.jpg) center;height:65px;overflow:hidden;background-size:cover;">
<div class="position-absolute w-100 h-100" style="background:url(https://my-asia.net/image/catalog/NP-truck.jpg) center;filter:blur(5px);background-size:cover;"></div>
<h4 class="position-absolute w-100 pt-3">
category 1
</h4>
</div>
<a href="">sub-category 1</a>
</nav>
</div>
<div>
<a href="" class="p-1 d-block">Category №2</a>
<!--<nav class="position-absolute bg-white h-100 border-bottom border-right p-1">
<a href="">sub-category 2</a>
</nav>-->
</div>
<div>
<a href="" class="p-1 d-block">Category №3</a>
<!--<nav class="position-absolute bg-white h-100 border-bottom border-right p-1">
<a href="">sub-category 3</a>
</nav>-->
</div>
<div>
<a href="" class="p-1 d-block">Category №4</a>
<!--<nav class="position-absolute bg-white h-100 border-bottom border-right p-1">
<a href="">sub-category 4</a>
</nav>-->
</div>
<div>
<a href="" class="p-1 d-block">Category №5</a>
<!--<nav class="position-absolute bg-white h-100 border-bottom border-right p-1">
<a href="">sub-category 5</a>
</nav>-->
</div>
<div>
<a href="" class="p-1 d-block">Category №6</a>
</div>
<div>
<a href="" class="p-1 d-block">Category №7</a>
</div>
<div>
<a href="" class="p-1 d-block">Category №8</a>
</div>
<div>
<a href="" class="p-1 d-block">Category №9</a>
</div>
<div>
<a href="" class="p-1 d-block">Category №10</a>
</div>
<div>
<a href="" class="p-1 d-block">Category №11</a>
</div>
<div>
<a href="" class="p-1 d-block">Category №12</a>
</div>
<div>
<a href="" class="p-1 d-block">Category №13</a>
</div>
<div>
<a href="" class="p-1 d-block">Category №14</a>
</div>
<div>
<a href="" class="p-1 d-block">Category №15</a>
</div>
<div>
<a href="" class="p-1 d-block">Category №16</a>
</div>
<div>
<a href="" class="p-1 d-block">Category №17</a>
</div>
</menu>
</div>
<div class="col-6 py-1">
<form class="form-inline input-group input-group-sm">
<input class="form-control rounded-0 border w-75" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-light btn-sm rounded-0 border border-left-0 w-25" type="submit">Search</button>
</form>
</div>
<div class="col-3 p-0">
<div class="btn-group w-100 h-100" role="group" aria-label="Basic example">
<a href="#" class="btn btn-secondary rounded-0" role="button" aria-pressed="true">Delivery</a>
<a href="#" class="btn btn-secondary rounded-0" role="button" aria-pressed="true">Contacts</a>
<!-- Button trigger modal --><a href="javascript: void(0)" class="btn btn-dark rounded-0" role="button" aria-pressed="true" data-toggle="modal" data-target="#exampleModalScrollable" data-toggle="tooltip" data-placement="bottom" title="Рассказать о нас."><i class="fas fa-qrcode"></i></a><!-- Button trigger modal end -->
<!--<a href="#" class="btn btn-secondary rounded-0" role="button" aria-pressed="true"><i class="fas fa-shopping-basket"></i></a>-->
<div class="dropdown position-relactive">
<button class="btn btn-secondary dropdown-toggle rounded-0 h-100" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
<i class="fas fa-shopping-basket"></i>
<span class="badge badge-pill badge-success position-absolute" style="top:6px;right:10px;">5</span>
</button>
<div class="dropdown-menu dropdown-menu-lg-right" aria-labelledby="dropdownMenuButton" style="max-width: 480px;width: 479px;">
<form class="px-2 py-1">
<table class="table table-bordered table-hover table-sm">
<thead class="thead-light">
<tr>
<th class="text-center align-middle" scope="col"></th>
<th class="text-center align-middle" scope="col"></th>
<th class="text-center align-middle" scope="col"></th>
<th class="text-center align-middle" scope="col"></th>
<th class="text-center align-middle" scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-center align-middle" scope="row">
<img src="https://my-asia.net/image/cache/catalog/producte/noodles-with-tastes/cung-dinh/cungdinhinstantnoodles80gr_bag_3-47x47_0.jpg" width="100%">
</th>
<td class="text-left align-middle text-wrap">Рисовая лапша "Cond Đình" со вкусом грибов</td>
<td class="text-center align-middle">x1</td>
<td class="text-center align-middle">50</td>
<td class="text-center align-middle"><button type="button" class="btn btn-danger btn-sm"><i class="fas fa-times"></i></button></td>
</tr>
<tr>
<th class="text-center align-middle" scope="row">
<img src="https://my-asia.net/image/cache/catalog/producte/noodles-with-tastes/cung-dinh/cungdinhinstantnoodles80gr_bag_3-47x47_0.jpg" width="100%">
</th>
<td class="text-left align-middle text-wrap">Рисовая лапша "Cond Đình" со вкусом грибов</td>
<td class="text-center align-middle">x1</td>
<td class="text-center align-middle">50</td>
<td class="text-center align-middle"><button type="button" class="btn btn-danger btn-sm"><i class="fas fa-times"></i></button></td>
</tr>
<tr>
<th class="text-center align-middle" scope="row">
<img src="https://my-asia.net/image/cache/catalog/producte/noodles-with-tastes/cung-dinh/cungdinhinstantnoodles80gr_bag_3-47x47_0.jpg" width="100%">
</th>
<td class="text-left align-middle text-wrap">Рисовая лапша "Cond Đình" со вкусом грибов</td>
<td class="text-center align-middle">x1</td>
<td class="text-center align-middle">50</td>
<td class="text-center align-middle"><button type="button" class="btn btn-danger btn-sm"><i class="fas fa-times"></i></button></td>
</tr>
</tbody>
</table>
<div class="btn-group btn-group-sm" role="group" aria-label="cart-button">
<button type="button" class="btn btn-secondary">
<i class="fas fa-shopping-cart"></i> Открыть корзину
</button>
<button type="button" class="btn btn-secondary">
<i class="fas fa-share"></i> Оформить заказ
</button>
<button type="button" class="btn btn-secondary">
<i class="fas fa-times"></i> Удалить всё
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</hgroup>
<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-3 menu-h px-0">
<!--<menu class="bg-light w-100 border-left border-right" style="z-index:3;">
<div>
<a href="" class="p-1 d-block">Лапша, вермишель</a>
</div>
<div>
<a href="" class="p-1 d-block">Лапша быстрого приготовления</a>
</div>
<div>
<a href="" class="p-1 d-block">Рис, бумага, мучные изделия</a>
</div>
<div>
<a href="" class="p-1 d-block">Чай, кофе, какао, капучино</a>
</div>
<div>
<a href="" class="p-1 d-block">Чипсы, снеки, крекеры</a>
</div>
<div>
<a href="" class="p-1 d-block">Бульоны, пасты</a>
</div>
<div>
<a href="" class="p-1 d-block">Соусы, приправы, специи, добавки</a>
</div>
<div>
<a href="" class="p-1 d-block">Сладости</a>
</div>
<div>
<a href="" class="p-1 d-block">Бальзамы, гели, мази</a>
</div>
<div>
<a href="" class="p-1 d-block">Алкоголь</a>
</div>
<div>
<a href="" class="p-1 d-block">Косметика</a>
</div>
<div>
<a href="" class="p-1 d-block">Напитки</a>
</div>
<div>
<a href="" class="p-1 d-block">Товары из Азии</a>
</div>
<div>
<a href="" class="p-1 d-block">Набор сушиста</a>
</div>
<div>
<a href="" class="p-1 d-block">Ланч-боксы</a>
</div>
<div>
<a href="" class="p-1 d-block">Кухонные принадлежности</a>
</div>
<div>
<a href="" class="p-1 d-block">Last Category</a>
</div>
</menu>-->
</div>
<div class="col-9">
<div class="row">
<div class="bd-example border-bottom">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.hdqwalls.com/wallpapers/pyramid-triangle-abstract-4k-ir.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://i.pinimg.com/originals/ee/f2/98/eef29858c3d2aac108a9f2a86a765e91.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.ecopetit.cat/wpic/mpic/42-426305_dark-abstract-wallpaper-4k.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<div class="container-fluid category-list-index w-100 p-0" style="background: url(https://my-asia.net/image/catalog/asia-shop.jpg) center 0px / cover no-repeat fixed;">
<nav class="row">
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<div style="background-image: url(https://cdn.icon-icons.com/icons2/236/PNG/256/Dish_Pasta_Spaghetti_26373.png)" title="" alt="" class="img-fluid d-block"></div>
<span>Лапша, вермишель</span>
<article>text</article>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<div style="background-image: url(https://cdn.icon-icons.com/icons2/236/PNG/256/Dish_Pasta_Spaghetti_26373.png)" title="" alt="" class="img-fluid d-block"></div>
<span>Лапша быстрого приготовления</span>
<article>text</article>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<div style="background-image: url(https://cdn.icon-icons.com/icons2/236/PNG/256/Dish_Pasta_Spaghetti_26373.png)" title="" alt="" class="img-fluid d-block"></div>
<span>Рис, бумага, мучные изделия</span>
<article>text</article>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<div style="background-image: url(https://cdn.icon-icons.com/icons2/236/PNG/256/Dish_Pasta_Spaghetti_26373.png)" title="" alt="" class="img-fluid d-block"></div>
<span>Чай, кофе, какао, капучино</span>
<article>text</article>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Чипсы, снеки, крекеры</span>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Бульоны, пасты</span>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Соусы, приправы, специи, добавки</span>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Сладости</span>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Бальзамы, гели, мази</span>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Алкоголь</span>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Косметика</span>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Напитки</span>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Товары из Азии</span>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Набор сушиста</span>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Ланч-боксы</span>
<a href="/">Перейти</a>
</li>
<li class="col-6 col-xs-4 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<span>Кухонные принадлежности</span>
<a href="/">Перейти</a>
</li>
</nav>
</div>-->
<div class="container pt-5">
<div class="row">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aut alias odio modi, magnam laboriosam dolorem assumenda
tenetur cumque pariatur adipisci hic accusantium,
laudantium voluptatem architecto debitis commodi
perferendis unde. Nostrum.
</p>
</div>
</div>
hgroup { width: 100%; }
hgroup.fixed { position: fixed; top: 0; left: 0; width: 100%; }
.panel-nav { background: rgb(255,35,51); }
.panel-nav .btn { background: rgb(234, 33, 48) !important; border: 0; }
.panel-nav hgroup.btn { background: rgb(234, 33, 48) !important; border: 0; cursor: pointer; }
.panel-nav .btn:hover { background: rgb(222, 34, 47) !important; }
.panel-nav div div form .btn { background: rgb(255, 255, 255) !important; }
.panel-nav div div form .btn:hover { background: rgb(224, 224, 224) !important; }
.menu menu {display:none; margin:0; padding:0; }
.menu menu::after { content: ''; position: absolute; left: 45%; top: -20px; border: 10px solid transparent; border-top-color: transparent; border-top-style: solid; border-top-width: 10px; border-top: 10px solid #f8f9fa; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.menu:hover menu { display:block; }
.menu menu nav { display:none;left: calc(100% - (-1px));top:0;min-width: calc(768px - (-30.74%)); }
.menu menu div:hover nav { display:block; }
.menu menu div a { padding: .5em .8em !important; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid rgba(222,226,230,1); font-weight: 600; color: rgba(0,0,0,1); font-size: .75em; }
.menu menu div nav a { padding: .5em .8em !important; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid rgba(222,226,230,1); font-weight: 600; color: rgba(0,0,0,1); display: block; text-align: center; }
.category-list-index nav { margin: auto; padding: 0; list-style-type: none; }
.category-list-index nav li { padding: 1em 0 1.3em 0; height: 8em; text-align: center; font-size: 1em; color: rgb(255,255,255); transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; overflow-y: hidden; background-size: 22%; background-position: center 50px; background-repeat: no-repeat; text-align: center; -webkit-box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,0.3); -moz-box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,0.3); box-shadow: inset 0px 0px 300px 200px rgba(255,255,255,0.3); }
.category-list-index nav li:nth-child(1) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2);}
.category-list-index nav li:nth-child(2) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2);}
.category-list-index nav li:nth-child(3) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(4) { border-bottom: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(5) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(6) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(7) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(8) { border-bottom: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(9) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(10) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(11) { border-bottom: 1px solid rgba(102,102,102,0.2); border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(12) { border-bottom: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(13) { border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(14) { border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(15) { border-right: 1px solid rgba(102,102,102,0.2); }
.category-list-index nav li:nth-child(16) { }
.category-list-index nav li:hover { padding: .5em 0 0 0; -webkit-box-shadow: inset 0px 0px 300px 200px rgba(255,0,13,0.46); -moz-box-shadow: inset 0px 0px 300px 200px rgba(255,0,13,0.46); box-shadow: inset 0px 0px 300px 200px rgba(255,0,13,0.46); }
.category-list-index nav li div { width: 100%; background-size: 90px; background-position: center; background-repeat: no-repeat; max-width: 100% !important; height: 90px !important; margin: -15px 0px 0 !important; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; }
.category-list-index nav li:hover div { height: 0 !important; margin-bottom: 1em !important; }
.category-list-index nav li span { text-shadow: none; color: rgba(0,0,0,1); font-weight: bolder; }
/* .category-list-index nav li:hover img { height: 0px !important; margin-top: -20px !important; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; } */
.category-list-index nav li:hover span { color: rgba(255,255,255,1); padding-bottom: .5em; margin-top: 3em; border-bottom: 1px solid rgb(255,255,255); text-shadow: 1px 1px 2px black; }
.category-list-index nav li article { display: none; font-size: .7em; margin: 0px 1em; word-wrap: break-word; }
.category-list-index nav li:hover article { margin-top: 1.7em;display: block;max-height: 4em;/* white-space: nowrap; */overflow: hidden;text-overflow: ellipsis;/* word-wrap: break-word; */display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.category-list-index nav li a { display: none; font-size: .7em; -webkit-border-radius: .2em; -moz-border-radius: .2em; border-radius: .2em; text-shadow: 1px 1px 2px black; font-weight: bold; }
.category-list-index nav li a:hover { background: rgb(255,255,255); transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; text-shadow: none; color: rgb(255,15,13); }
.category-list-index nav li:hover a { display: block; border: 1px solid rgb(255,255,255); margin: .5em 4em 0; }
.category-list-index nav li a:hover { border: 1px solid rgb(255,255,255); }
.category-list-index nav li a { color: rgb(255,255,255); }
.category-list-index nav li a:hover { text-decoration: none; }
@media screen and ( max-width: 768px) {
.category-list-index nav li span { font-size: .7em; }
.category-list-index nav li { padding: 1em 0 1.3em 0; height: 9em; }
.category-list-index nav li:hover article { max-height: 4em; }
}
.menu-h menu { display:block; margin:0; padding:0; }
.menu-h menu::after { content: ''; position: absolute; left: 45%; top: -20px; border: 10px solid transparent; border-top-color: transparent; border-top-style: solid; border-top-width: 10px; border-top: 10px solid #f8f9fa; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.menu-h:hover menu { display:block; }
.menu-h menu nav { display:none;left: calc(100% - (-1px));top:0;min-width: calc(768px - (-30.74%)); }
.menu-h menu div:hover nav { display:block; }
.menu-h menu div a { padding: .5em .8em !important; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid rgba(222,226,230,1); font-weight: 600; color: rgba(0,0,0,1); font-size: .75em; }
.menu-h menu div nav a { padding: .5em .8em !important; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid rgba(222,226,230,1); font-weight: 600; color: rgba(0,0,0,1); display: block; text-align: center; }
var elementPosition = $('hgroup').offset();
var elementheight = $("hgroup").height();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('.panel-nav').addClass("fixed");
$("body").css({
"paddingTop": elementheight
})
} else {
$('.panel-nav').removeClass("fixed");
$("body").css({
"paddingTop": "0"
})
}
});
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
$(function () {
$('[data-toggle="popover"]').popover()
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
// scrollBanner
function scrollBanner(config) {
scrollPos = $(this).scrollTop();
config.bannerText.css({
'margin-top' : -(scrollPos/3) + "px",
'opacity' : 1-(scrollPos/300)
});
config.banner.css({
'background-position': 'center ' + (-scrollPos/4) + "px"
});
}
$(document).ready(function(){
$(window).scroll(function() {
scrollBanner({
banner: $('.banner'),
bannerText: $('.banner-text')
});
});
});
