/*
body { height:100vh; perspective:300px; transform-style: preserve-3d; }
segment { background:#fcc; min-height:100vh; }
segment:nth-child(2n) { background:#cfc; }

segment#intro { padding:0; width:100vw; height:100vh; background:url('../img/donska-12-foto.jpg') 50% 50% no-repeat;background:none;  background-size:cover; }
segment#intro > div { background:rgba(64,64,64,0.5); height:10rem; width:100vw; position:absolute; top:50%; margin-top:-5rem; }
segment#intro > div > h1,
segment#intro > div > h2 { font-size:4rem; display:block; height:100%; text-align:center; line-height:1.1em; position:absolute; top:50%; left:0; width:calc(100% - 4rem); padding:0 2rem; transform:translateY(-50%);  margin:0; height:auto; }

segment#intro { transform-style: preserve-3d; }
segment#intro > div { transform:translateZ(-1000px); }
*/

body { overflow-y: auto;height:100vh;perspective: 300px;}
/*body:before{ content:'';background:linear-gradient(0deg,#96B6CB,#96B6CB,#73a2c2,#407da7,#153e58,#0a2638), url(sky.jpg) no-repeat 100%; background-blend-mode: screen; position: absolute; top:0; left: 0; width:100vw; height: 900vh;}*/

aside { display:block; height: 100vh; transform-style: preserve-3d;	}
aside span { position:absolute; left:0; top:0; width:100vw; height:100%; display: block; transform: translateZ(-300px) scale(2); background:url('../img/donska-12-foto.jpg') 50% 50% no-repeat; background-size:cover; }
aside.okoli { position:absolute; min-height:100vh; }
aside.okoli span { background:url('../img/havlickovy.jpg') 50% 50% no-repeat; background-size:cover; }
aside.intro { /*max-height:960px;*/ }

segment { position:relative; z-index:2; padding:8rem 3rem 3rem; margin-bottom:-5rem; }
segment h2 { text-align:center; }

segment#intro { padding:0; position:absolute; top:0; left:0; width:100vw; height:100vh; background:url('../img/donska-12-foto.jpg') 50% 50% no-repeat; background:none;  background-size:cover; }
segment#intro > div { background:rgba(64,64,64,0.5); height:10rem; width:100vw; position:absolute; top:50%; margin-top:-5rem; overflow:hidden; }
segment#intro > div > h1,
segment#intro > div > h2 { font-size:4rem; display:block; height:100%; text-align:center; line-height:1.1em; position:absolute; top:50%; left:0; width:calc(100% - 4rem); padding:0 2rem; transform:translateY(-50%);  margin:0; height:auto; animation: intro 8s infinite alternate; }
segment#intro > div > h2 { top:calc(50% + 10rem); }
@keyframes intro {
   0% 	{	margin-top:0; }
  42% 	{	margin-top:0; }
  58% 	{	margin-top:-10rem; }
 100% 	{	margin-top:-10rem; }
}

header { position:sticky; top:0; left:0; width:100vw; height:5rem; background:var(--white); z-index:10; }
header > a { position:absolute; left:3rem; top:50%; transform:translateY(-50%); }
header > a > img { display:block; width:19rem; }
header > a#menu { display:none; }
header > nav { display:block; position:absolute; right:2rem; top:0; text-align:right; }
header > nav > a { display:inline-block; padding:1.75rem 1rem; font-size:1.25rem; line-height:1.5rem; color:var(--dark); text-transform:uppercase; transition:color 0.3s; text-decoration:none; }

div.foto { display:block; height:400px; margin-bottom:2rem; overflow:hidden; margin-top:3rem;  }
div.foto > a { display:block; float:left; width:120px; height:120px; margin:0 0 20px 20px; }
div.foto > a.main { height:400px; width:600px; margin:0; }
div.foto > a > img { display:block; width:100%; height:100%; transition:filter 0.3s; }
div.foto > a:hover > img { filter:brightness(150%); }
	

segment#byty { background:var(--gray); color:var(--white); z-index:9; }
segment#byty > ul { display:block; margin-top:3rem; max-width:50rem; margin-left:auto; margin-right:auto; }
segment#byty > ul > li { display:block; margin-bottom:0.25rem; }
segment#byty > ul > li > h4 { display:block; font-size:1.25rem; text-align:center; margin:0; background:var(--white); color:var(--black); text-transform:uppercase; position:relative; z-index:2; cursor:pointer; transition:color 0.3s; font-weight:normal; line-height:2rem; }
segment#byty > ul > li > h4:before { content:'+'; width:1rem; text-align:center; display:block; position:absolute; right:0.5rem; top:0; }
segment#byty > ul > li > ul { display:block; overflow:hidden; max-height:0; transition:max-height 0.3s; background:var(--black); }
segment#byty > ul > li > ul > li { display:block; white-space:nowrap; background:#ddd; color:var(--dark); transition:color 0.3s, background-color 0.3s; padding-bottom:0.5rem; }
segment#byty > ul > li > ul > li:nth-child(2n) { background:#bbb; }
segment#byty > ul > li > ul > li > span { display:inline-block; margin-left:1rem; padding:0.5rem 0.5rem 0; position:relative; }
segment#byty > ul > li > ul > li > span:nth-child(1) { width:5rem; text-align:center; margin-left:0; }
segment#byty > ul > li > ul > li > span:nth-child(2) { width:6rem; text-align:left; }
segment#byty > ul > li > ul > li > span:nth-child(3) { width:6rem; text-align:left; padding-right:1.5rem; }
segment#byty > ul > li > ul > li > span:nth-child(4) { width:6rem; text-align:left; }
segment#byty > ul > li > ul > li > span:nth-child(5) { width:calc(100% - 5rem - 6rem - 6rem - 6rem - 10rem); text-align:left; }
segment#byty > ul > li > ul > li.obsazeny > span:nth-child(4) { color:var(--red); }
segment#byty > ul > li > ul > li:first-child { margin-top:2.2rem; }
segment#byty > ul > li > ul > li:first-child > span:before { position:absolute; left:0; top:-2.2rem; padding:0.5rem; width:100%; background:var(--black); color:var(--white); font-size:0.8rem; }
segment#byty > ul > li > ul > li:first-child > span:nth-child(1):before { content:'Jednotka'; }
segment#byty > ul > li > ul > li:first-child > span:nth-child(2):before { content:'Dispozice'; }
segment#byty > ul > li > ul > li:first-child > span:nth-child(3):before { content:'Výměra'; }
segment#byty > ul > li > ul > li:first-child > span:nth-child(4):before { content:'Dostupnost'; }
segment#byty > ul > li > ul > li:first-child > span:nth-child(5):before { content:'Vybavení'; }
segment#byty > ul > li.show > ul { max-height:11rem; }
segment#byty > ul > li.show > h4:before { content:'-'; }

/*segment#foto { background:var(--black); color:var(--white; z-index:8; ) }*/


segment#sluzby { background:var(--white); color:var(--black); z-index:7; }

segment#okoli { display:block; transform-style: preserve-3d; z-index:6; margin-bottom:0; }
/* segment#okoli:before { display:block; content:''; position:absolute; left:0; top:0; width:100vw; height:100vh; transform:translateZ(-300px) scale(3); background:url('../img/havlickovy.jpg') 50% 50% no-repeat; background-size:cover; } */
segment#okoli > span { position:absolute; left:0; top:0; width:100vw; height:100vh; transform:translateZ(-300px) scale(3); background:url('../img/havlickovy.jpg') 50% 50% no-repeat; background-size:cover;  }
segment#okoli > h2 { text-shadow:0 0 0.5rem var(--black); }
segment#okoli > p { background:rgba(0,0,0,0.75); padding:1.5rem; margin:0 -1.5rem 0; }
segment#okoli > p + p { padding-top:0; }

segment#okoli > div.boxes { display:flex; margin:3rem -1.5rem 0; width:calc(100% + 3rem); gap:1.5rem; align-items:stretch; justify-content:space-between; }
segment#okoli > div.boxes > div { background:var(--white); color:var(--dark); padding:1.5rem; width:20rem; flex-grow:1; padding-bottom:7.5rem; position:relative; transition:color 0.3s, background-color 0.3s; }
segment#okoli > div.boxes > div > h3 { font-size:2rem; text-transform:none; text-align:center; }
segment#okoli > div.boxes > div > span { display:block; position:relative; font-size:6rem; width:8rem; height:8rem; padding:0.5rem; margin:0 auto 2rem; text-align:center; border-radius:2em; }
segment#okoli > div.boxes > div > span:before { display:block; position:absolute; border-radius:2em; width:8rem; height:8rem; line-height:8rem; color:var(--white); border:0.25rem solid var(--white); top:50%; left:50%; transform:translate(-50%,-50%); transition:color 0.3s, border-color 0.3s; }
segment#okoli > div.boxes > div > p { text-align:center; }
segment#okoli > div.boxes > div > ul { display:block; position:absolute; bottom:1rem; left:0.75rem; right:0.75rem; }
segment#okoli > div.boxes > div > ul > li { display:block; padding:0.5rem 0.75rem; color:var(--light); font-weight:bold; text-align:center; transition:color 0.3s, border-color 0.3s; }
segment#okoli > div.boxes > div > ul > li + li { border-top:1px dashed var(--light); }

segment#okoli > div.boxes > div:nth-child(1) > span { background:#a0ce4e;  }
segment#okoli > div.boxes > div:nth-child(2) > span { background:#e9967a;  }
segment#okoli > div.boxes > div:nth-child(3) > span { background:#777777;  }

segment#kontakt { color:var(--black); z-index:7; }
segment#kontakt > div { display:block; background:var(--gray); color:var(--white); padding:3rem; margin:-3rem; text-align:center; padding-bottom:6rem; }
segment#kontakt > div > div { display:inline-block; width:18rem; background:var(--white); color:var(--black); text-align:left; padding:1.5rem; margin-top:3rem; }
segment#kontakt > div > div + div { margin-left:3rem; }
segment#kontakt > div > div > p > a { display:block; padding-left:1.5rem; position:relative; text-decoration:none; transition:color 0.3s; }
segment#kontakt > div > div > p > a:before { display:block; position:absolute; left:0; top:0; width:1rem; text-align:right; }


segment#mapa { height:100vh; max-height:50vw; background:url('../img/donska-12-mapa-v3.png?v=2') 50% 50% no-repeat; background-size:100% auto; transition:background-size 0.5s; z-index:6; margin-top:5rem; padding:0; }
segment#mapa:before { display:block; font-size:2rem; position:absolute; bottom:50%; left:50%; width:1em; height:1em; text-align:center; line-height:1em; color:var(--red); margin-left:-0.5rem;  }
segment#mapa > a { display:block; position:absolute; left:0; top:0; width:100%; height:100%; }

footer { display:block; padding-top:8rem; background:var(--black); text-align:center; padding-bottom:3rem; }
footer > h2 { margin-bottom:0.5rem; }
footer > p { margin:0; }


/*segment { opacity:0.5; }*/