@import url('https://fonts.googleapis.com/css2?family=Bellefair&family=Poltawski+Nowy:ital,wght@0,400..700;1,400..700&family=Quicksand:wght@300..700&display=swap');

html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {font: normal 1.24em/1.4em "Times New Roman", serif; background:#ddd;}
header {position:relative;}
header img {position:relative;z-index: 10; width:100%; height:auto; border-bottom: 2px solid #000;}
#hbox {
position:absolute;
top:0;
padding: 5px 20px;
z-index: 1000;
}
header h1 {
font: bold 40px/46px "Bellefair", serif;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
color:#fff;
}
h2 {font: bold 24px/30px "Times Roman", serif; color:#259; margin: 0.5em;}
h3 {font: bold 20px/24px "Bellefair", serif; color:#259; margin: 0.5em;}

#main {max-width:54em; margin:-30px auto -25px auto; z-index: 50; position:relative; background:#fff; border-radius: 8px;}
#main h1 {
padding: 5px 12px;
font-family: "Poltawski Nowy", serif;
font-optical-sizing: auto;
background:#024;
color:#fff;
font-weight: 500;
border-radius: 8px 8px 0 0;
font-size: 22px;
font-style: normal;
}
#main p {
padding: 12px;
font-family: "Poltawski Nowy", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;
}
#main a, footer a {color: #057;}
#main a:hover, footer a:hover {color: #940; text-decoration:none;}


.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

img {max-width:100%; height:auto;}
b, strong {font-weight:bold;}
i, em {font-style:oblique;}
.ctr {text-align:center;}

.lfloat50 {float:left; max-width:50%; margin:0 1em 1em 0.5em;}
.rfloat50 {float:right; max-width:50%; margin:0 0.5em 1em 1em}

ul#bottomlinks {text-align:center; padding: 1em;}
ul#bottomlinks li {display:inline-block;padding: 6px 10px;}

footer {text-align:center; background:#eee; padding:2em 1em;}
footer img {margin:4px; display: inline-block;}
@media screen and (max-width: 47em) {
	header h1 {font-size:24px; line-height:30px;}
	#main p{font-size:16px;}
}
@media screen and (max-width: 37em) {
	header h1 {font-size:18px; line-height:22px;}
}
@media screen and (max-width: 32em) {
	header h1 {font-size:14px; line-height:18px;}
}



.nav {
  position: relative;
}

.nav ul {list-style:none;}
.nav ul li {padding: 0 0 2px 10px;}
.nav a, #menu a:visited {color:#fff; font: normal 20px/20px "Quicksand", serif; text-decoration:none;}
.nav a:hover {color:#ff9;}
.nav a:before {content:'\2023'; margin-right:6px; color:#0fc;}
.nav a:hover:after {content:'\2192'; margin-left:6px;}
.nav a#active:before {content:'\2023'; margin-right:6px; color:#fd0; font-size:1.4em}
.nav a#active:after {content:'\2192'; margin-left:6px;}

.nav > .nav-btn {
  display: none;
}

.nav > .nav-links {
  display: inline;
  float: left;
  font-size: 18px;
}

.nav > .nav-links > a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
}

.nav > .nav-links > a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.nav > #nav-check {
  display: none;
}

@media (max-width:910px) {
	.nav ul {margin:0.3em;}
	.nav ul li {0 0 14px;}
  .nav > .nav-btn {
    display: inline-block;
	/*
    position: absolute;
    right: 0px;
    top: 0px;
	*/
  }
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px 13px 13px 0;
	cursor:pointer;
  }
  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 3px solid #eee;
  }
  .nav > .nav-links {
    position: absolute;
    display: block;
    width: 12em;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav > .nav-links > a {
    display: block;
    width: 100%;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }
  .nav > #nav-check:checked ~ .nav-links {
  /*  height: calc(100vh - 50px); */
	height: 240px;
    overflow-y: auto;
  }
}