html {
  height: 100%;
}
body{background:#333; color:#ccc;font:normal 1em Verdana, Arial, Helvetica, sans-serif;padding:0;min-width:320px;height:100%;}

strong{font-weight:bold;}
em{font-style:italic;}
h1{font-size:2em;text-align:center;margin:0 0 0.5em 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;color:black;}
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;}
.red{color:#c00;}
.grey{color:grey;}

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:disc;margin-left:2.2em;}
input[type=radio], input[type=checkbox], input[type=button], input[type=submit]{cursor:pointer;}

#page{width:100%;max-width:100%;margin:0 auto;min-height: 100%;
  display: flex;
  min-height: 100vh;
  flex-direction: column;  }
.content{max-width:20em;width:100%;margin:0 auto;display:block;}

nav {flex:0;background:rgba(255,255,255,.5);}
nav .content{display: grid;
  grid-template-columns: .5fr 1fr;
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-template-areas:
    "Logo Title";}
nav .content div.logo {grid-area: Logo;padding:.5em 0 .5em 1em;justify-self: start;}
nav .content div.logo img{margin:0 auto;width:10em;height:auto;} 
nav .content .barsmenu{grid-area:Title;widthss:2em;margin:.25em;justify-self: end;align-self: center;font-size:1.6em;color:black;text-align:center;backgroundss:yellow;}

header{flex:1;margin-top:2em;background:white;position:relative;}
header .content .slogan{margin:2em 0 0 0;padding:3em 1.5em;backgroundsss:#e0f0f8;text-align:center;text-shadow: 0 0 8px rgba(255, 255, 255, 1);}
header .content .slogan .strong{font:normal 2em Georgia;text-transform: uppercase;}
header .content .slider{display:none;}

main{flex:1;min-height:10em;margin-top:2em;display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 1em 1em;
  grid-template-areas:
    "Main"
    "Panel";
}

main div.main {grid-area: Main;padding:1em .5em 4em .5em;background:rgba(255,255,255,0);}
main div.main article h1{font-size:2.5em;font-family:Georgia; border-bottom: 5px #ffbcc0 solid;padding: 0 .3em .3em .3em;}
main div.main article p{line-height:1.6em;margin:.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;
  background:white;}
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:#222;color:#CCC;font-size:0.8em;padding-bottom:.25em;margin-top:2em; }
footer a{color:#CCC;}
footer .bottom_menu{display:flex;justify-content:space-around;padding:0.8em 0;font-size:.8em;align-items:center;background:#000;}
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#cookies{background:rgba(0,0,0,.8);bottom: 0; top:0; left: 0; right: 0; position: fixed;z-index:1000;display:none;}
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_2, .cols_5{position:relative;margin:6px 0.5%;float:left;display:block;}
.cols_2{width:99%;}
.cols_5{width:19%;}


img.pentagon {clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);max-width:50vw;height:auto;}
img.circle {clip-path: circle(50% at 50% 50%);max-width:50vw;height:auto;}

table{}
tr{}
td{padding:.5em;vertical-align:middle;}

div.list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 2.5em;
  padding:.75em .5em;}
  
div.list div p{text-align:center;}
div.list div p img{margin:0 auto; width: 90%; height:auto;}

div.apartments_list{
display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr));
grid-gap: 2.5em;
padding:.75em .5em;
}
.apartments_item {padding:1em;grid-column: span 2;text-align:center;}

.apartments_item h2{font-size:1.1em;paddingss:0;font-weight:bold;}
.apartments_item p{line-height:.9em;}
.apartments_item .slider_item, .slider_attraction {filter: drop-shadow(0 0 2px rgba(50, 50, 0, 0.5));margin:2em 0;}
.apartments_item .slider_item div, .slider_attraction div{clip-path: circle(50% at 50% 50%);}

div.articles{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: 2.5em;
padding:.75em .5em;
}


article{
background: white;
color:black;
border-radius: 1em;
padding: .5em 1em;
}

article.archive {
background:#CCC;
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%);
}

article img.article{

float:right;
margin: 0 0 1em 1em;
max-width: 30em;
}

article .aukcja{
color:grey;
font-size: .75em;
}

article h2{
font-size: 1.4em;
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}

article .text{
font-size:.9em;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
text-align:justify;
}

article div.info {
margin-top:2em;
font-size: .8em;
}

article div.info .zaloguj_sie{
float:right;
max-width:6em;
background: lightgrey;
color:black;
border-radius: .7em;
padding: .75em;
text-align:center;
cursor:pointer;
font-size:.9em;
}

div.biddinghistory{
display:table;
}

div.biddinghistory div.header {
display:table-header-group;
}

div.biddinghistory div.row {
display:table-row;
}

div.biddinghistory div.header div, div.biddinghistory div.row div{
display:table-cell;
margin:.25em;
padding: .25em 1em;
}

div.biddinghistory div.header div{
background:orange;
text-align:center;
font-weight:bold;
}

div.biddinghistory div.row div:first{
text-align:right;
}

article > .slider_item{border: .5em rgba(183,150,122,.15) solid;position:relative;display:flex;justify-content:center;align-items:center;margin:0;}
article > .slider_item .over{display:none;z-index:65555;position:absolute;margin: 0 auto;}
article > .slider_item:hover .over{display:block;color:rgba(255,255,255,.5);}

article > ul{column-count:1;column-gap:1em;column-rule: 1px solid #B7967A;margin:0;}
article > ul li{margin-left:2em;line-height:1.5em;}


@media screen and (min-width: 320px){
  .slider_attraction{width: 280px;margin:0 auto;margin-bottom:2em;}
}

@media screen and (min-width: 360px){
  .content{max-width:22.5em;}
  header .content .slogan .strong{font-size:2.2em;}
}

@media screen and (min-width: 390px){
  .content{max-width:24em;}
  header .content .slogan .strong{font-size:2.4em;}
}

@media screen and (min-width: 480px){
.content{max-width:30em;}
nav .content{
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "Logo Title";}
nav .content .contact{display:block;}
header .content .slogan .strong{font-size:2.6em}
}

@media screen and (min-width: 600px){
.content{max-width:37.5em;}
.slider_attraction{float:left;margin:0 2em 2em 0;shape-outside: circle(50%);}
nav .content div.logo img{width:12em;} 
nav .content .barsmenu{font-size:1.8em;}
}

@media screen and (min-width: 760px){
.content{max-width:47.5em;}
nav .content{
  grid-template-columns: 1fr 3fr;}
nav .content .barsmenu{font-size:2em;}
header .content .slogan{padding:4em;}
header .content .slogan .strong{font-size:2em}
.cols_2{width:49%;}  

div.apartments_list{
grid-template-columns: repeat(4, minmax(130px, 1fr));
}
/* Dealing with single orphan */
.apartments_item:last-child:nth-child(2n + 1) {
  /*grid-column-end: 4;*/
}
/*article > ul{column-count:2;}*/
}

@media screen and (min-width: 960px){
.content{max-width:60em;}
nav .content{
  grid-template-columns: 1fr 3fr;
}
nav .content .barsmenu{font-size:2.2em;}
header .content .slogan{margin:2em 1em 2.5em 0;padding:3em 3.5em;positionssss:absolute;z-indexssss:10;widthsss:20em;}
header .content .slogan .strong{font-size:1.8em}
/*header .content .slider{display:block;margin-left:24em;}*/

.slider_attraction{width: 360px;}
}

@media screen and (min-width: 1024px){
.content{max-width:64em;}
nav .content {grid-template-columns: 1fr 7fr;
    grid-template-areas:
    "Logo Title";}
nav .content .barsmenu{font-size:2.5em;}
header .content .slogan{padding:4em 3em;}  

div.apartments_list{
grid-template-columns: repeat(6, minmax(130px, 1fr));
}
.apartments_item {padding:1em;grid-column: span 2;text-align:center;}
/* Dealing with 2 orphan items */
.apartments_item:last-child:nth-child(3n - 1) {
  grid-column-end: -2;
}
.apartments_item:nth-last-child(2):nth-child(3n + 1) {
  grid-column-end: 4;
}
/* Dealing with single orphan */
.apartments_item:last-child:nth-child(3n - 2) {
  grid-column-end: 5;
}
.apartments_item:last-child:nth-child(2n + 1):not:first-child {
/*  grid-column-end: auto;*/
}
/*article > ul{column-count:3;}*/
}

@media screen and (min-width: 1200px){
.content{max-width:75em;}
nav .content {grid-template-columns: 1fr 9fr;
    grid-template-areas:
    "Logo Title";}
nav .content .barsmenu{font-size:2.6em;}
header .content .slogan{padding:5em 3em;font-size:1.3em;emwidthsss:26em;}
header .content .slogan .strong{font-size:2.6em;}  
header .content .slider{margin-left:30em;}

div.apartments_list{
grid-template-columns: repeat(6, minmax(150px, 1fr));
}

}

@media screen and (min-width: 1600px){
nav .content {grid-template-columns: 1fr 13fr;
    grid-template-areas:
    "Logo Title";}
.content{max-width:100em;}
div.articles{
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/*header .content .slogan{min-width:20%;} 
header .content .slider{width:65em;margin-left:35em;} */
/*header .content .slogan{width:36em;}
header .content .slider{margin-left:40em;}*/
}