/* Navbar.js v2.0.8 | thednp © 2020 | MIT-License */

.navbar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	line-height: 1.5rem;
	font-size: 14px;
	padding: 0
}

.navbar>div {
	display: none;
	flex-direction: column;
	flex-basis: 100%;
	flex-grow: 1
}

.navbar.open-mobile>div {
	display: flex
}

.navbar .nav {
	flex-direction: column
}

.navbar .brand {
	display: flex;
	text-decoration: none;
	white-space: nowrap;
	align-items: center;
	padding: .5rem 1.7rem;
	font-size: 46px;
}

.navbar-toggle {
	border-radius: .25rem;
	color: currentColor;
	background: transparent;
	margin: auto 1rem;
	align-self: center;
	display: flex;
	align-items: center;
	padding: .125rem .5rem;
}

.navbar-toggle:focus {
	outline: none
}

.open-mobile .navbar-toggle {
	border-color: #e6e6e6
}

@media(min-width: 768px) {
	.navbar {
		flex-flow: column nowrap;
		justify-content: flex-start;
		height: 100%
	}
	.navbar>div {
		display: flex;
		flex-direction: column
	}
	.navbar .nav {
		flex-direction: column;
		width: 150px;
	}
	.navbar-toggle {
		display: none
	}
}

.navbar-content a:not([class]),
.navbar-content b,
.sub-menu-content a:not([class]),
.sub-menu-content b {
	color: rgba(255, 255, 255, .75)
}

@media(min-width: 768px) {
	.navbar-content a:not([class]):hover {
		color: rgba(255, 255, 255, .95)
	}
}

.navbar {
	/* background:#544040; */
	color: rgba(255, 255, 255, .55);
}

.navbar .brand {
	color: #333;
}

@media(min-width: 768px) {
	.navbar .brand {
		color: #333;
	}
	.navbar .brand:hover {
		background: transparent;
		color: #444;
	}
}

.nav li>a,
.nav li>span,
.navbar-content,
.sub-menu-content {
	padding: .5rem 1rem
}

.nav {
	display: flex
}

.nav,
.nav ul {
	margin: 0;
	padding: 0;
	list-style: none
}

.nav li {
	position: relative;
	transition: margin .3s ease 0s
}

.nav li>span,
.nav li>a {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5rem
}

.nav li>a {
	text-decoration: none
}

.nav li>span>span,
.nav li>a>span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

div.sub-menu>ul>li.open-mobile>span+ul,
div.sub-menu>ul>li.open-mobile>span+div,
li.open-mobile>.sub-menu {
	display: block
}

.open-mobile>span>.parent-toggle,
.open-mobile>a>.parent-toggle,
.open-mobile .parent-toggle:focus {
	border-color: currentColor
}

.open-mobile+.open-mobile {
	margin-top: .5rem
}

.sub-menu-content p,
.sub-menu-content ul {
	margin-bottom: .5rem
}

ul.sub-menu,
div.sub-menu ul {
	padding: 0
}

.menu-icon,
.parent-icon,
.parent-toggle {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
	text-align: center;
	line-height: 1.5rem
}

.menu-icon {
	font-size: 1.4rem
}

.parent-toggle {
	border-radius: .25rem;
	border: 1px solid transparent
}

.menu-icon+span {
	flex: auto;
	margin-left: .5rem
}

span>.parent-toggle {
	cursor: pointer
}

@media(min-width: 768px) {
	.parent-toggle {
		display: none
	}
	.parent-icon,
	div.sub-menu>ul>li>span+div,
	div.sub-menu>ul>li>span+ul {
		display: block
	}
	.sub-menu {
		opacity: 0;
		position: absolute;
		display: block;
		line-height: 1.5rem;
		font-size: 14px
	}
	ul.sub-menu,
	div.sub-menu ul {
		padding: 0
	}
	li.open-mobile {
		background: none;
		transition: none
	}
	li.open-mobile+.open-mobile {
		margin: 0
	}
	.column-title,
	div.sub-menu>ul>li>span {
		font-size: 120%
	}
	.sub-menu li>a,
	.sub-menu li>span,
	.sub-menu-content {
		padding: .5rem 
	}
	.nav>li>.sub-menu {
		margin: 0 0 0;
		padding:0
	}
	ul.sub-menu {
		width: 200px
	}
	div.sub-menu {
		min-width: calc(600px + 1rem)
	}
	div.sub-menu>ul {
		margin: 0
	}
	div.sub-menu.m1 {
		min-width: calc(200px + 1rem)
	}
	div.sub-menu.m2 {
		min-width: calc(400px + 1rem)
	}
	div.sub-menu.m3 {
		min-width: calc(600px + 1rem)
	}
	div.sub-menu.m4 {
		min-width: calc(800px + 1rem)
	}
}

.nav li>a,
.nav li>span {
	color: #333;
}

.nav li.open-mobile {
	background: rgba(255, 255, 255, .075)
}

@media(min-width: 768px) {
	.nav>li.open>span,
	.nav>li.open>a,
	.nav>li:hover>span,
	.nav>li:hover>a {
		background: var(--primary);
		color: rgba(255, 255, 255, .75);
	}
	.nav>li.active>span,
	.nav>li.active>a,
	.nav>li.active.open>span,
	.nav>li.active.open>a,
	.nav>li.active:hover>span,
	.nav>li.active:hover>a {
	 background: var(--primary);
		color: #595959;
	}
}

@media(min-width: 768px) {
	.sub-menu {
		background: #f0f7fe;
		box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .25), 1px 1px 0 0px rgba(0, 0, 0, .15) inset;
	}
	.sub-menu .sub-menu {
		background: #f0f7fe;
	}
	.sub-menu .sub-menu .sub-menu {
		background: #c5cbcf
	}
	.sub-menu li>span,
	.sub-menu li>a {
		color: rgba(0, 0, 0, .55)
	}
	.sub-menu li.open>a,
	.sub-menu li:hover>a {
		background: #2098d1;
		color: #fff;
	}
	.sub-menu li.active>span,
	.sub-menu li.active>a,
	.sub-menu li.active:hover>span,
	.sub-menu li.active:hover>a {
		background: #cd3232;
		color: #fff
	}
	.column-title,
	div.sub-menu>ul>li>span {
		color: rgba(0, 0, 0, .95)
	}
	div.sub-menu>ul>li>ul>li.open>span,
	div.sub-menu>ul>li>ul>li:hover>span,
	ul.sub-menu>li.open>span,
	ul.sub-menu>li:hover>span {
		background: #4b3939;
		color: #eee
	}
	div.sub-menu {
		color: rgba(0, 0, 0, .55)
	}
	.sub-menu-content a:not([class]),
	.sub-menu-content b {
		color: rgba(0, 0, 0, .75)
	}
	.sub-menu-content a:not([class]):hover {
		color: rgba(0, 0, 0, .95)
	}
}

.nav {
	flex-direction: column
}

@media(min-width: 768px) {
	.nav li>.sub-menu {
		top: -99999em;
		left: -99999em;
		opacity: 0;
		transform: translate(-10px);
		transition: transform .5s ease, opacity .4s linear
	}
	.nav li.open-position>.sub-menu {
		top: 0;
		left: 100%;
		z-index: 1
	}
	.nav li.open>.sub-menu {
		transform: translate(0);
		opacity: 1
	}
	
}

.menu-item-has-children:focus-within>  ul.sub-menu{
	display:block;
}
/*work in mobile*/
.open-mobile .sub-menu, .open-mobile li .sub-menu{
	 margin-left:15px
 }
.open-mobile ul.sub-menu, .open-mobile .sub-menu .sub-menu{
	display:none
}
li.mobile-active> ul.sub-menu{
	display:block;
}