body{background:#fff;color:#000;font:normal 1em Verdana, Arial, Helvetica, 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;}
h2{font-size:1.8em;text-align:center;margin:0.3em 0;}
h3{font-size:1.6em;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;}

nav{border-top:1px #ccc solid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-template-areas:
    "Logo BarsMenu"
    "Contact Contact"
    "MainMenu MainMenu";}

nav div.logo {grid-area: Logo;padding:.25em;}
nav div.logo img{margin:0 auto;width:9.5em;height:auto;} 
nav #clouds {grid-area:Clouds;max-width:26em;min-height:7em;opacity:.5;display:none;backgrounds:grey;}
/*nav div.menu {grid-area: Menu;align-self: start;}*/
nav .contact{grid-area: Contact;font-size:.8em;margin:.5em .5em 3em .5em;display:none;justify-self: end; }
nav .contact i {font-size:1.7em;}
nav .contact a{color:black;}
nav .barsmenu{grid-area:BarsMenu;width:2em;margin:.25em;justify-self: end;align-self: center;}
nav .barsmenu i{cursor:pointer;display:block;}
nav #main-menu{grid-area: MainMenu;display:none;}

header{border-top:1px #ccc solid;border-bottom:1px #ccc solid;}

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 1em;
  grid-template-areas:
    "Main"
    "Panel";}
    
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;}
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 #999 solid;border-bottom: 1px #999 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.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 0;display: grid;
  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{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;}

main div.panel {grid-area: Panel;padding:1em .5em;border-top:1px #999 solid;display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
  grid-template-rows: auto;
  gap: 1em;}
main div.panel p {text-align:center;margin:1em 1em;align-self: center;}
main div.panel p img{max-width: 9em;width:100%;height:auto;margin:0 auto;}

footer{background:#ccc;color:#000;font-size:0.8em;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:#999;}
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{backgrounds:red;}

}

@media screen and (min-width: 360px){
  body{backgrounds:blue;}
  nav{grid-template-columns: 1.5fr 2fr;}
  nav div.logo img{margin:0 auto;width:12em;}
}

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

@media screen and (min-width: 480px){
  body{backgrounds: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;}
  nav{grid-template-columns: 1fr 1.5fr .5fr;
  grid-template-areas:
    "Logo Clouds BarsMenu"
    "Contact Contact Contact"
    "MainMenu MainMenu MainMenu";}
  nav #clouds {display:block;}
}

@media screen and (min-width: 600px){
  body{backgrounds:pink;}
  nav{grid-template-columns: 1fr 2.25fr .5fr;}
  /*nav div.menu {justify-self: end;padding:.5em;}*/
  nav #clouds {margin-left:2em;}
  
}

@media screen and (min-width: 760px){
  body{backgrounds:green;}
  nav{grid-template-columns: 1fr 3.25fr .5fr;}
  nav #clouds {margin-left:4em;}
}

@media screen and (min-width: 960px){
 body{backgrounds:orange;}
 nav{grid-template-columns: 1fr 5fr;grid-template-areas:
    "Logo BarsMenu"
    "Logo Contact"
    "Logo MainMenu";}
 nav .contact{display:block;}
 nav .barsmenu{display:none;}
 nav #main-menu{display:block;justify-self: end;}
 nav #clouds {display:none;}
 main{
  grid-template-columns: 4fr 1fr;
  grid-template-areas:
    "Main Panel";}
 main div.panel {display:block;border:none;}
}

@media screen and (min-width: 1024px){
  body{backgrounds:purple;}
  nav{grid-template-columns: 1fr 5.4fr;}
}

@media screen and (min-width: 1200px){
  body{backgrounds:olive;}
  #page{width:70em;}
  #page-settings{border-rightss: 1px #CCC solid;}
  nav{grid-template-columns: 1fr 6fr;}
}

@media screen and (min-width: 1600px){
  body{backgrounds:brown;}
}


/*
.content{position:relative;width:19.5rem;min-width:19.5rem;max-width:99.5rem;margin:0 auto;padding:.5rem .25rem;}

nav{position:relative;background:#f8f8f8;background: url("/img/tlo.png");border-bottom:1px #ccc solid;}
nav .content {padding:0;width:20rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-template-areas:
    "Logo"
    "TopBar"
    "Menu";}
nav .content div.logo {grid-area: Logo;padding:.25em;}
nav .content div.logo img{margin:0 auto;} 
nav .content .topslogan{grid-area:Slogan;display:none;align-items:center;}
nav .content .topslogan span{flex:1;text-align:center;}
nav .content .topbar{grid-area: TopBar;border-top:1px #bbb solid;display:flex;align-items:center;width:100%;font-size:1.2em;}
nav .content .menu {grid-area: Menu;}
nav .content .topbar .barsmenu, nav .content .topbar .dotsmenu {width:2em;margin:.25em;text-align:center;}
nav .content .topbar .barsmenu i, nav .content .topbar .dotsmenu i {cursor:pointer;display:block;}
nav .content .topbar .slogan {flex:1;text-align:center;}
nav .content .topmenubox{floatsss: right;display:none;background: #fff;border-top:1px #bbb solid;text-align:center;font-size:1.5em;}
nav .content .menubox{display:none;background: #ddd;}
nav .content .topmenubox a, nav .content .menubox a{display:block;color: black; padding: .75em;
  text-decoration: none;
  font-size: 1.2em; 
  line-height: 1.6em;
  border-top:1px #bbb solid;}
nav .content .topmenubox a{display:inline;border:none;}
nav .content .topmenubox a.disabled, nav .content .menubox a.disabled{display:none;}
nav .content .menubox a:hover {
  background:#eee;
}

nav .content .menubox a.active {
  background-color: dodgerblue;
  color: white;
}

header{background:white;}
.path{font-size:0.9em;text-align:center;margin-bottom:1em;}
.path a{text-decoration:none;margin:0 0.6em;color:#000;}


main{background:white;color:#222;min-height:160px;}
main p{margin:0.5em 0;}
main a{color:#222;}
main a:hover{color:#666;}
main .content p{hyphens: auto;}


footer{background:#222;color:#eee;font-size:0.8em;bottom:0;left:0;right:0;}
footer a{color:#eee;}
footer .social, footer .bottom_menu{display:flex;justify-content:space-around;margin:0.8em 0 .8em 0;font-size:.8em;align-items:center;}
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.8em 0;font-size:1em}

.wraper2{display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); grid-gap: .5em;}
.wraper4{display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-gap: .5em;}
.wraper5{display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: .5em;}
.wraper6{display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: .5em;}
.wraper_photo{display: grid; grid-template-columns: repeat(auto-fill, minmax(166px, .5fr)); grid-gap: .5em;}
*/