/**
 * Nav Tree
 */

/**
 * Inilial states
 */
.nav-tree,
.nav-tree * {
	box-sizing: border-box;
	font-family: var(--nav-font);
}
.nav-tree ul {
	display: block;
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/**
 * Flat nav like footer blocks
 */
.nav-flat {
	display: block;
	margin: 0;
	padding: 0;
}
.nav-flat .caption {
	padding: .5rem 1rem;
	font-weight: 700;
	text-transform: uppercase;
}
.nav-flat a, .nav-flat a:hover, .nav-flat a:focus {
	display: block;
	padding: .25rem 1rem;
	text-decoration: none;
}
/**
 * Inline nav like subcategories' buttons
 */
.nav-inline {
	display: flex;
	flex-flow: row wrap;
	margin: 0;
	padding: 0;
	justify-content: center;
	align-items: center;
}
.nav-inline > a {
	margin: .25rem;
}
/*
.nav-inline > .flex-1 {
	flex: 0 0 10%;
}
.nav-inline > .flex-2 {
	flex: 0 0 20%;
}
*/


@media (max-width:991px) {

	.nav-tree {
		position: fixed;
		top: 0; bottom: 0;
		left: 0; right: 0;
		z-index: 9900;
		width: 100vw;
		transition: all var(--speed);
	}

	/** Fade in - out */
	.nav-tree:not(.slide-left):not(.slide-right):not(.flip-left) {
		opacity: 0;
		height: 0;
		overflow: hidden;
	}
	.nav-tree.open:not(.slide-left):not(.slide-right):not(.flip-left) {
		opacity: 1;
		height: 100vh;
		overflow: auto;
		transition: opacity var(--speed);
	}

	/** Slide from left */
	.nav-tree.slide-left {
		opacity: 1;
		height: 100vh;
		transform: translateX(-100%);
	}
	.nav-tree.slide-left.open {
		transform: translateX(0);
	}

	/** Slide from right */
	.nav-tree.slide-right {
		opacity: 1;
		height: 100vh;
		transform: translateX(100%);
	}
	.nav-tree.slide-right.open {
		transform: translateX(0);
	}

	/** Flip from left */
	.nav-tree.flip-left {
		-webkit-transform: perspective(300px) rotateY(90deg);
		transform: perspective(300px) rotateY(90deg);
		-webkit-transform-origin: left;
		transform-origin: left;
		opacity: .3;
		will-change: transform, opacity;
	}
	.nav-tree.flip-left.open {
		-webkit-transform: perspective(300px) rotateY(0deg);
		transform: perspective(300px) rotateY(0deg);
		opacity: 1;
	}

	/** Structure */
	.toggle.close, .toggle.close:hover, .toggle.close:focus {
		display: inline-block;
		float: none!important;
		width: var(--toggle-width,46px);
		height: var(--toggle-height,46px);
		margin-left: auto;
		padding: 0;
		text-align: center;
	}
	.toggle.close [class^="bi-"]::before, .toggle.close [class*=" bi-"]::before,
	.toggle.close [class^="si-"]::before, .toggle.close [class*=" si-"]::before {
		font-size: 32px;
		line-height: var(--toggle-height,46px);
	}

	.nav-tree ul li.parent > a {
		flex: 0 0 calc(100% - var(--toggle-width,46px));
	/*
		width: calc(100% - var(--toggle-width,46px));
	*/
	}
	.nav-tree ul li.parent span {
		display: inline-block;
		flex: 0 0 var(--toggle-width,46px);
		width: var(--toggle-width,46px);
		height: var(--toggle-height,46px);
		background: url("data:image/svg+xml,%3Csvg width='10' height='10' 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% / 12px 12px no-repeat;
		cursor: pointer;
		transform: rotate(90deg);
		transition: transform .3s;
	}
	.nav-tree ul li.parent.open > a > span {
		transform: rotate(-90deg);
	}


	.nav-body {
		position: absolute;
		top: var(--toggle-height,46px);
		left: 0; right: 0;
		bottom: 0;
		overflow: auto;
	}
	.nav-flat .nav-body {
		position: static;
	}
	.nav-tree li {
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}
	.nav-tree a {
		display: flex;
		flex-wrap: wrap;
		padding: .5rem 1rem;
	}

	.nav-root ul {
		display: none;
	}
	.nav-root li.open > ul {
		display: block;
	}

	.nav-tree.flip-left .nav-root ul {
		display: block;
		-webkit-transform: perspective(300px) rotateX(-90deg);
		transform: perspective(300px) rotateX(-90deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: .3;
		max-height: 0;
		will-change: transform, opacity, max-height;
		transition: all var(--speed);
	}
	.nav-tree.flip-left .nav-root li.open > ul {
		-webkit-transform: perspective(300px) rotateX(0deg);
		transform: perspective(300px) rotateX(0deg);
		max-height: 100vh;
		opacity: 1;
	}

	.nav-root ul a {
		padding-left: 2rem;
	}
	.nav-root ul ul a {
		padding-left: 4rem;
	}
	.nav-root ul ul ul a {
		padding-left: 6rem;
	}

	/** Colors - text */
	.nav-tree, .nav-tree a, .nav-tree a:hover, .nav-tree a:focus {
		color: var(--nav-color,#ffffff);
		text-decoration: none;
	}
	.nav-tree {
		background: var(--nav-background,#333333);
	}
	.nav-tree ul ul {
		background-color: rgba(0,0,0,.2);
	}

}

/************************************************************************************************/

@media (min-width:576px and max-width:991px) {
	.nav-tree {
		width: 50vw;
	}
}

/************************************************************************************************/

@media (min-width:992px) {
	.nav-tree {
		flex: 1 0 100%;
		display: block;
	}
	.nav-head {
		display: none;
	}
	.nav-tree .nav-body {
		background: var(--nav-lg-root-bg-color,#333333);
	}
	.nav-tree .nav-root {
		display: flex;
		justify-content: space-around;
	}
	.nav-tree .nav-root ul {
		background: var(--nav-lg-child-bg-color,#ffffff);
		border: var(--nav-lg-border);
	}
	.nav-tree, .nav-tree a, .nav-tree :hover a {
		color: var(--nav-lg-color,#000000);
		text-decoration: none;
		transition: all .3s;
	}
	.nav-tree li {
		transition: all .3s;
	}
	.nav-tree li:hover {
		background: var(--nav-inverse-bg,#000000);
	}
	.nav-tree li:hover > a {
		color: var(--nav-inverse-color,#ffffff);
	}
	.nav-tree:not(.enable-hover) ul li.parent span {
		position: absolute;
		bottom: 0; left: calc(50% - 12px);
		z-index: 1;
		display: inline-block;
		width: 24px;
		height: 24px;
		background: url("data:image/svg+xml,%3Csvg width='10' height='10' 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")
			50% 50% / 12px 12px no-repeat;
		cursor: pointer;
		transform: rotate(90deg);
		transition: transform var(--speed);
	}
	.nav-tree:not(.enable-hover) ul li.parent.open > span {
		transform: rotate(-90deg);
	}
	.nav-tree:not(.enable-hover) ul li.parent:hover > span {
		background: url("data:image/svg+xml,%3Csvg width='10' height='10' 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% / 12px 12px no-repeat;
	}
	.nav-tree:not(.enable-hover) ul ul li.parent span {
		top: 0; right: 0;
		left: auto;
		bottom: 0;
		height: 100%;
		width: var(--toggle-width,46px);
		transform: rotate(0);
	}
	.nav-tree:not(.enable-hover) ul ul li.parent.open > span {
		transform: rotate(-180deg);
	}

	.nav-tree .nav-root li:not(.nav-mega) {
		position: relative;
	}
	.nav-tree .nav-root ul {
		position: absolute;
		top: 100%;
		display: inline-block;
		visibility: hidden;
		opacity: 0;
		min-width: 240px;
		box-shadow: 5px 5px 10px rgba(0,0,0,.2);
		transition: all .3s;
	}
	.nav-tree .nav-root ul ul {
		top: 0;
		left: 100%;
	}
	.nav-tree .nav-root li.open > ul {
		visibility: visible;
		opacity: 1;
	}

	/** root nav */
	.nav-tree .nav-root > li {
		position: relative;
		display: block;
	}
	.nav-tree .nav-root > li > a {
		display: block;
		padding: 1rem;
		font-size: 1rem;
		font-weight: 700;
	}
	/** child nav */
	.nav-tree .nav-root ul {
		padding: .5rem 0;
	}
	.nav-tree .nav-root li li a {
		display: block;
		padding: .5rem 1rem;
		font-size: .875rem;
		line-height: 1;
		transition: all .3s;
		transform: translate(0,0);
	}
	.nav-tree .nav-root li li:hover > a {
		transform: translate(1rem,0);
	}
	.nav-tree:not(.enable-hover) .nav-root li li a,
	.nav-tree:not(.enable-hover) .nav-root li li:hover > a {
		padding-right: calc(1rem + var(--toggle-width,46px));
	}

	/** Flip */
	/* all uls except 1st level */
	.nav-tree[class^="flip-"] .nav-root ul,
	.nav-tree[class*=" flip-"] .nav-root ul {
		display: block;
		-webkit-transform: perspective(300px) rotateY(90deg);
		transform: perspective(300px) rotateY(90deg);
		-webkit-transform-origin: left;
		transform-origin: left;
		opacity: .3;
		max-height: 0;
		will-change: transform, opacity, max-height;
		transition: all var(--speed);
	}
	.nav-tree[class^="flip-"] .nav-root li.open > ul,
	.nav-tree[class*=" flip-"] .nav-root li.open > ul {
		-webkit-transform: perspective(300px) rotateY(0deg);
		transform: perspective(300px) rotateY(0deg);
		max-height: none;
		opacity: 1;
	}
	/* 1st level uls */
	.nav-tree[class^="flip-"] .nav-root > li > ul,
	.nav-tree[class*=" flip-"] .nav-root > li > ul {
		display: block;
		-webkit-transform: perspective(300px) rotateX(-90deg);
		transform: perspective(300px) rotateX(-90deg);
		-webkit-transform-origin: top;
		transform-origin: top;
		opacity: .3;
		max-height: 0;
		will-change: transform, opacity, max-height;
		transition: all var(--speed);
	}
	.nav-tree[class^="flip-"] .nav-root > li.open > ul,
	.nav-tree[class*=" flip-"] .nav-root > li.open > ul {
		-webkit-transform: perspective(300px) rotateX(0deg);
		transform: perspective(300px) rotateX(0deg);
		max-height: none;
		opacity: 1;
	}

	/** Slide */
	.nav-tree[class^="slide-"] .nav-root ul,
	.nav-tree[class*=" slide-"] .nav-root ul {
		position: absolute;
		display: none;
	}
	.nav-tree[class^="slide-"] .nav-root > li.open > ul,
	.nav-tree[class*=" slide-"] .nav-root > li.open > ul {
		display: inline-block;
	}
	.nav-tree[class^="slide-"] .nav-root ul li.open > ul,
	.nav-tree[class*=" slide-"] .nav-root ul li.open > ul {
		display: inline-flex;
	}
	.nav-tree[class^="slide-"] .nav-root ul li,
	.nav-tree[class*=" slide-"] .nav-root ul li {
		position: static;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.nav-tree[class^="slide-"] .nav-root ul li > a,
	.nav-tree[class*=" slide-"] .nav-root ul li > a,
	.nav-tree[class^="slide-"] .nav-root ul li:hover > a,
	.nav-tree[class*=" slide-"] .nav-root ul li:hover > a {
		padding-right: 1rem;
		display: block;
		width: calc(100% - 42px);
	}
	.nav-tree[class^="slide-"] .nav-root ul li > span,
	.nav-tree[class*=" slide-"] .nav-root ul li > span {
		position: static;
		height: 1rem !important;
	}
	.nav-tree[class^="slide-"] .nav-root ul ul,
	.nav-tree[class*=" slide-"] .nav-root ul ul {
		top: -1px;
		height: calc(100% + 2px);
		flex-wrap: wrap;
		align-content: flex-start;
		writing-mode: vertical-lr;
		width: auto;
	}
	.nav-tree[class^="slide-"] .nav-root ul ul > li,
	.nav-tree[class*=" slide-"] .nav-root ul ul > li {
		writing-mode: horizontal-tb;
		width: 240px;
	}
}