.primNav {
	display:		inline-block;
	margin-top:		10px;
	padding:		0;
}

.primNavA {
	display:		inline-block;
	margin-top:		10px;
	padding:		0;
}

.primNav a {
	padding:		0.2rem 0.4rem;
	margin:			0;
	color:			var(--main-grey-green);
	position:		relative;
	text-decoration:	none;
}

.primNavA a {
	padding:		0.2rem 0.4rem;
	margin:			0;
	color:			var(--main-red);
	position:		relative;
	text-decoration:	none;
}

.primNav a:before,
.primNav a:after {
	height:			5px;
	width:			5px;
	position:		absolute;
	content:		'';
	-webkit-transition:	all 0.35s ease;
	transition:		all 0.35s ease;
	opacity:		0;
}

.primNav a:before {
	left:			0;
	top:			0;
}

.primNav a:after {
	right:			0;
	top:			0;
	border-right:		3px dotted #7C7C6A;
	border-top:		3px dotted #7C7C6A;
}

.primNav a:hover,
.primNav .current {
	color:			var(--main-red);
}


.primNav a:hover:before,
.primNav a:hover:after {
	-webkit-transform:	translate(0%, 0%);
	transform:		translate(0%, 0%);
	opacity:		1;
}

.subNav a {
	text-decoration:	none;
	color:			var(--main-grey-green);
}

.subNav a:hover {
	color:			var(--main-red);
}


.subNav {
	display:		flex;
	justify-content:	end;
	font-size:		0.9rem;
	color:			var(--main-grey-green);
	height:			90px;
	width:			100%;
	z-index:		3;
	padding-top:		5px;
	padding-right:		5px;
	border:			1px solid;
	border-image:		linear-gradient(to right,#F7F5F1,#7C7C6A) 1 0 0 0;
}

#subNavActive {
	color:			var(--main-red);
}

#subNavActive {
	color:			var(--main-red);
}

#smallNav {
	position:		relative;
	display:		none;
	flex-wrap:		wrap;
	flex-direction:		column;
	justify-content:	center;
	align-items:		center;
	text-align:		center;
	padding-top:		20px;
	padding-bottom:		5px;
	width:			100%;
	z-index:		3;
	top:			1px;
	visibility:		hidden;
	background-color:	var(--main-bg-color);
}

#smallNavLink {
	padding-top:		5px;
	padding-bottom:		5px;
	text-decoration:	none;
	color:			var(--main-grey-green);
	width:			100%;
}

#smallNavLinkA {
	color:			var(--main-red);
	padding-top:		5px;
	padding-bottom:		5px;
	text-decoration:	none;
	width:			100%;
}

#smallsubNavActive {
	color:			var(--main-red);
	padding-top:		5px;
	padding-bottom:		5px;
	text-decoration:	none;
	width:			100%;
        }

#smallsubNav {
	color:			var(--main-grey-green);
	padding-top:		5px;
	padding-bottom:		5px;
	text-decoration:	none;
	width:			100%;
        }

#smallNav hr {
	margin-top:		20px;
	margin-bottom:		20px;
	border:			none;
	border-top:		1px dotted var(--main-grey-green);
	width:			50%;
}

header .menu {
	clear:			both;
	max-height:		0;
	transition:		max-height .2s ease-out;
}

header .menu-icon {
	cursor:			pointer;
	display:		none;
	float:			right;
	padding:		20px 10px;
	position:		relative;
	-webkit-user-select:	none;
	user-select:		none;
}

header .menu-icon .navicon {
	background:		var(--main-grey-green);
	display:		block;
	height:			2px;
	position:		relative;
	transition:		background .2s ease-out;
	width:			18px;
}

header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
	background:		var(--main-grey-green);
	content:		'';
	display:		block;
	height:			100%;
	position:		absolute;
	transition:		all .2s ease-out;
	width:			100%;
}

header .menu-icon .navicon:before {
	top:			5px;
}

header .menu-icon .navicon:after {
	top:			-5px;
}

header .menu-btn {
	display:		none;
}

header .menu-btn:checked ~ #smallNav {
	display:		flex;

}

header .menu-btn:checked ~ .menu-icon .navicon {
	background:		transparent;
}

header .menu-btn:checked ~ .menu-icon .navicon:before {
	transform:		rotate(-45deg);
}

header .menu-btn:checked ~ .menu-icon .navicon:after {
	transform:		rotate(45deg);
}

header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	top:			0;
}