.si-burger {
	display: inline-flex;
	width: 42px;
	height: 42px;
	background: none;
	align-items: center;
	justify-content: center;
}
.si-burger span {
	position: relative;
	display: inline-block;
	width: 23px;
	border-bottom: 2px solid var(--secondary-color);
}
.si-burger span::before,
.si-burger span::after {
	content: '';
	position: absolute;
	width: 100%;
	border-bottom: 2px solid var(--secondary-color);
	transform: translateY(-7px);
}
.si-burger span::after {
	transform: translateY(7px);
}


@media screen and (max-width:991px) {
	header {
		position: fixed;
		top: 0;left: 0;right: 0;
		z-index: 1010;
	}
	.bar-top {
		position: absolute;
		top: 100%;
		right: 0;
		min-width: 50vw;
		max-width: 80vw;
		padding: 1rem;
	}
	.bar-top .nav-side > * {
		flex: 1 1 100%;
		padding: .5rem;
		justify-content: center;
	}
	.bar-top .nav-side > .social {
		flex: 1 1 25%;
	}

	/**
	 * Navigation
	 */

	nav.controls {
		width: 100%;
		height: 56px;
	}

	.brand {
		display: inline-block;
		margin: auto;
		margin-left: 1rem;
		width: auto;
		height: 42px;
	}
	.brand img {
		display: block;
		max-height: 100%;
		width: auto;
	}
	nav.controls .toggle {
		display: inline-flex;
		width: 46px;
		height: 46px;
		margin: auto 0;
	}
	nav.controls .toggle.toggle-search {
		display: none;
	}
	nav.controls .toggle.toggle-main {
		margin-right: .5rem;
	}
	.nav-head {
		position: absolute;
		top: 0; left: 0; right: 0;
		display: block;
		text-align: left;
		background: var(--primary-dark-color);
	}
	.toggle.close .bi-x {
		width: var(--toggle-width,46px);
		height: var(--toggle-height,46px);
	}
	.toggle.close [class^="bi-"]::before,
	.toggle.close [class*=" bi-"]::before,
	.toggle.close [class^="si-"]::before,
	.toggle.close [class*=" si-"]::before {
		font-size: 40px;
	}
	nav.main {
		position: fixed;
		z-index: 9990;
		top: 0; left: -100vw; right: 0; bottom: 0;
		overflow-y: auto;
		width: 80vw;
		height: 100vh;
		color: var(--primary-reverse-color);
		background: var(--primary-dark-color);
		transition: all .3s ease-in;
	}

	nav.main.open {
		left: 0;
	}
	ul.nav-root a, ul.nav-root a:hover, ul.nav-root a:focus {
		color: var(--primary-light-color);
		font-size: 1rem;
		padding: 12px 1rem;
	}
	
	ul.nav-root .active a, {
		color: var(--primary-dark-color);
	}
	
	ul.nav-root li.has-child a, ul.nav-root li.has-child a:hover, ul.nav-root li.has-child a:focus {
		position: relative;
		width: calc(100% - 44px);
	}
	ul.nav-root li.has-child > a {
		width: calc(100% - 44px);
	}

	nav .slide-area {
		position: absolute;
		z-index: 9991;
		top: 46px; left: 0;
		right: 0; bottom: 0;
		width: 100%;
		transition: all .3s;
	}
	nav .slide-area.depth-1 {
		left: -100%;
	}

	ul.nav-root li.has-child span {
		position: absolute;
		top: 0; left: 100%;
		z-index: 1;

		display: inline-block;
		width: 44px;
		height: 44px;
		background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'/%3E%3C/svg%3E")
			50% 50% / 14px 14px no-repeat;
		cursor: pointer;
		transform: rotate(90deg);
		transition: transform .3s;
	}
	nav.main li.has-child.open > a > span {
		transform: rotate(-90deg);
	}

	li.slide-left {
		transition: all .3s;
	}
	li.slide-left .back {
		position: relative;
		width: calc(100% - 44px);
		margin-left: 44px;
		padding: 12px 1rem;
		font-size: 1rem;
	}
	.nav-root > li.has-child:first-child li.back span,
	.nav-root > li.has-child.open:first-child li.back span,
	ul.nav-root li.has-child .back span,
	li.slide-left .back span {
		left: auto;
		right: 100%;
		transform: rotate(180deg);
	}
	li.slide-left.open > ul > li > ul {
		position: absolute;
		top: 0; bottom: 0;
		left: 100%; right: -100%;
		display: none;
		width: 100%;
	}
	li.slide-left.open > ul > li.open > ul {
		display: block;
	}
	li.slide-left li li {
		max-height: none;
	}

	/* Differ first choice (products) */
	.nav-root > li.active {
		background: var(--primary-light-color);

	}
	
	.nav-root > li.active a {
		color: var(--primary-dark-color);
	}

	li.slide-left > ul > li > a > span,
	li.slide-left.open > ul > li > a > span {
		transform: rotate(0);
	}

	/**
	 *
	 */
	.main {
		padding-top: 56px;
	}
}
/*
@media (min-width:576px) {
	nav.main {
		width: 50vw;
	}
}
*/

@media screen and (min-width:992px) {
	.bar-top .nav-side {
		align-items: center;
	}
	.bar-top .nav-side > a + a {
		margin-left: 1rem;
	}
	.bar-top img {
		display: block;
		max-height: 32px;
		width: auto;
	}
	.bar-top .phones {
		display: flex;
		align-items: center;
		padding: 0;
		font-size: 1rem;
	}
	.bar-top .phones div + div {
		margin-left: 1rem;
	}
	.bar-top .phones div + div::before {
		content: '|';
		position: relative;
		left: -1rem;
	}
	.bar-top .phones a {
		display: inline-block;
		padding: 0 1rem;
		font-weight: bold;
	}
	.bar-brand { order: 1; }

	header {
		position: sticky;
		top: 0;
		z-index: 1010;
	}
	header .logo {
		transition: all .3s;
		max-width: 200px;
	}
/*	header.stuck .brand {
		height: calc(60px + 2rem);
	}*/
	header.stuck .logo {
		max-width: 200px;
	}

	nav.controls > * {
		margin: auto 1rem;
		margin-left: auto;
	}
	nav.controls .lang-select {
		margin-right: 0;
	}
	nav.controls > .brand {
		margin: 0 auto 0 0;
	}
	.toggle-main { display: none; }
	.toggle-search { display: none; }
	.form-search { order: 2; margin: auto; }
	.toggle-user { order: 3; display: flex; align-items: center; }
	.toggle-cart { order: 4; }
	.nav-head { display: none; }
	.slide-area { order: 5; width: 100%; }
	.toggle-user .lbl-user {
		display: block;
		color: var(--text-color);
	}
	.toggle-booking {
		display: inline-flex;
		align-items: center;
	}
	.toggle-booking .caption {
		margin-left: .5rem;
		font-size: 1rem;
	}
	.form-search input, .form-search button {
		height: 38px;
		line-height: 38px;
	}
	.form-search input {
		min-width: none;
		border-top-left-radius: 19px;
		border-bottom-left-radius: 19px;
	}
	.form-search button {
		border-top-right-radius: 19px;
		border-bottom-right-radius: 19px;
	}
	.form-search button .si-search {
		width: 24px;
		height: 24px;
		mask-size: 20px 20px;
		margin-top: 5px;
	}
	
	.nav-tree .nav-root > li:last-child {
		display: none;
	}
	nav.main {
		padding: 0;
	}
	
	.nav-tree {
		flex: 0 0 auto;
	}


	/**
	 * Navigation
	 */

	.nav-root, .nav-root * {
		position: static;
		box-sizing: border-box;
		display: block;
		margin: 0;
		padding: 0;
		font-size: 0.875rem;
		list-style: none;
	}

	nav.main {
		position: relative;
		z-index: 9990;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0;
		padding: 0 1.5rem;
		height: auto;

		color: var(--text-color);
		background: #ffffff;
	}

	ul.nav-root {
		position: relative;
		display: flex;
		max-width: 480px;
	}

	ul.nav-root ul {
		display: none;
	}
	ul.nav-root > li > ul {
		position: absolute;
		top: 100%;
		left: 0;
	}

	ul.nav-root li.open > ul {
		display: block;
		background-color: #ffffff;
	}
	ul.nav-root li.has-child span {
		display: inline-block;
		width: 12px;
		height: 12px;
		margin-left: 5px;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' d='M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' d='M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'/%3E%3C/svg%3E");
		background: var(--primary-light-color);
		cursor: pointer;
		transform: rotate(90deg);
		transition: transform .3s;
	}
	nav.main li.has-child.open > a > span {
		transform: rotate(-90deg);
	}


	/* level 2: Differ first choice */
	/* reset bootstrap's .dropdown */
	/*
	ul.nav-root > li > ul > li.dropdown {
		position: static;
	}
	ul.nav-root > li a, ul.nav-root > li a:hover, ul.nav-root > li a:focus {
		position: relative;
		padding: 8px 1rem 9px;
		color: var(--grey-color);
	}
	ul.nav-root > li:first-child a:hover, ul.nav-root > li:first-child a:focus {
		color: #ffffff;
		background-color: var(--primary-color);
	}
	ul.nav-root > li:first-child > a span, ul.nav-root > li:first-child > a:hover span, ul.nav-root > li:first-child > a:focus span {
		position: absolute;
		top: 1rem;
		right: 1rem;
		background-color: #ffffff;
	}
	ul.nav-root > li:first-child ul a span, ul.nav-root > li:first-child ul a:hover span, ul.nav-root > li:first-child ul a:focus span {
		position: absolute;
		top: 1rem;
		right: 1rem;
		background-color: var(--grey-color);
		transform: rotate(0);
	}
	ul.nav-root > li:first-child ul a:hover span, ul.nav-root > li:first-child ul a:focus span {
		background-color: #ffffff;
	}
	nav.main .nav-root > li:first-child > ul > li > a::before {
		color: var(--grey-color);
	}
	nav.main .nav-root > li:first-child > ul > li > a:hover::before, nav.main .nav-root > li:first-child > ul > li > a:focus::before {
		color: #ffffff;
	}
	*/
	/* level 3: mega nav */
	ul.nav-root > li.open > ul > li.open > ul {
		position: absolute;
		top: 0;
		left: 100%;
		width: 680px;
		height: 100%;
		overflow-y: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border: 1px solid var(--line-color);
		box-shadow: 5px 5px 7px rgba(0,0,0,.2);
	}
	ul.nav-root > li.open > ul > li.open > ul > li {
		flex: 0 0 33%;
		margin-bottom: 1rem;
	}
	ul.nav-root > li.open > ul > li.open > ul a,
	ul.nav-root > li.open > ul > li.open > ul a:hover,
	ul.nav-root > li.open > ul > li.open > ul a:focus {
		font-size: 0.875rem;
		background: none;
		color: var(--text-color);
	}
	ul.nav-root > li.open > ul > li.open > ul a:hover,
	ul.nav-root > li.open > ul > li.open > ul a:focus {
		font-weight: bold;
	}
	ul.nav-root > li.open > ul > li.open > ul ul {
		display: block;
	}
	.slider-wrap .overlay {
		bottom: 2rem;
	}
	/*
	.bar-top > .nav-side,
	nav.controls,
	nav.main {
		max-width: 1024px;
	}
	*/
}
@media (min-width: 1200px) {
	.bar-top > .nav-side,
	nav.controls {
		max-width: 1140px;
	}
	.form-search input {
		width: 320px;
	}
	.nav-root, .nav-root * {
		font-size: 1rem;
	}
	nav.main {
		max-width: 1140px;
	}
	ul.nav-root > li.open > ul > li.open > ul {
		width: 900px;
	}
	ul.nav-root > li.open > ul > li.open > ul > li {
		flex: 0 0 25%;
	}
	ul.nav-root {
		max-width: none;
	}
	ul.nav-root a, ul.nav-root a:hover, ul.nav-root a:focus {
		/*
		white-space: nowrap;
		*/
	}
	ul.nav-root > li.open > ul > li.open > ul a,
	ul.nav-root > li.open > ul > li.open > ul a:hover,
	ul.nav-root > li.open > ul > li.open > ul a:focus {
		font-size: 1rem;
	}
	.nav-tree .nav-root > li:last-child {
		display: block;
	}
}

@media (min-width: 1400px) {
	.bar-top > .nav-side,
	nav.controls {
		max-width: 1340px;
	}
	.form-search input {
		width: 460px;
	}
	nav.main {
		max-width: 1340px;
	}
}