@charset "UTF-8";
/*-------------------------
 * 
 * 
 * 
 * Breadcrumbs
 * 
 * 
 * 
-------------------------*/

#breadcrumbs {
	position: fixed;
	top: 0;
	left: 4%;
	width: 28px;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--white);
	opacity: 0;
	visibility: hidden;
	transition: 1s ease;
}

#breadcrumbs.isLightMode {
	color: var(--black);
}

#breadcrumbs.isActive {
	opacity: 1;
	visibility: visible;
}

#breadcrumbs > .inner {
	width: 100%;
	height: 28px;
	transform: rotate(90deg);
	transform-origin: left top;
	position: relative;
	right: -28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 28px;
	white-space: nowrap;
}

#breadcrumbs .arrow {
	width: 28px;
	height: 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	position: relative;
}

#breadcrumbs .arrow::before {
	display: block;
	content: '';
	width: 8px;
	height: 1px;
	background: var(--white);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#breadcrumbs.isLightMode .arrow::before {
	background: var(--black);
}

#breadcrumbs * {
	font-size: inherit;
}

#breadcrumbs.isLightMode a:link,
#breadcrumbs.isLightMode a:visited {
	color: var(--black);
}

@media (any-hover: hover) {

	#breadcrumbs.isLightMode a:hover,
	#breadcrumbs.isLightMode a:active {
		color: var(--black);
	}
}

/* #breadcrumbs > .inner > span:nth-last-of-type(2),
#breadcrumbs > .inner > span:last-of-type {
	display: none;
} */

#breadcrumbs > .inner > span:nth-of-type(n+4) {
	display: none;
}

@media (max-width: 1024px) {

	#breadcrumbs {
		display: none;
	}

}

@media (max-width: 640px) {

}

/*-------------------------
 * 
 * 
 * 
 * Footer
 * 
 * 
 * 
-------------------------*/

#footer .footerSocialItem a svg path {
	fill: var(--black);
	transition: .5s ease;
}

#footer.isActive .footerSocialItem a svg path {
	fill: var(--white);
}

@media (max-width: 1024px) {

}

@media (max-width: 640px) {

}