.hnav--container_color_default {
	background-color: #FFFFFF;
}
.hnav--background_color_default {
	background-color: #FFFFFF;
}
.hnav--container_width_default {
	width: 100%;
	margin: 0;
}



/*
	Navigation scroller
*/
.hnav {
	width: calc(100% + 16px);
	height: 60px;
	position: relative;
	padding: 0 0 0 24px;
}
.hnav--wrap {
	width: 100%;
	margin: 0;
	height: 60px;
	border-bottom: 3px solid var(--Light-Grey);
}
.hnav--container {
	display: flex;
	justify-content: flex-start;
}

.hnav--item {
	display: inline-block;
	height: 60px;
	padding: 22px 16px 21px;
	border-bottom: 3px solid var(--Light-Grey);
	color: var(--Silver);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 1em;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: color 0.2sease;
	cursor: pointer;
}

.hnav--item.hnav--active {
	color: var(--Blue);
	border-bottom: 3px solid var(--Blue);
}

@media (hover: hover) {
	.hnav--item:hover {
		 color: var(--Dark-Violet);
		 border-bottom-color: var(--Dark-Violet);
	}
}


/* Scroll container
/* -------------------------- */
.scroll--container {
	position: relative;
	width: 100%;
}
.scroll--content {
	width: 100%;
	overflow-x: scroll;
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
	scrollbar-width: none;  /* Firefox */
}
.scroll--content::-webkit-scrollbar { 
	display: none;  /* Safari and Chrome */
}

.scroll--arrow {
	position: absolute;
	display: none;
	width: 40px;
	top: 0;
	bottom: 3px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	background: var(--White);
	border-top-right-radius: 60px;
}
.scroll--arrow.nav_bar--scroll_visible {
	display: block;
}
.scroll--arrow div {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
}
.scroll--arrow > div {
	left: -100%;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
	pointer-events: none;
}
.scroll--arrow::after {
	position: absolute;
	content: "";
	top: 16px;
	left: 16px;
	width: 24px;
	height: 24px;
	border: none;
	background-color: var(--White);
	background-position: center;
	background-repeat: no-repeat;
	/* 
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		 <path d="M10 17L15 12L10 7" stroke="#111111" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
	</svg>
	*/                       
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 17L15 12L10 7' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.scroll--right {
	right: -24px;
}
.scroll--left {
	left: -24px;
	transform: scaleX(-1);
}
@media (hover: hover) {
	.scroll--arrow:hover::after {
		 background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 17L15 12L10 7' stroke='%235412B2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
}

@media (max-width: 900px) {
	.vnav--container .hnav {
		width: calc(100% + 32px);
		height: 60px;
		position: relative;
		padding: 0;
		margin-left: -16px;
	}
}
@media (max-width: 450px) {
	.vnav--container .hnav {
		width: calc(100% + 48px);
		margin-left: -24px;
	}
	.customer--hnav {
		padding-left: 8px;
		padding-right: 8px;
	}
	.scroll--right {
		right: 0;
	}
	.scroll--left {
		left: 0;
	}
}