/*wspólne ustawienia*/

/*45,86,118 padding menu w tych liniach sprawdzić i poprawić*/
nav{
	font-family: Poppins-Bold;
	text-align: center;
	text-transform: uppercase;
}
nav a{
	text-decoration: none;	
}
nav>ul{
	border: 0px solid rgb(100,100,100,.8);
	border-radius: calc(var(--margin) / 2);
	text-align: center;
	width: 100%;
}
nav ul, nav li ul{

	list-style-type: none;
		/*background-color: rgba(2,68,68,.08);*/
	color: rgba(255,255,255,.88);
	font-size: inherit;
	line-height: inherit;
	padding: 1rem 0;
}
nav ul, nav li ul{
	/*background-color: var(--hover-color);*/
}
nav ul>li {
	color: white;
	text-align: center;
}
nav ul>li>ul li {
	display: block;
	color: white;
	text-align: center;
}
nav ul>li>a{
	color: inherit;
}

.subnav-content{
	padding: calc(1.5 * var(--padding)) 0;
}
.subnav-content>li>a{
	/*padding: 0 calc(1.5 * var(--padding));*/
}
nav>ul>li:before{
	/*padding: var(--padding) 0;
	width: 100%;*/
}
nav .subnavbtn {
	background-color: inherit;
	border: none;
	color: white;
	font-family: inherit;
	font-size: 1.6rem;
	margin: 0;
	outline: none;
	padding: 14px 16px;
}
.subnav:hover .subnavbtn {
	background-color: var(--background-color-light);
	margin: 0;
	padding: var(--padding);
}
li a {
	color: white;
}
.subnav-content>li>a, .subnav-content>li>a:hover {
	display: inline-block;
	/*transition-delay: 1s;*/
}
nav li:hover {
	background-color: var(--background-color-light);
	color: var(--hover-color);
}
/*pełna szerokość menu*/
@media screen and (min-width: 1506px){
	.navbar{
		display: inline-block;
	}
	.trigger{
		display: none;
	}
	nav>ul>li>a, .subnav-content, nav li span{
		padding: calc(1.5 * var(--padding));
		/*transition-delay: 1s;*/
	}	
	nav ul>li {
		display: inline-block;
		font-size: 1.6rem;
	}	
	
	nav>ul>li:before{
		border-right: 1px solid white;
		content:"";
		padding: var(--padding) 0;
		width: 100%;
	}
	nav>ul>li:first-child:before{
		border-right: 0 !important;
		content:"";
		padding: var(--padding) 0;
		width: 100%;
	}
	li>ul{
		background-color: var(--background-color-middle);
		display: none;/*tutaj ukryj !!! - none*/
		margin-top: var(--padding);
		position: absolute;
		z-index: 20;
	}
	li:hover>ul{
		display: block;
		overflow: hidden;
	}
	.subnav-content > li > a {
		/*padding: 0 calc(1.5 * var(--padding));*/
	}
	nav li>span:hover {
		background-color: var(--background-color-light);
		color: var(---color-hover);
	}
}
/*ograniczona szerokość menu*/
@media screen and (max-width: 1505px){
	.navbar{
		display: inline-block;
		/*display: none;*/
	}
	.trigger{
		/*display: inline-block;*/
		display: none;
	}
	nav ul>li>a, nav>ul>li>a:hover, .subnav-content{
		padding: calc(1.5 * var(--padding));
	}		
	nav li span{
		padding-top: calc(1.5 * var(--padding));
		color: var(--hover-color);
	}
	nav ul>li{
		display: block;
		font-size: 3rem;		
	}
	nav ul>li:before {
		border-top: 1px solid white;
		content:"";
		display: block;
		padding: 0;
	}	
	nav li>ul>li:before{
		border-top: 1px dotted white;
	}
	nav ul>li>a, nav ul>li>span{
		display: block;
		font-size: inherit;
	}
	nav ul>li>a{
		width: calc(100% - (2 * var(--padding)));
	}
	nav ul>li:first-child:before{
		border-top: 0px !important;
		content:"";
		display: block;
		padding: 0;
	}
	/*
	li>ul {
		display: none;
	}
	li:hover>ul{
		display: block;
		overflow: visible;
	}*/
	.subnav-content > li > a {
		padding: calc(1.5 * var(--padding));
	}		
}
@media screen and (max-width: 480px){
	nav ul > li {
		font-size: 1.5rem;
		hyphens: auto;
	}
	nav ul > li a{
		text-align: center;
		hyphens: auto;
	}
}