
@media only screen and (min-width: 50.99rem) {
.helpusbuild #g-mainbar {
	padding-left: 1% !important;
}


.floating-menu { 
	position: fixed; 
	top: 5vw; 
	left: 2vw; 
	background: transparent; 
	border-left: 1px solid var(--secondary-color); /* line on the right */ 
	padding: 10px 0px; 
	z-index: 10; 
}

.floating-menu ul {
	list-style: none;
	padding: 0;
	margin-left: 1rem; 
	margin-top: 0px;
	margin-bottom: 0px;
}

 .floating-menu li {
	 line-height: 1.1;
	 font-size: 0.9rem; 
} 

.floating-menu a {
	display: block;
	padding: 8px 0;
	color: var(--primary-color);
	text-decoration: none;
	position: relative;
	transition: color 0.3s;
	text-align: left; /* keep text left-aligned */ 
} 
/* Hover effect: just color */ 
.floating-menu a:hover { 
	color: var(--secondary-color); 
}

 /* Active link: secondary color */ 
.floating-menu a.active {
	color: var(--secondary-color); 
} 

/* Fleur-de-lis icon: fade in on active */ 

.floating-menu a.active::after {
	content: "";
	position: absolute;
	left: -23px; /* just beyond the border line */
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-image: url("/images/stories/template/blue-fdl.png");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	animation: fadeInFdl 0.4s forwards; 
} 
/* Fade-in animation */ 
@keyframes fadeInFdl { from {
	opacity: 0;
	transform: translateY(-50%) scale(0.9);
} 
to {
	opacity: 1;
	transform: translateY(-50%) scale(1);
	}
}
}


@media only screen and (max-width: 50.99rem) {
	.helpusbuild #g-mainbar {
	padding-left: 1% !important;
}
	.helpusbuild #g-sidebar .g-content {
		padding: 0.25rem;
	}


.floating-menu { 
	/*position: fixed; 
	top: 100px; 
	left: 20px; 
	background: transparent; */
	border-left: 1px solid var(--secondary-color); /* line on the right */ 
	padding: 10px 0px; 
	/*z-index: 10; */
}

.floating-menu ul {
	list-style: none;
	padding: 0;
	margin: 0 0 0 1rem; 
}

 .floating-menu li {
	 line-height: 1.1;
	 font-size: 0.9rem; 
} 

.floating-menu a {
	display: block;
	padding: 8px 0;
	color: var(--primary-color);
	text-decoration: none;
	position: relative;
	transition: color 0.3s;
	text-align: left; /* keep text left-aligned */ 
} 
/* Hover effect: just color */ 
.floating-menu a:hover { 
	color: var(--secondary-color); 
}

 /* Active link: secondary color */ 
.floating-menu a.active {
	color: var(--secondary-color); 
} 

/* Fleur-de-lis icon: fade in on active */ 

.floating-menu a.active::after {
	content: "";
	position: absolute;
	left: -23px; /* just beyond the border line */
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-image: url("/images/stories/template/blue-fdl.png");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	animation: fadeInFdl 0.4s forwards; 
} 
}

