h1, h2, h3, h4, h5, h6{
	font-size: 10dvw; line-height: 1.3; text-align: center; margin-top: 4dvw
}
h2{font-size: 6dvw; margin-top: 2dvw }
h3{font-size: 3dvw;  margin-top: 2dvw }
h4{font-size: 3.5dvw;  margin-top: 2dvw }
h5{font-size: 3.5dvw;  margin-top: 2dvw }
h6{font-size: 3.5dvw; }
p, a, span, label, input, textarea, li{
  font-size: 3.5dvw	;line-height: 1.5; 
}
ul{padding-left: 4dvw}

img{border-radius: .5dvw}

.separator{display: block; width: 100%; height: 4dvw}
.hero>div{flex-direction: column; gap: 4dvw;}
section{padding: 4dvw}
.info{margin-top: 4dvw;margin-bottom: 2dvw;}

.view-flex{display: flex; flex-direction: row; flex-wrap: wrap; justify-items: center; justify-content: center ;gap: 2dvw}
.view-flex>div{margin-top: 4dvw; display: flex; flex-direction: column; ;}
.view-flex>div .btn{position: relative; align-self: center; justify-self: end; margin-bottom: 0; margin-top: auto; width: 100%}
.view-flex>div>div{display: flex; flex-direction: column; gap: 4dvw; padding: 2dvw}
.view-flex.mc2>div{
 	width: calc(50% - 2dvw);
}
.tc3 .pc4 .l_mob_3{}
.mob_2{grid-template-columns: 1fr 1fr}
.mob_3{grid-template-columns: 1fr 1fr 1fr}

header{display: flex; position: sticky; align-content: center;align-items: center; gap: 4dvw;
	top: 0; left: 0; width: 100%; height: 16dvw; background-color: var(--color-white); z-index: 10}
header>.btn{grid-area: btn; align-self: center; position: absolute; right: 16dvw;top: -.5dvw}
header>.logo{grid-area: logo; width: 12dvw; height: 12dvw; margin-left: 2dvw}


/** 
 *
 *  NAWIGACJA 
 *  
 **/
#nav_open{display: none;}
#lbl_nav_open, #lbl_nav_close, #lbl_nav_close_filter{grid-area: nav_control; display: block; position: absolute; width: 8dvw; height: 8dvw; right: 4dvw; top: 4dvw; z-index: 2}
#lbl_nav_open>span{display: block; position: absolute; width: 100%; height: 0; border: solid 1px var(--color-primary); top: 0; transition: all .5s; z-index: 2}
#lbl_nav_close>span{display: block; position: absolute; width: 100%; height: 0; border: solid 1px var(--color-primary); top: 50%; transition: all .5s}
#lbl_nav_close_filter>span{display: block; position: absolute; width: 100%; height: 0; border: solid 1px var(--color-primary); top: 100%; transition: all .5s}
#nav_open:checked ~#lbl_nav_open>span{border: solid 2px var(--color-primary); transform: rotate(45deg); top: 50%; }
#nav_open:checked ~#lbl_nav_close>span{border: solid 2px var(--color-primary); transform: rotate(-45deg); top: 50%; }
#nav_open:checked ~#lbl_nav_close_filter>span{width: 0%; border: solid 0px red}
#nav_open:checked ~#lbl_nav_close_filter{top: 0; left: 0; width: 100%; height: 100dvh}

.mnu_primary{position: absolute; top: 100%; left: -200%; width: 100%; background-color: var(--color-white); z-index: 5; transition: all .5s; overflow-x: auto; max-height: 80dvh}
.mnu_primary ul{background-color: var(--color-white);padding: 0; margin: 0;}
.mnu_primary li ul{height: 0dvw; overflow: hidden; transition: all .5s;}
.mnu_primary li ul li a{padding-left: 8dvw}
.mnu_primary li:hover ul{height: auto;margin: 0; background-color: var(--color-white)}
.mnu_primary li{display: block; margin: 0; padding: 0}
.mnu_primary li a{border-bottom: solid 1px var(--color-primary); display: block; padding: 3dvw; margin: 0; color: var(--color-primary); font-weight: bold}
.mnu_primary{border-top: solid 1px var(--color-primary); }
#nav_open:checked ~.mnu_primary{left: 0}

.ps-breadcrumbs{padding: 0 4dvw}
.ps-breadcrumbs :where(a, span, ul, li) {font-size: 3dvw; }
.ps-breadcrumbs a{color: blue;}


.team-member-info{
	display: flex; flex-direction: column; gap: 4dvw
}
.team-member-info>div:last-of-type{display: flex; flex-direction: column; gap: 4dvw}


.pagination{display: flex; height: fit-content; text-align: center; padding: 2dvw 4dvw; gap: 4dvw; justify-content: center; align-items: center}
.pagination :where(a, span, div){}
.pagination a:not(.prev):not(.next), .pagination span{display: flex; font-size: 4dvw; width: 9dvw; height: 9dvw; line-height: 1; padding: 2dvw;border: solid 1px; border-radius: 50%; align-content: center; justify-content: center}



footer{display: flex; flex-direction: column; background-color: var(--footer-background); padding: 0dvw 4dvw; gap: 4dvw}
footer>div{border-bottom: solid 1px #2a2a2a; padding: 8dvw 0}
footer>div img{width: 40dvw; height: auto;}
footer :where(a, p, div, h4){color: var(--color-white)}


/**
 * ORIENTACJA POZIOMA
 **/
@media (orientation: landscape) {
	h1, h2, h3, h4, h5, h6{
		font-size: 5dvw; line-height: 1.3; text-align: center; margin-top: 2dvw
	}
	h2{font-size: 3dvw; margin-top: 1dvw }
	h3{font-size: 2dvw;  margin-top: 1dvw }
	h4{font-size: 2dvw;  margin-top: 1dvw }
	h5{font-size: 2dvw;  margin-top: 1dvw }
	h6{font-size: 2dvw; }
	p, a, span, label, input, textarea, li{
  	font-size: 2dvw	;line-height: 1.5; 
	}
	header{height: 8dvw}
	header>.btn{padding: 1dvw 4dvw; top: -2.5dvw}
	header>.logo{width: 8dvw; height: 8dvw; margin-left: 1dvw}
	#lbl_nav_open, #lbl_nav_close, #lbl_nav_close_filter{grid-area: nav_control; display: block; position: absolute; width: 4dvw; height: 4dvw; right: 2dvw; top: 2dvw;}
	.hero{height: auto;}
	.view-flex.l_mob_2>div{	width: calc(50% - 1dvw)}
	.view-flex.l_mob_3>div{	width: calc(33% - 2dvw)}
	.view-flex{gap: 2dvw}
	.view-flex>div>div{display: flex; flex-direction: column; gap: 1dvw; margin-bottom: 2dvw}
	.hero .video-background, .hero video, .hero .video-background-filter{height: 120dvh}
	
	.ps-breadcrumbs :where(a, span, ul, li) {font-size: 1.5dvw; }
	
	footer{display:  grid; grid-template-columns: 1fr 1fr; }
	footer>div{padding: 2dvw 0}
	.team-member-info{display: grid; grid-template-columns: 1fr 2fr}
	.team-member-info>div:last-of-type{gap: 1dvw}
	.team-member-info :where(h2, h3){text-align: left}
	.team-member-info h2{margin-top: -1dvw}
}


/**
 * ORIENTACJA PIONOWA TABLET
 **/
@media screen and (min-width: 800px) {
	h1, h2, h3, h4, h5, h6{
		font-size: 7dvw; line-height: 1.3; text-align: center; margin-top: 2dvw
	}
	h2{font-size: 4dvw; margin-top: 1dvw }
	h3{font-size: 2dvw;  margin-top: 1dvw }
	h4{font-size: 2dvw;  margin-top: 1dvw }
	h5{font-size: 2dvw;  margin-top: 1dvw }
	h6{font-size: 2dvw; }
	p, a, span, label, input, textarea, li{
  	font-size: 2dvw	;line-height: 1.5; 
	}
}