#main-nav {
	background: var(--sec-bg);
/*	background: linear-gradient(#ccc, #fff 10px, #fff calc(100% - 10px), #ccc);*/
/*	background: linear-gradient(#ccc, #fff 10px, #fff calc(100% - 10px), #ccc);*/
	color: var(--sec-clr);
	overflow: hidden;
	padding: 6px 10px;
	max-height: 38px;
	transition: 0.2s;
	display: grid;
	grid-template-columns: 20px 1fr 3fr 1fr 20px;
}
#main-nav a {
	color: var(--sec-a);
	display: grid;
	margin: auto;
	text-decoration: none;
	transition: var(--tr-fast);
}
#main-nav a:hover,
#main-nav a:focus {
	color: var(--sec-ah);
}
#main-nav > .social {
	grid-column: span 2;
}
#main-nav > .logo {
	grid-column: 3;
}
#main-nav > #nav-toggle {
	grid-column: 5;
}
#main-nav.active {
	max-height: 500px;
}
#main-nav > .links {
	grid-column: span 5;
	display: grid;
	gap: 5px;
	padding-top: 10px;
/*	text-align: center;*/
}
#main-nav > .links > .middle {
	margin: auto;
	width: 100%;
	height: 1px;
	background: var(--sec-a);
}
#main-nav > .links > a {
	--links-grid-spacing: 20px;
	display: grid;
	grid-template-columns: var(--links-grid-spacing) 1fr;
	text-align: center;
	position: relative;
	width: 100px;
	padding: 5px;
}
#main-nav > .links > a:before,
#main-nav > .links > a:after {
	opacity: 0%;
	position: absolute;
	content: "";
	top: 50%;
	left: 25%;
	width: 50px;
	height: 1px;
	background: var(--sec-ah);
	transition: var(--tr-fast);
	transition-delay: 0.05s, 0s;
	transition-property: transform, opacity;
} 
#main-nav > .links > a:hover::before,
#main-nav > .links > a:hover::after,
#main-nav > .links > a:focus::before,
#main-nav > .links > a:focus::after  {
	opacity: 100%;
	transition-delay: 0s, 0.05s;
	transition-property: transform, opacity;
}
#main-nav > .links > a:hover::before,
#main-nav > .links > a:focus::before {
	transform: translate(-100px, 0px);
}
#main-nav > .links > a:hover::after,
#main-nav > .links > a:focus::after {
	transform: translate(100px, 0px);
}
#main-nav > .links > a > i {
	background: var(--sec-bg);
	width: 100%;
	z-index: 100;
}
#main-nav > .links > a > span {
/*	transform: translate(calc(-1 * var(--links-grid-spacing)), 0px);*/
/*	opacity: 0%;*/
	transition: var(--tr-fast);
}
#main-nav > .links > a:hover > span {
	transform: translate(0px, 0px);
	opacity: 100%;
}

#main-nav > .social {
	display: grid;
	grid-template-columns: repeat(3, 25px);
	gap: 5px;
	height: 25px;
}
#main-nav > .social > a {
	font-size: 80%;
	margin: 2px;
	padding:  4px;
	text-align: center;
	border-radius: 4px;
	box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
	transition: var(--tr-fast);
}
#main-nav > .social > a:hover,
#main-nav > .social > a:focus {
	transform: translate(0px, -1px);
	box-shadow: 0px 1px 5px rgb(0 0 0 / 50%);
	/*outline: 1px solid rgb(255 0 0 / 20%);*/
}
#main-nav > .social > .facebook {
	background: #1877f2;
	color: #fff;
}
#main-nav > .social > .linkedin {
	background: #0077b5;
	color: #fff;
}

#main-nav > .logo {
	text-align: center;
	color: var(--sec-a);
}
#main-nav > .logo h2 {
	font-size: 22px;
	margin: 0px;
	padding: 0px;
}
#nav-toggle {
	position: relative;
	color: var(--sec-a);
	text-align: right;
	transition: 0.2s;
	cursor:  pointer;
}
#nav-toggle:hover {
	color: var(--sec-ah);
}
#nav-toggle > * {
	position: absolute;
	top: 4px;
	right: 4px;
	transition: var(--tr-fast);
}
#nav-toggle.active > *:nth-child(1) {
	opacity: 0%;
}
#nav-toggle:not(.active) > *:nth-child(2) {
	opacity: 0%;
}