@media (min-width:1280px){
	html { }
	segment { padding-left:calc(50% - 40rem); padding-right:calc(50% - 40rem); }
	segment#kontakt > div { padding-left:calc(50vw - 40rem); padding-right:calc(50vw - 40rem); margin-left:calc(40rem - 50vw); margin-right:calc(40rem - 50vw); }
}

@media (max-width:1119px){
	header a#menu { display:block; position:absolute; left:auto; right:2.5em; top:50%; width:5rem; height:5rem; margin:0; padding:0; z-index:20; cursor:pointer; }
	header a#menu > span { display:block; width:4rem; height:0.4rem; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--black); transition:0.3s opacity 0.2s; }
	header a#menu:before,
	header a#menu:after { content:' '; position:absolute; left:0.5rem; top:1rem; width:4rem; height:auto; border-bottom:0.4rem solid var(--black); transition:transform 0.3s, 0.3s top 0.2s, border-color 0.5s; }
	header a#menu:after { top:3.6rem; }
	header a#menu.show:before,
	header a#menu.show:after { transform:rotate(-45deg); top:2.5rem; transition:0.3s transform 0.2s, top 0.3s, border-color 0.5s; }
	header a#menu.show:after	{ transform:rotate(45deg); }
	header a#menu.show > span { opacity:0; transition:0.25s opacity 0.01s; }
	header a#menu + nav { right:0; top:5rem; }
	header a#menu + nav > a { display:block; line-height:3rem; padding:0 3rem; background:var(--white); height:0; overflow:hidden; white-space:no-wrap; transition:height 0.3s; }
	header a#menu.show + nav > a { height:3rem; }
	header a#menu.show + nav > a:last-child { height:4rem; }
}

@media (max-width:959px) and (min-width:500px) {
	segment#okoli > div.boxes { display:block; }
	segment#okoli > div.boxes > div { display:block; margin-bottom:2rem; padding-bottom:0; text-align:left; width:calc(100vw - 6rem); }
	segment#okoli > div.boxes > div > h3 { position:absolute; left:12.5rem; top:2rem; text-align:left; }
	segment#okoli > div.boxes > div > span { float:left; margin-right:2rem; }
	segment#okoli > div.boxes > div > p { text-align:left; margin-top:3.5rem; }
	segment#okoli > div.boxes > div > ul { display:block; text-align:center; position:static; clear:both; border-top:1px dashed var(--light); }
	segment#okoli > div.boxes > div > ul > li { display:inline-block; border:none; }
	segment#okoli > div.boxes > div > ul > li + li { border:none; }
}

@media (max-width:839px){
	segment#byty > ul > li > ul > li > span:nth-child(1) { width:2.5rem; }
	segment#byty > ul > li > ul > li > span:nth-child(2) { width:5rem; }
	segment#byty > ul > li > ul > li > span:nth-child(3) { width:4rem; }
	segment#byty > ul > li > ul > li > span:nth-child(4) { width:4.5rem; }
	segment#byty > ul > li > ul > li > span:nth-child(5) { width:calc(100% - 2.5rem - 5rem - 4rem - 4.5rem - 10rem); }
	
	div.foto { width:calc(100vw - 3rem); height:calc(66.66vw - 4rem + 42vw - 2.5rem); }
	div.foto > a.main { width:calc(100vw - 6rem); height:calc(66.66vw - 4rem); }
	div.foto > a.small { width:calc(16.666vw - 1rem); height:calc(16.666vw - 1rem); margin:calc(4.166vw - 0.25rem); margin-left:0; margin-bottom:0; }

	segment#kontakt > div > div,
	segment#kontakt > div > div + div { display:block; margin:2rem auto; max-width:calc(100vw - 5rem); }
}

@media (max-width:649px){
	segment#byty > ul > li.show > ul { max-height:16rem; }
	segment#byty > ul > li > ul > li { white-space:normal; text-align:left; }
	segment#byty > ul > li > ul > li:first-child > span:nth-child(5):before { display:none; }
	segment#byty > ul > li > ul > li > span:nth-child(4) { width:calc(100% - 2.5rem - 5rem - 4rem - 8rem); }
	segment#byty > ul > li > ul > li > span:nth-child(5) { display:inline; margin:0 0 0 5rem; padding:0; font-size:0.8rem; }
}

@media (max-width:499px){

	header a#logo { left:1rem; max-width:calc(100vw - 11rem); } 
	header a#logo > img { max-width:100%; }
	header a#menu { right:0.7rem; }
	header a#menu + nav > a { padding-right:1.7rem; padding-left:1.7rem; }
	segment { padding-left:1rem; padding-right:1rem; }

	segment#intro > div > h1,
	segment#intro > div > h2 { font-size:13vw; }

	segment#byty > ul > li > ul > li:first-child > span:nth-child(4):before { display:none; }
	segment#byty > ul > li > ul > li > span:nth-child(3) { width:calc(100% - 2.5rem - 5rem - 6rem); text-align:left; white-space:nowrap; }
	segment#byty > ul > li > ul > li > span:nth-child(4) { width:7rem; margin:0 0 0 5rem; padding:0; font-size:0.8rem; }
	segment#byty > ul > li > ul > li > span:nth-child(5) { margin-left:0; }
/*	segment#byty > ul > li > ul > li > span:nth-child(5):not(:empty):before { content:', '; margin-left:-0.3rem; } */
	segment#byty > ul > li > ul > li { text-align:left; }

	
	div.foto { width:calc(100vw - 1rem); height:calc(66.66vw - 1.333rem + 42vw - 1.2rem); }
	div.foto > a.main { width:calc(100vw - 2rem); height:calc(66.66vw - 1.333rem); }
	div.foto > a.small { width:calc(20vw - 0.8rem); height:calc(20vw - 0.8rem); margin:0.5rem 0.5rem 0 0; }

	segment#okoli > div.boxes { display:block; margin:2rem 0 0 0; }
	segment#okoli > div.boxes > div { display:block; width:calc(100vw - 5rem); margin-bottom:2rem; padding-bottom:1.5rem; }
	segment#okoli > div.boxes > div > ul { position:static; }
}


@media (hover:hover){  
	header > nav > a:hover { color:var(--red); text-decoration:none; }


	segment#byty > ul > li > h4:hover { color:var(--red); }
	segment#byty > ul > li > ul > li:hover { background:var(--white); color:var(--black) }
	segment#okoli > div.boxes > div:hover { color:var(--white); }
	segment#okoli > div.boxes > div:hover > span { background-color:var(--white) !important; }
	segment#okoli > div.boxes > div:hover > ul > li { color:var(--white); border-color:var(--white); }
	segment#okoli > div.boxes > div:nth-child(1):hover { background:#a0ce4e; }
	segment#okoli > div.boxes > div:nth-child(2):hover { background:#e9967a; }
	segment#okoli > div.boxes > div:nth-child(3):hover { background:#777777; }
	segment#okoli > div.boxes > div:nth-child(1):hover > span:before { color:#a0ce4e; border-color:#a0ce4e; }
	segment#okoli > div.boxes > div:nth-child(2):hover > span:before { color:#e9967a; border-color:#e9967a; }
	segment#okoli > div.boxes > div:nth-child(3):hover > span:before { color:#777777; border-color:#777777; }
	segment#kontakt > div > div > p > a:hover { color:var(--red); }
	segment#mapa:hover { background-size:150% auto; }
	
	div.foto > a:hover > img { filter:brightness(150%); }
	
}

@media (max-aspect-ratio:1/1){  
	segment#mapa { max-height:100vw; background-size:auto 100%;  }
}

@media (max-aspect-ratio:1/1) and (hover:hover){  
	segment#mapa:hover { background-size:auto 150%;  }
}