.pagesNav,
.subNav {
	line-height: 1.5;
}


/* subNav */

.subNav {
	display:flex;
	width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
	justify-items: flex-start;
}

.subNav a {
	text-decoration: none;
	text-transform: uppercase;
	color: #cfc0ac;
	font-weight: var(--normal-weight);
	letter-spacing: 0.03em;
	margin-right: 1em;
}

.subNav a:hover,
.subNav a.active {
	color: black;
}


/* filterNav */

ul.filterNav {
	margin-bottom: 28vw;
}

ul.filterNav>li>a {
	display:inline-block;
	font-weight: var(--fat-weight);
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 0.6em;
}


body.kontakt ul.filterNav {
	margin-bottom: 0;
}



/* mobile only */
@media only screen and (max-width: 699px) {
	/* mainNav */

	.pageHeader .pagesNav {
		position: fixed;
		opacity: 0;
		pointer-events:none;
		width: 100%;
		background-color: var(--color-1);
		transform: translate(0, -110vh);
		transition: transform 0.5s ease, opacity 0.2s ease;
		z-index: 2;
	}

	.pageHeader .pagesNav.open {
		opacity: 1;
		transform: translate(0,12vw);
		pointer-events:auto;
	}

	.pageHeader .pagesNav .subNav {
		display:none;
	}

	.pageHeader .pagesNav ul {
		margin: 8vw 4vw 60vw 4vw;
		text-align: right;
	}

	.pageHeader .pagesNav a {
		font-weight: var(--fat-weight);
		text-transform: uppercase;
		text-decoration-color: white;
		display:inline-block;
	}

	.pageHeader .pagesNav a:hover {
		text-decoration-color: transparent;
	}

	.pageHeader .pagesNav .kontaktNav {
		margin-top: 1.5em;
	}
	
}




/* tablet */
@media only screen and (min-width: 700px) {
	
	
	/* mainNav */
	
	.pagesNav {
		position: relative;
		padding-top: 12em;
		padding-bottom: 3em;
	}
	
	.pagesNav .subNav {
		display:none;
	}
	
	.pagesNav li.active .subNav {
		display:flex;
	}

	.pagesNav>ul>li {
		display:flex;
		flex-direction: row;
	}

	.pagesNav>ul>li>a {
		font-weight: var(--fat-weight);
		text-transform: uppercase;
		display:inline-block;
		width: var(--col1-width);
		text-align: right;
		padding-right: 2%;
	}
	
	.pagesNav .subNav {
		width: var(--col2-width);
	}
	
	.pageHeader .pagesNav li.active a,
	.pageHeader .pagesNav a:hover {
		text-decoration-color: transparent;
	}

	.pageHeader .pagesNav .kontaktNav {
		margin-top: 1.5em;
	}
	
}



/* desktop */
@media only screen and (min-width: 1000px) {
	.pagesNav .subNav {
		width: 70%;
		margin-right: -10%;
	}
}


/* desktop + */
@media only screen and (min-width: 1200px) {
	.pagesNav .subNav {
		width: 75%;
		margin-right: -15%;
	}
}