html,body {height: 100%;}
body{background:#007DBB;color:#1f2120; font: normal 16px 'Lato', sans-serif;padding:0;min-width:320px;}
strong{font-weight:bold;}
em{font-style:italic;}
h1{font-size:2em;text-align:center;margin:0.3em 0;font-family: 'Oswald', sans-serif;}
h2{font-size:1.7em;text-align:center;margin:0.3em 0;font-family: 'Oswald', sans-serif;}
h3{font-size:1.4em;text-align:center;margin-bottom:0.5em;clear:both;}
h4{font-size:1.2em;text-align:center;margin-bottom:0.3em;clear:both;}
h5{font-size:1.1em;text-align:center;margin-bottom:0.2em;clear:both;}
h6{font-size:1em;text-align:center;margin-bottom:0.15em;clear:both;}
a{text-decoration:none;}
p.center{text-align:center;}
div.clear, p.clear, ul.clear{clear:both;}
ul.clear-right{clear:right;}
img{display:block;}
img.res{width:100%;height:auto;}
span.nowrap{white-space: nowrap;}

hr{padding:0;border:none;height:1px;background-image:linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));color:#fff;text-align:center;}
hr.black{background-image:linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));color:#000;}
hr.left{background-image:linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.75));color:#fff;}
hr.right{background-image:linear-gradient(to left, rgba(255,255,255,0.75), rgba(255,255,255,0));color:#fff;}
ol{list-style-type:decimal;margin-left:2.2em;}
ul{list-style-type:circle;margin-left:2.2em;}
input[type=radio], input[type=checkbox], input[type=button], input[type=submit]{cursor:pointer;}

.fsize70{font-size:.7em;}
.fsize80{font-size:.8em;}
.fsize90{font-size:.9em;}
.fsize110{font-size:1.1em;}
.fsize120{font-size:1.2em;}
.fsize130{font-size:1.3em;}
.font-readable{-moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility !important;
  letter-spacing: .05em;}

#page{width:100%;max-width:100%;margin:0 auto;background:white;}

#page-settings{display:flex;justify-content:center;padding:0;}
#page-settings ul{display:flex;align-items:center;list-style-type: none;margin: 0;padding: 0;}
#page-settings ul li.contrast, #page-settings ul li.resizer{display:none;}
#page-settings ul li.label{display:none;margin:.2em;padding:.5em; font-size:.8em;}
#page-settings ul ul {margin:0 .1em;padding:.1em;}
#page-settings button{border:1px #000 solid;margin:.2em;padding:.5em .7em;background:white;cursor:pointer;}
#page-settings button.wcag{color:white;background:blue;border:1px blue solid;margin:.4em;}
#page-settings button.highcontrast-by{color:yellow;background:black;}

header{border-top:1px #ccc solid;
  display: grid;
  grid-template-columns: 12fr 4fr 2fr;
  grid-template-rows: auto;
  gap: 1em;
  grid-template-areas:
    "Logo Carousel BarsMenu";}

div.logo {grid-area: Logo;padding:.25em;}
div.logo img{display:block;margin:0 auto;width:11.5em;height:auto;} 
.carousel{grid-area: Carousel;display:none;backgroundss:yellow;padding:.5em .25em;overflow: hidden;}
.owl-carousel img{height:12em;widthss:auto;}
.barsmenu{grid-area:BarsMenu;width:2em;margin:.25em;justify-self: end;align-self: center;}
.barsmenu i{cursor:pointer;display:block;}




div.messages{margin:.5em 0;padding:.5em 1em;background:#C00;color:white;}


main{min-height:10em;display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 1em;
  grid-template-areas:
    "MainMenu"
    "Main"
    "Panel";}
    
nav{grid-area: MainMenu;displays:none;backgroundss:brown;padding-top:.8em;}
nav #main-menu{display:none;}

article h1{font-size:1.6em;}
article p{line-height:1.3em;margin:.35em 0;hyphens:auto;text-align:justify;}
div.list article h2{border-topss:1px #999 solid;backgroundss:#eee;font-weight:normal;font-size:1.1em;margin:0;padding:.2em .1em;text-align:left;white-space:nowrap;overflow:hidden;	text-overflow: ellipsis;}
div.list article .opis{margin-top:.5em;font-size:.9em;hyphens:auto;}
div.list article .link, .link{margin-top:.5em;text-align:right;font-size:.9em;color:#007DBB;}
    
main div.panel {grid-area: Panel;padding:.25em .5em;border-top:1px solid #999;display: grid; backgroundss:green; 
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
  grid-template-rows: auto;
  gap: .5em;}
main div.panel p {text-align:center;margin:1em .5em;align-self: center;backgroundss:pink;}
main div.panel p img{max-width: 10em;width:100%;height:auto;margin:0 auto;}
    
main p.path{font-family: 'Oswald', sans-serif;font-size: 0.9em; line-height: 2em; color: #666;}
main p.path a {text-decoration: none; color: #666; margin: 0;}

main div.main {grid-area: Main;padding:.25em;backgroundss:blue;}
main div.main .articles{display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19em, 1fr));
  grid-template-rows: auto;
  gap: 1em 1em;
}
main div.main .articles article {border: 0px #ccc solid;hyphens:auto;}
main div.main .articles article .data{text-align:right;padding:.5em;font-size:.8em;font-style:italic; color:#666;}
main div.main article h1{border-top: 1px #666 solid;border-bottom: 1px #666 solid;padding:.3em 0;}
main div.main .articles article h2{border-top:1px #999 solid;background:#ddd;font-weight:bold;font-size:1.2em;margin:0;padding:.2em .4em;text-align:left;white-space:nowrap;overflow:hidden;	text-overflow: ellipsis;}
main div.main .articles article .text{padding:.25em;}
main div.main .articles article .info{
  padding:.5em;
}
main div.main .articles article .info p{
  font-size:.9em; text-align:right; font-style:italic; 
}
main div.main .articles article .info p a {color:black;}

div.list{
  paddingss:.25em .5em;border-topss:1px #999 solid;display: grid; backgroundss:green;
  grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
  grid-template-rows: auto;
  gap: 1em;
}

div.list .listpage{
  padding:2em 1em; hyphens:auto; text-align:justify;font-size:.9em;
}

div.list .listpage p.title{
text-align:center;font-size: 1.4em; font-weightss: bold;margin-bottom: 1em;font-family: 'Oswald', sans-serif;
}

div.tableofcontents {float:left;padding:.8em 1em;margin:0 .5em .5em 0;border:1px grey solid;background:#f8f8f8;}
div.tableofcontents p {text-align:center;font-weight:bold;margin: 0 0 .5em 0;}
div.tableofcontents ol{margin-left:1em;font-size:.9em;}
div.tableofcontents ol li{line-height:1.6em;} 

main div.main article .gallery{margin:1em .25em;display: grid; backgroundss:green;
  grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
  grid-template-rows: auto;
  gap: 1em 1em;}
 
 
main p.stopka{font-size:.9em;text-align:right;font-style:italic;} 

ol.download{list-style-type:none;font-size:.8em;margin:1em 0;display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19em, 1fr));
  grid-template-rows: auto;
  gap: 1em 1em;}
ol.download li {text-align:center;}
/*ol.download li:hover {background: #eee;}*/
ol.download li img {width:40%; max-width:160px; margin: 0 auto;}

article div.tagi{clear: both;margin:1em 0;padding:1em .5em;}
/*article div.tagi a{margin:.25em .5em;padding:.25em .5em;background:white;color:grey;font-size:.8em;}*/
article div.tagi a{
float:left;
	height:2em;
	line-height:2em;
	position:relative;
	font-size:.7em;

  margin:.25em .25em .25em 1.8em;
	padding:0 1em 0 1em;
	background:lightgrey;
	color:white;
	text-decoration:none;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;	
	border-bottom-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-top-right-radius:4px;	
	border-top-right-radius:4px;	}
article div.tagi a:before{
	content:"";
	float:left;
	position:absolute;
	top:0;
	left:-.98em;
	width:0;
	height:0;
	border-color:transparent lightgrey transparent transparent;
	border-style:solid;
	border-width:1em 1em 1em 0;		
	}
	
article div.tagi a:after{
	content:"";
	position:absolute;
	top:10px;
	left:0;
	float:left;
	width:.25em;
	height:.25em;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	background:#fff;
	-moz-box-shadow:-1px -1px 2px grey;
	-webkit-box-shadow:-1px -1px 2px grey;
	box-shadow:-1px -1px 2px grey;
	}
	
article div.tagi a:hover{background:#555;}	

article div.tagi a:hover:before{border-color:transparent #555 transparent transparent;}

.font-readable main div.main .articles article{line-height:1.25em;}



footer{background:#FA7D07;color:#000;font-size:0.8em;margin-top:.5em;padding-bottom:.25em;}
footer a{color:#000;}
footer .bottom_menu{display:flex;justify-content:space-around;padding:0.8em 0;font-size:.8em;align-items:center;background:#209DDB;}
footer .bottom_menu{font-size:1.1em;flex-wrap: wrap;}
footer .bottom_menu a {margin:.4em .5em;}
footer .social .label{display:none;}
footer p.copy{text-align:center;margin:0.4em 0;font-size:1em}

div.gallery{display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 1em;margin:1em 0;}
  
div#cookies{background:rgba(0,0,0,.8);bottom: 0; top:0; left: 0; right: 0; position: fixed;z-index:1000;}
div#cookies div{
background:rgba(255,255,255,1);
}
div#cookies div div{flex: 1;}
div#cookies div div p{padding: .5em 1em;line-height:1.5em;}
div#cookies div div p a{color:#900;}
div#cookies div p#button_cookies{background:rgba(255,255,255,.5); margin: 1em 2em; padding:.5em 1em; border: 1px #900 solid; border-radius: 1em;color:black;font-size:1.2em;cursor:pointer;}
  
.cols_5{position:relative;margin:6px 0.5%;float:left;display:block;font-size:0.95em;font-weight:normal; }
.cols_5{width:19%;}

form p{margin:1em 0;}
form img{display:inline;border: solid #666 1px;vertical-align:middle;}
label{
	position: relative;
	line-height: 1.4;
	color:#333;
}
input[type=text], input[type=email], select, form textarea{width: 98%; border: 1px #CCC solid;font-size:16px;padding:.25em;}
textarea {font-family: inherit;font-size: inherit;resize: none;}
select{width: 99%;}
/* radio */
input[type=radio]{
	width: 1em;
	font-size: inherit;
	margin: 0;
	transform: translateX(-9999px);
}
input[type=radio] + label:before{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 50%;
	background-color: #bbbbbb;
}
input[type=radio] + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 50%;
	transform: scale(0.8);
}
/*checked*/
input[type=radio]:checked + label:before{
	position:absolute;
	content:'';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
}
input[type=radio]:checked + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 50%;
	transform: scale(0.3);
}
/*focused*/
input[type=radio]:focus + label:before{
	border: 0.2em solid #8eb9fb;
	margin-top: -0.2em;
	margin-left: -0.2em;
	box-shadow: 0 0 0.3em #3b88fd;
}
/*checkbox/*/
input[type=checkbox]{
	width: 1em;
	font-size: inherit;
	margin: 0;
	transform: translateX(-9999px);
}
input[type=checkbox] + label:before{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 10%;
	background-color: #bbbbbb;
}
input[type=checkbox] + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 10%;
	transform: scale(0.8);
	
}
/*checked*/
input[type=checkbox]:checked + label:before{
	position:absolute;
	content:'';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
}
input[type=checkbox]:checked + label:after{
	position: absolute;
	content: "\2713";
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
	border-radius: 10%;
	color: white;
	text-align: center;
	line-height: 1;
}
/*focused*/
input[type=checkbox]:focus + label:before{
	border: 0.1em solid #8eb9fb;
	margin-top: -0.1em;
	margin-left: -0.1em;
	box-shadow: 0 0 0.2em #3b88fd;
}
input#captcha{font-size:1em;width:10em;margin:0;}
input[type=submit]{font-size:1.2em;padding:.25em 1.5em;}


.highcontrast, .highcontrast #page, .highcontrast a, .highcontrast footer, .highcontrast main div.main .articles article h2,.highcontrast main div.main .articles article .data{background:black;color:yellow;}

.highcontrast nav, .highcontrast header, .highcontrast main div.main .articles article h2, .highcontrast footer{border-top:1px yellow solid;}
.highcontrast header{border-bottom:1px yellow solid;}

.highcontrast footer .bottom_menu{background:black;border-bottom:1px yellow solid;}

.highcontrast nav .contact a{color:yellow;}

.highcontrast main div.main article h1{border-top: 1px yellow solid;border-bottom: 1px yellow solid;padding:.3em 0;}
.highcontrast main div.main .articles article h2{border-top:1px yellow solid;}

.highcontrast main div.main .articles article .info p a, .highcontrast main p.path, .highcontrast main p.path a {color: yellow;}

.highcontrast #page-settings button{border:1px yellow solid;margin:.2em;padding:.5em .7em;background:black;color:yellow;cursor:pointer;}
.highcontrast #page-settings button.wcag{color:white;background:blue;border:1px blue solid;margin:.4em;}
.highcontrast #page-settings button.highcontrast-by{color:black;background:yellow;}

.highcontrast div.messages{background:black;color:yellow; border:1px yellow solid;}

.highcontrast label{color:yellow;}

.highcontrast form img, .highcontrast input[type=text], .highcontrast input[type=email], .highcontrast form textarea, .highcontrast input[type=submit]{border: solid yellow 1px;color:yellow;background:black;}

.highcontrast div#cookies div{background:black;}
.highcontrast div#cookies > div{border-top: 1px yellow solid;}
.highcontrast div#cookies div div p a{color:yellow;font-weight:bold;}
.highcontrast div#cookies div p#button_cookies{background:black; border: 1px yellow solid; color:yellow;}

@media screen and (min-width: 320px){
  body{backgroundss:red;}

}

@media screen and (min-width: 360px){
  body{backgroundss:blue;}
  header{grid-template-columns: 12fr 6.5fr 2fr;}
  /*div.logo img{margin:0 auto;width:12em;}*/
}

@media screen and (min-width: 390px){
  body{backgroundss:cyan;}
  
  
}

@media screen and (min-width: 480px){
  body{backgroundss:yellow;}
  #page-settings{display:flex;justify-content:flex-end;}
  #page-settings ul li.label{display:block;}
  #page-settings ul ul {border-left: 1px #CCC solid;}
  .highcontrast #page-settings ul ul {border-left: 1px yellow solid;}
  header{grid-template-columns: 12fr 14fr 2fr;}
}

@media screen and (min-width: 600px){
  body{backgroundss:pink;}
  /*header{grid-template-columns: 1fr 2fr .75fr;}*/
  header{grid-template-columns: 12fr 21.5fr 2fr;grid-template-rows: 12em;}
  .carousel{grid-area: Carousel;display:block;}
}

@media screen and (min-width: 760px){
  body{backgroundss:green;}
  header{grid-template-columns: 12fr 31.5fr 2fr;}
}

@media screen and (min-width: 960px){
 body{backgroundss:orange;}
 header{grid-template-columns: 12fr 47fr;}
 .barsmenu{display:none;}
 nav #main-menu{display:block;justify-self: end;}
 main{
  grid-template-columns: 12fr 47fr;
  grid-template-areas:
    "MainMenu Main"
    "Panel Panel";}
 main div.panel p{displayss:block;borders:none;}
}

@media screen and (min-width: 1024px){
  body{backgroundss:purple;}
  header{grid-template-columns: 12fr 51fr;}
}

@media screen and (min-width: 1200px){
  body{backgroundss:olive;}
  #page{width:70em;}
  #page-settings{border-rightss: 1px #CCC solid;}
  header{grid-template-columns: 12fr 62fr;}
  main{grid-template-columns: 12fr 56fr;}
}

@media screen and (min-width: 1600px){
  body{backgroundss:brown;}
  #page{width:90em;}
  header{grid-template-columns: 12fr 87fr;}
  main{grid-template-columns: 12fr 62fr 12fr;
  grid-template-areas:
    "MainMenu Main Panel";
  }
  main div.panel{display:block;border:none;}
  main div.panel p{display:inline;}
}