html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

a {
	text-decoration: none;
}

.material-icons { font-variant: normal; } /* naprawa błędy ikon material */

/* Zmienne */
:root {
	--kolor-tla: #333; 
	--kolor-liter: white;
	--kolor-1: #ffcc00;

	--kolor-linkow: #ffcc00;
	--kolor-darker: rgb(0, 0, 0, 0.5);
}

/************/
html, body { height: 100%; }

body.zx {
	font-family: 'Dosis', sans-serif;
	color: var(--kolor-liter);
	background-color: var(--kolor-tla);
}

img.size { width: 100%; height: 100%; }

.h1 {
	font-size: 6.625rem;
	font-weight: 300; 
	letter-spacing: -1.5px;
	line-height: 1.25;
}

.h2 {
	font-size: 4.125rem;
	font-weight: 300; 
	letter-spacing: -0.5px;
	line-height: 1.25;
}

.h3 {
	font-size: 3.3125rem;
	font-weight: 400; 
	letter-spacing: 0px;
	line-height: 1.25;
}

.h4 {
	font-size: 2.375rem;
	font-weight: 400; 
	letter-spacing: 0.25px;
	line-height: 1.25;
}

.h5 {
	font-size: 1.625rem;
	font-weight: 500; 
	letter-spacing: 0.15px;
	line-height: 1.25;
}

.h6 {
	font-size: 1.375rem;
	font-weight: 400; 
	letter-spacing: 0.15px;
	line-height: 1.25;
}

.subtitle1 {
	font-size: 1.125rem;
	font-weight: 400; 
	letter-spacing: 0.15px;
	line-height: 1.25;
}

.subtitle2 {
	font-size: 0.9375rem;
	font-weight: 500; 
	letter-spacing: 0.1px;
	line-height: 1.25;
}

.body1 {
	font-size: 1.125rem;
	font-weight: 400; 
	letter-spacing: 0.5px;
	line-height: 1.25;
}

.body2 {
	font-size: 0.9375rem;
	font-weight: 400; 
	letter-spacing: 0.25px;
	line-height: 1.25;
}

.button1 {
	font-size: 1.125rem;
	font-weight: 500; 
	letter-spacing: 1.25px;
	line-height: 1.25;
	text-transform: uppercase;
}

.button2 {
	font-size: 0.9375rem;
	font-weight: 500; 
	letter-spacing: 1.25px;
	line-height: 1.25;
	text-transform: uppercase;
}

.caption {
	font-size: 0.8125rem;
	font-weight: 400; 
	letter-spacing: 0.4px;
	line-height: 1.25;
}

.overline {
	font-size: 0.6875rem;
	font-weight: 400; 
	letter-spacing: 1.5px;
	line-height: 1.25;
	text-transform: uppercase;
}

/************/
.margin-left   {margin-left: 1.0rem; }
.margin-right  {margin-right: 1.0rem; }
.margin-bottom {margin-bottom: 1.0rem; }
.margin-top    {margin-top: 1.0rem; }

.padding-left   {padding-left: 1.0rem; }
.padding-right  {padding-right: 1.0rem; }
.padding-bottom {padding-bottom: 1.0rem; }
.padding-top    {padding-top: 1.0rem; }
.padding		{padding: 1.0rem; }

/************/
.hr {
	border-top: 2px solid gray; height: 0.7rem; width: 100%; margin-top: 0.7rem;
}

/****************************/

/* Hover różne rodzaje */
:hover {border: none; outline: 0;}
.hover-bright:hover { box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.2); }

/* Focus różne rodzaje ???? */
.focus-bright:focus { box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.4); }

/* Selected różne rodzaje */
.selected       { box-shadow: inset 0 0 100px 100px rgba(255, 204, 0, 0.2); }
.selected:hover { box-shadow: inset 0 0 100px 100px rgba(255, 204, 0, 0.4); }

/* Kolory */
.zx-kolor-1 		{ color: var(--kolor-1); }
.zx-kolor-1-bg 		{ background-color: var(--kolor-1); }

.zx .zx-yellow 		{ color: var(--kolor-1); }
.zx .zx-yellow-bg 	{ background-color: var(--kolor-1); }

.zx .zx-red 		{ color: #f64c3e; }
.zx .zx-red-bg 		{ background-color: #f64c3e; }

.zx .zx-green 		{ color: #87db2f; }
.zx .zx-green-bg 	{ background-color: #87db2f; }

.zx .zx-blue 		{ color: #6d95ec; }
.zx .zx-blue-bg 	{ background-color: #6d95ec; }

.zx .zx-magenta 	{ color: #ac448c; }
.zx .zx-magenta-bg 	{ background-color: #ac448c; }

.zx .zx-orange 		{ color: #f7941e; }
.zx .zx-orange-bg 	{ background-color: #f7941e; }

.zx .zx-gray 		{ color: #aaaaaa; }
.zx .zx-gray-bg 	{ background-color: #aaaaaa; }

.zx .zx-white 		{ color: white; }
.zx .zx-white-bg 	{ background-color: white; }

.zx .zx-darker-bg 	{ background-color: rgb(0, 0, 0, 0.2); }
.zx-panel-bg		{ background-color: rgba(0, 0, 0, 0.5); }

/* NEW */
/* Kontenery pozycja */
.flex { display: flex; flex-wrap: wrap; align-content: flex-start; overflow-x: hidden; overflow-y: hidden;}
.row  { flex-direction: row; }
.col > div { width: 100%; min-width: 100%;}

.nowrap 	{ flex-wrap: nowrap; }

.row-LG {flex-direction: row; justify-content: flex-start; 	align-content: flex-start; }
.row-CG {flex-direction: row; justify-content: center;		align-content: flex-start; }
.row-PG {flex-direction: row; justify-content: flex-end; 	align-content: flex-start; }

.row-LC {flex-direction: row; justify-content: flex-start; 	align-content: center; }
.row-CC {flex-direction: row; justify-content: center; 		align-content: center; }
.row-PC {flex-direction: row; justify-content: flex-end; 	align-content: center; }

.row-LD {flex-direction: row; justify-content: flex-start; 	align-content: flex-end; }
.row-CD {flex-direction: row; justify-content: center; 		align-content: flex-end; }
.row-PD {flex-direction: row; justify-content: flex-end; 	align-content: flex-end; }

.col-G {flex-direction: column; justify-content: flex-start; } 	/* Prawdopodobnie będzie zbędne */						 
.col-C {flex-direction: column; justify-content: center; } 	/* Prawdopodobnie będzie zbędne */							 
.col-D {flex-direction: column; justify-content: flex-end; } 	/* Prawdopodobnie będzie zbędne */	

.scroll-x {overflow-x: auto; }
.scroll-y {max-height: 100%; overflow-y: auto; }

.text-center {text-align: center; }
.relative {position: relative; }
.height100 {height: 100%} 

/* Kontener rozmiary */
.max360px { width: 22rem; max-width: 22rem; min-width: 22rem; }
	@media (max-width: 420px) {
		.max360px { width: 100vh; max-width: 100vh; min-width: 17rem; }
	}

.max720px { width: 44rem; max-width: 44rem; min-width: 20rem; }

/* Kontener inne */
.hidden { display: hidden; }
.click  { cursor: pointer; }
	
/* END */

.toolbar56px-icon {	font-size: 1.5rem; width: 3.5rem; height: 3.5rem; padding: 1rem; }

/* Poniżej do likwidacji */

.zx h1 {
	font-size: 2.0rem;
	line-height: normal;
	font-weight: 800;
	letter-spacing: 0;
	font-variant: small-caps;
	margin: 2.0rem 0 0 0;
}

.zx h2 {
	font-size: 1.6rem;
	line-height: normal;
	font-weight: 700;
	letter-spacing: 0;
	font-variant: small-caps;
	margin: 1.6rem 0 0 0;
	opacity: 0.5;
}

.zx h3 {
	font-size: 1.3rem;
	line-height: normal;
	font-weight: 400;
	letter-spacing: 0;
	font-variant: small-caps;
	margin: 1.3rem 0 0 0;
	opacity: 0.85;
}

.zx p {
	font-size: 1.1rem;
	font-weight: 400;
	text-align: justify;
	margin: 0.65rem 0 0 0;
	width: 100%;
	line-height: 170%;
}

.zx-icon {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

.zx a {color: var(--kolor-1);}
.zx a:hover {
	filter: brightness(120%);
}

.zx .hover:hover, .zx .hover:focus{
	filter: brightness(120%);
	/*background-color: rgba(255, 255, 255, 0.2);*/
	border: none;
	outline: 0;
}




.zx-row {
	display: flex;
	flex-direction: row;
	justify-content: flex-start; /* Od prawej */
	align-items: center; /* Na środku ---- */
}

.zx-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;  /* Od góry */
	align-items: center; /* Na środku | */
}

.zx-warp 	{ flex-wrap: wrap; }
.zx-nowarp 	{ flex-wrap: nowrap; } 

.zx-center  { display: flex; justify-content: center; align-items: center;} 


/************/
@media (min-width: 420px) {
	#my_screen_background {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		
		background-image: url(/images/bg_main_page/darker_01.png), url(/images/bg_main_page/bg_01.jpg);
		background-position: top right, top left;
		background-repeat: repeat-y, no-repeat;
		background-attachment: fixed, fixed;
		background-size: 1500px 800px, cover;
		
		z-index: -1000;
	}
}

/************/
.zx-viewport {
	display: none;
	height:100vh;
	max-height:100vh;
	width: 100vw;
	max-width:100vw;
	overflow: hidden;
	padding-top: 56px;
}

.zx-viewport-content {	
	display: flex;
	height:100%;
	max-height:100%;
	width: 100%;
	max-width:100%;
	overflow: hidden;
	position: relative;
}

#zx-viewport-www {
	display: inherit;
}

/* Ekrany komputerów (większe niż 1080 szerokości) */
.zx-panel-1 { /* LISTA */
	max-width: 360px;
	min-width: 360px;
	height: 100%;
	width: 360px;
	overflow: hidden;
	position: relative;
	left: 0px;
	order: 2;
	z-index: 0;
	display: flex;
	flex-direction: column;
}

.zx-panel-2 { /* SZCZEGÓŁY */
	width: 740px;
	min-width: 360px;
	height: 100%;
	overflow: hidden;
	position: relative;
	left: 0px;
	order: 3;
	z-index: 20;
	display: flex;
	flex-direction: column;
}

.zx-panel-3 { /* FILTR */
	max-width: 360px;
	min-width: 360px;
	width: 360px;
	height: 100%;
	overflow: hidden;
	position: relative;
	left: 0px;
	order: 1;
	z-index: 30;
	display: flex;
	flex-direction: column;
}

/* TABLETY */
@media (min-width: 640px) and (max-width: 1079px) {
/*	.zx-viewport-content {	
		justify-content: left;
	}*/
	
	.zx-panel-1 {
		max-width: 360px;
		min-width: 360px;
		width: 360px;
		position: relative;
		left: 0px;
	}
	
	.zx-panel-2 {
		width: 720px;
		min-width: 280px;
		position: relative;
		left: 0px;
	}
	
	.zx-panel-3 {
		max-width: 360px;
		min-width: 360px;
		width: 360px;
		position: absolute;
		left: -360px;
	}
}

@media (max-width: 639px) {
	.zx-panel-1 {
		width: 100vw;
		min-width: 100vw; 
		max-width: 100vw;
		height: 100%;
		position: absolute;
		left: 0px;
	}
	.zx-panel-2 {
		width: 100vw;
		min-width: 100vw;
		max-width: 100vw;
		height: 100%;
		position: absolute;
		left: 100vw;
	}
	
	.zx-panel-3 {
		width: 100vw;
		min-width: 100vw;
		max-width: 100vw;
		height: 100%;
		position: absolute;
		left: -100vw; 		
	} 
}

/************* To niżej do usunięcia ************/





.zx-scroll {
	height: 100%; 
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

.zx-noscroll {
	height: 100%;
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
}

/*
.zx-goto-panel-1 {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3.75rem;
	height: 3.75rem;
}*/

/************/

.zx-content-360px {
	display:flex;
	align-items: top;
	min-width: 280px;
	max-width: 360px;
	width: 360px;
}

.zx-content-720px {
	display:flex;
	flex-wrap: warp;
	min-width: 280px;
	max-width: 720px;
	width: 720px;
}

.zx-content-300px {
	display:flex;
	align-items: top;
	min-width: 300px;
	max-width: 300px;
	width: 300px;
}

.zx-content-100proc {
	width: 100%;
}

.zx-content-50proc {
	width: 50%;
}

/************/
.zx-margin-left   {margin-left: 1.0rem; }
.zx-margin-right  {margin-right: 1.0rem; }
.zx-margin-bottom {margin-bottom: 1.0rem; }
.zx-margin-top    {margin-top: 1.0rem; }

.zx-padding-left   {padding-left: 1.0rem; }
.zx-padding-right  {padding-right: 1.0rem; }
.zx-padding-bottom {padding-bottom: 1.0rem; }
.zx-padding-top    {padding-top: 1.0rem; }
.zx-padding		   {padding: 1.0rem; }

/************/
.zx-hr {
	border-top: 2px solid gray; height: 0.7rem; width: 100%; margin-top: 0.7rem;
}

/************/
.zx-img {
	width: 100%;
	height: 100%;
	min-height: 100%;
	min-width:100%;
}

/************/
.zx-logo-pion {
	padding: 0;
	height: 10rem;
	margin: 1rem;
	background-image: url('/images/logo/logo-black-pion.svg');
	background-position: top left;
    background-repeat: no-repeat;
	background-size: cover;
}

/************/
#persona-filter {
	display: flex;
	justify-content:flex-start;
	min-height: 100%;
}

/************/
.zx-toolbar {
	display:flex; 
	flex-direction: row;
	justify-content: left;
	height: 3.5rem;
	min-height: 3.5rem;
	z-index: 1000;
}

.zx-toolbar button {
	font-size: 1.5rem; 
}


/************/
.zx-toolbar button {
	width: 3.5rem;
	height: 3.5rem;
	display:flex; 
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background-color: transparent;
	color: white;
	border: none;
	outline: 0;
	padding: 0.5rem;
	transition: background-color 0.5s;
}

.zx-toolbar button:hover {
	background-color: rgb( 100, 100, 100, 0.5);
	color: var(--kolor-1);
}

.zx-toolbar button:focus {
	background-color: transparent;
	color: white;
}

.zx-toolbar button:active {
	background-color: rgb( 100, 100, 100, 0.5);
	color: var(--kolor-1);
}


.zx-toolbar-input-group {
	display:flex; 
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	width: 11.25rem;
	height: 3.5rem;
	overflow: hidden;
	background-color: transparent;
	color: white;
	border: none;
	padding: 0.5rem 0.5rem 0rem 0.5rem; 
	position: relative; 
}

.zx-toolbar-label {
	
}

.zx-toolbar-input {
	background-color: rgba(0, 0, 0, 0.25); 
	padding: 0 2rem 0 2rem;
	width: 100%;
	height: 2rem;
	border: none;
	color: white;
	font-size: 1rem;
}

.zx-toolbar-input:hover, .zx-toolbar-input:focus{
	background-color: rgba(255, 255, 255, 0.2);
	border: none;
	outline: 0;
}	

.zx-toolbar-input-underline {
	display: block;
	position: relative;
	top: -0.5rem;
	left: 0;
	width: 100%;
	height: 0.5rem;
	border-bottom: 2px solid var(--kolor-1) ;
	border-right: 2px solid var(--kolor-1) ;
	border-left: 2px solid var(--kolor-1) ;
}

.zx-toolbar-search-icon {
	position: absolute;
	left: 0.75rem;
	top: 27%;
	color: gray;
	font-size: 1.5rem; 
}

.zx-toolbar-clear-icon {
	position: absolute;
	right: 0.75rem;
	top: 35%;
	color: gray;
	display: none;
	cursor: pointer;
}

.zx-toolbar-title {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	font-weight: 700;
	padding: 0 1rem 0 1rem;
	color: gray;
	border-left: dotted 2px rgb(255, 255, 255, 0.2);
}

@media (min-width: 640px) {
	.zx-toolbar .backbutton {
		display: none;
	}
}

@media (min-width: 1080px) {
	.zx-toolbar .filterbutton {
		display: none;
	}
}

.speech-bubble {
	display: none;
	position: absolute;
	left: 2rem;
	top: 4.5rem;
	width: 18.5rem;
	min-height: 2rem;
	background: #FFFFFF;
	color: black;
	border-radius: .4em;
	z-index: 1100;
	box-shadow: 0 5px 8px rgba(0,0,0,0.35), 0 5px 8px rgba(0,0,0,0.5);
	padding: 1rem;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 30%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-bottom-color: #FFFFFF;
	border-top: 0;
	border-left: 0;
	margin-left: -10px;
	margin-top: -20px;
}

.speech-bubble div.bubble {
	display: flex;
}

.speech-bubble span.text {
	padding-left:0.55rem;
	font-weight: 700;
	font-size: 1rem;
}