@charset 'utf-8';

/*
 * author: Václav Nováček
 * email:  kartelus [at] gmail [dot] com
 * © 2022
 */

:root {
	
	--color-black: hsl(0, 0%, 0%);
	--color-blue: hsl(205, 93.6%, 75%);
	--color-bluest: rgb(55 162 218);
	--color-gold: hsl(50.6, 100%, 50%);
	--color-red: hsl(0, 100%, 32.2%);
	--color-green: #080;
	--color-white: hsl(0, 0%, 100%);
}

html
{
	transition: 1.2s filter;
	scroll-behavior: smooth;
}

body
{
	color: #333;
	font: .8175em/1.5 'Open Sans', 'Noto Sans', 'Roboto', sans-serif;
	margin: 0;
	min-height: 100vh;
	padding: 1rem;
	position: relative;
	overflow-y: visible;
}

body::before {
	content: '';
	background: url("bg-alkar-3d.webp") 50% no-repeat fixed;
	background-size: cover;
	top:0;
	left:0;
	bottom:0;
	right:0;
	position: fixed;
	z-index: -1;
}

html.dark {
  	filter: invert(1) hue-rotate(180deg);
}

a { color: #080; }
a svg { transition: filter .5s; }
a:hover { color: black;}
a:hover svg { filter: saturate(0); }

a.btn,
button
{
  background: green;
  border:0;
  border-radius: .25em;
  color: #fff;
  font-size: 1rem;
  font-style: inherit;
  padding: .5em 1.5em;
}

caption { text-align: center; white-space: nowrap }
caption em { color: black; font-style: normal; }

header { min-height: 91vh; }
/* header { text-shadow: 0 0 1px #b7bab7, 0 0 2px #b7bab7, 0 0 3px #b7bab7 } */
header .logo { font-size: 1.5em }
header .logo em { color: #3d4742; font-style: normal; }

img {
	max-width: 100%;
	vertical-align: bottom;
}

main { background: rgba(255,255,255,.8); padding: 2rem; }
main em { color: #070; font-style: normal; }


footer {
  text-shadow: 0 0 1px #e6e7e4, 0 0 2px #e6e7e4, 0 0 3px #e6e7e4

}
footer .wrapper {
  border-radius:100%;
  float: right;
  height: 300px;
  overflow: hidden;
  width:300px;
}

nav {
	position: fixed;
	right: 1em;
	top: 0;
	z-index: 3;
}
nav ul {
	background: hsla(105, 2.9%, 72.9%, .75);
	margin: 0;
	padding: 0;
}

caption,
/* h1, */
h2
{
	color: #008000
}

hr
{
	background: linear-gradient(90deg, transparent, hsl(34.5, 21.3%, 43.3%), transparent);
	border: 0;
	height: 1px;
	margin: 1em 0;
}

h1,
h2
{
	font-size: 1.25em;
	margin-top: 0; 
}


nav li a
{
	display: block;
}


p:first-of-type
{
	margin-top: 0
}

table {
	border-collapse: collapse;
	font-size: inherit;
}

tbody { background: hsl(120, 2.7%, 92.7%)/*; border: 1px solid hsla(34.5, 21.3%, 43.3%, .334)*/ }

tbody th { text-align: right }
tbody.fix-th th { min-width: 18em }

tbody th, tbody td,
tfoot th, tfoot td 
{
	padding: .25em .75em;
	vertical-align: top;
}

tbody tr { transition: background .5s; }
tbody tr:nth-child(2n-1) { background: rgba(0, 0, 0, .08) }

#dark-mod
{
	background: hsla(105, 2.9%, 72.9%, .75);
	border-radius: 0 0 .5em .5em;
	padding: .25em .5em;
	position: fixed;
	transition: .5s left;
	text-align: center;
	top: 0;
	width: 7em;
	z-index: 3;
}

#go-to-top
{
	background: #080;
	bottom: 0;
	color: #fff;
	font-size: 1.125rem;
	padding: .15em .75em;
	position: fixed;
	right: 0;
	z-index: 4;
}

#ico-nav {
	background:hsla(0,0%,100%, .5);
	display:none;
	height:46px;
	width:46px;
	text-indent:-50px;
	overflow:hidden;
	position:relative
}
#ico-nav::after, #ico-nav::before {
	background:#646464;
	box-shadow:0 -6px 0 #646464,0 6px 0 #646464;
	display:block;
	content:"";
	position:absolute;
	height:2px;
	width:22px;
	left:12px;
	top:23px;
	transform:rotate(0);
	transition:.4s
}

a[data-price]
{
	position: relative;
	font-weight: 400;
}

a[data-price]::after
{
	content: attr(data-price) ' Kč';
	display: block;
	position: absolute;
	white-space: nowrap;
	top: 1em;
	left: 0;
	visibility: hidden;
	opacity: 0;
	transition: .5s top, .5s opacity;
}

a[data-price]:hover::after
{
	opacity: 1;
	visibility: visible;
	top: 2em;
}

a[data-price] small {
	color: #000
}

a[data-price]::before {
	content: '/';
	display: inline-block;
	color: #bbb;
	font-size: 1.5em;
	margin: 0 .25em;
	vertical-align: middle;
}

a[data-price]:first-of-type::before {
	display: none
}

.details { list-style: none; text-align: center; padding: 0 2rem; }
.details > li { display: inline-block; width: 32%; text-align: left; padding: 0 0 2rem 0; margin-right: -4px; vertical-align: top; }
.details strong { color: #000; background: #fff; }

.copyright
{
/*	color: rgb(245, 222, 179); */
	margin-bottom:- 2rem;
	padding-top: .5rem;
	text-align: center;
}

.develop
{
  background: linear-gradient(90deg, var(--color-red) 80%, transparent);
  bottom: 0;
  color: var(--color-white);
  left: 0;
  line-height: 2.5;
  margin: 0;
  left: 0;
  text-align: center;
  padding: 0 4em 0 1em;
  position: fixed;
  z-index: 1;
}

.hide, [hidden] {
	display: none
}


.gallery {
	margin:0 -2rem 2rem
}
.gallery h4 {
	left: 2rem;
	position: absolute;
	line-height: 2;
	margin: 0;
	top: 1rem;
	z-index: 2;
}

.gallery hr {
	margin: 0
}

.gallery .floor {
	position:relative;
}
.gallery .render {
	transition: .7s opacity;
}

.gallery .scratch {
	bottom: .5rem;
	position: absolute;
	width: 30%;
	right: .5rem;
	transition: .7s width, .7s transform;
}

/* .gallery .floor:focus .render, */
.gallery .floor:hover .render
{
	opacity: .2
}

/* .gallery .floor:focus .scratch, */
.gallery .floor:hover .scratch
{
	width: 85%;
	transform: rotate(12deg);
}


.loader::after {
	content: '';
	animation: spin 2s linear infinite;
	border: 16px solid rgba(0,0,0,.1);
	border-top: 16px solid green;
	border-radius: 50%;
	height: 10em;
	position: fixed;
	width: 10em;
	z-index: 2;
	top: calc( 50% - 5em);
 	left: calc( 50% - 5em);
}

.logo-jbc {
	float:left;
/* 	height: 3rem; */
	width: 18rem;
	padding: 0 2em 2em 0;
}
.logo-mapy {
	margin-top: -4rem;
	position: absolute;
}

.logo-mapy svg {
	height: 1.5em;
}

.logo-reality {
	height: 3em;
	float: right;
	margin-right: -12em;
	margin-top: 1em
}



.mt-0 { margin-top: 0 }

li.no-order {
	list-style-type: none;
}


@keyframes b { 0% { transform:translate3d(0, -100%, 0); visibility:visible; opacity:0 } to { transform:translateZ(0); opacity:1 }}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@media only screen and (min-width:1024px)
{
  .gallery-2 img {
	width: 48%
  }
}

@media only screen and (min-width:768px)
{
	footer,
	header,
	main
	{
		margin: 0 auto;
		max-width:72em;
	}

	footer {
		margin-top: 40vh;
	}

	nav li::before {
		content: '/';
		display: inline-block;
		font-size:1.5em;
		vertical-align: middle;
	}
	nav li a {
		padding: .5em
	}

	nav li:first-of-type::before {
		display: none
	}

	nav li,
	nav li a
	{
		display: inline-block;
		vertical-align: middle;
	}

	#dark-mod {
		left: calc(33% - 4em);
	}


	table {
		top: 2rem;
		right: 2rem
	}

	.fr-0022 {
		float: right;
		margin: 0 0 2em 2em;
	}

	.page.address
	{
		background: linear-gradient(90deg, rgba(245, 222, 179, .66), rgb(245, 222, 179) 20%, rgba(245, 222, 179,.85));
		border-radius: 0 .5rem .5rem 0;
		border-left: 1px solid rgba(0, 0, 0, .334);
	}
}

@media only screen and (max-width:767px)
{
	nav li { display: block; }
	nav li a { padding: .75em 1em; }

	#dark-mod {
		left: calc(50% - 4em);
	}

	#ico-nav {display:block }

	#toggle-nav:checked ~ label::before {box-shadow:none; transform:rotate(-45deg) }
	#toggle-nav:checked ~ label::after {box-shadow:none; transform:rotate(45deg) }
	#toggle-nav~ul {max-height:0; opacity:0; display:block; width:100%; transition:max-height .4s,opacity .4s; overflow:hidden; border-bottom:.25em solid #c54442; position:relative; right:0 }
	#toggle-nav:checked~ul {max-height:40em; opacity:1; background:#fff; box-shadow:.75em .75em 1em -.5em rgba(0,0,0,.25); margin-top:0 }
	#toggle-nav:checked~ul>li>* {border-bottom:1px solid rgba(0,0,0,.1) }

	.details li {
		display: block;
		width: 100%;
	}
}

@media print
{
	@page { size: A4 landscape }

	html { background:none }
	body, main { padding:0 }

	a, a:visited { text-decoration:underline }
	a[href]:after { content:" (" attr(href) ")" }
	a[href^='#']:after, a[href^='javascript:']:after { content:'' }

	h1, h2 { page-break-after:avoid }

	img { max-width:100%!important }
	img, tr {page-break-inside:avoid; page-break-after:auto }

	nav, footer, header { display:none }
	thead {display:table-header-group }
}