/* breadcrumbs */

.cakes {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: var(--gap-small);
}

.breadcrumbs {
	padding: 0;
	margin: 0;
	font-size: 14px;
	font-weight: normal;
}

.breadcrumb-list {
	padding: 0;
	margin: 0 0 0.2rem 0;
}

.breadcrumbs ol {
	margin-bottom: 0;
}

.breadcrumbs li {
	display: inline-block;
	padding-bottom: 0;
}

.breadcrumb-link {
	background-color: transparent;
	padding: 0.2rem !important;
	text-decoration: underline;
	color: white;
	line-height: 160%;
	/* 22.4px */
}

.breadcrumb-link:hover{
	color: var(--accent);
}

.breadcrumb-separator {
	padding: 0 0.2rem 0 0.3rem;
}

.breadcrumb-separator::after {
	content: '/';
}

/* mr.mr_nav */

.mr_nav{
	position: relative;
	height: 1px;
	width:100%;
	overflow: hidden;
	top: -100vh;
}

.nav_list{
	display: flex;
	gap: var(--gap);
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.mr_nav a{
	display: flex;
	flex-direction: column;
	width:fit-content;
	color: var(--dark);
	font-size: 24px;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
	text-decoration: none;
}

.mr_nav a::after{
	content: '';
	display: block;
	width: 0;
	height: 6px;
	background: var(--theme);
}

.mr_nav a:hover{
	color: var(--theme);
	text-decoration: none;
}

.mr_nav a:hover::after,
.mr_nav a.active::after{
	width: 100%;
	transition: var(--transition);
}


.rn_nav_show_text{
	display: block;
}
.rn_nav_close_text{
	display: none;
}

.rn_nav_close_container{
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 1000;
}

.rn_nav_close_label{
	display: flex;
	align-items: center;
	justify-content: center;
	width:48px;
	height:48px;
	border-radius: 24px;
	position: relative;
}

.rnci_button{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width:56px;
	height:56px;
	border-radius: 50%;
	background: var(--theme);
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.40);
	backdrop-filter: blur(1.5px);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: var(--transition);
	color:white;
	position: absolute;
	left:0;
	top:0;
	padding-top:6px;
}

.hambars{
	display: flex;
	position: relative;
	width:28px;
	height:20px;
}

.hambar{
	width:28px;
	height:4px;
	background-color: var(--white);
	position: absolute;
	left:0;
	transition: var(--transition);
}

.hb2{
	top:7px;
}

.hb3{
	top:14px;
}


.rn_nav_close_label:hover .rnci_button,
.rn_nav_close_label:has(.rn_nav_close_input:focus) .rnci_button{
	background-color: var(--dark);
	color:var(--white);

	.hambar{
		background-color: var(--white);
		transition: var(--transition);
	}
}

.mr_nav:has(.rn_nav_close_input:checked){
	
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0; bottom: 0;
	left: 0; right: 0;
	background: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap);
	transition: var(--transition);
	z-index: 990;

	.rn_nav_show_text{
		display: none;
	}

	.rn_nav_close_text{
		display: block;
	}
	
	.hb1{
		transform: rotate(45deg);
		transition: var(--transition);
		width:22px;
		top: 6px;
		left: 3px;
	}

	.hb3{
		transform: rotate(-45deg);
		transition: var(--transition);
		width:22px;
		top:6px;
		left: 3px;
	}
	.hb2{
		width:0;
		left:14px;
		transition: var(--transition);
	}

}

@media (min-width: 768px) {

	.rn_nav_close_container{
		display: none;
	}

	.mr_nav,
	.mr_nav:has(.rn_nav_close_input:checked){
		height: auto;
		width: auto;
		position: relative;
		flex-direction: row;
		align-items: end;
		padding-inline-end: var(--gap);
		top: revert;
		left: revert;
		right: revert;
		bottom: revert;
		overflow: revert;
	}
	
	.nav_list{
		flex-direction: row;
		align-items: center;
	}

	.mr_nav a.nav_link_home {
		margin-top: -10px;
	}

	.mr_nav a.nav_link_home:hover{
		text-decoration: none;
	}
}

.mr_nav a.nav_link_home::after{
	content: '';
	display: block;
	width: 0;
	height: 0px;
	background: var(--theme);
}

.mr_nav a.nav_link_home:hover::after{
	color: var(--theme);
	transition: var(--transition);

	#home_dot_ellipse{
		fill: var(--dark);
	}
}