:root {
	--unit: 1.7rem;
	--size-small: calc(var(--unit) / 2);
	--size-medium: calc(var(--unit));
	--size-large: calc(var(--unit) * 2);

	--color-primary: #fff;
	--color-on-primary: #3d3d3d;

	--color-text: #3d3d3d;
	--color-muted: #888;
	--color-pale: #ddd;
}
@media ( min-width: 500px ) {
	:root {
		--unit: 2rem;
	}
}

*, *:before, *:after {
	box-sizing: border-box;
}

html {
	text-rendering: optimizeLegibility;
	font-family: 'Roboto', sans-serif;
	font-size: calc(var(--unit) * .5);
	line-height: 1.4;
	-webkit-text-size-adjust: 100%;
}
html, body, div, img {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	zoom: 1;
}
html,
body {
	height: 100%;
	color: var(--color-text);
	background: #fdfdfd;
}

.text-align-left    { text-align: left !important; }
.text-align-center  { text-align: center !important; }
.text-align-right   { text-align: right !important; }
.text-align-justify { text-align: justify !important; }

.position-relative {position: relative !important}
.position-absolute {position: absolute !important}
.position-fixed {position: fixed !important}
.position-static {position: static !important}
.position-sticky {position: sticky !important}

.width-initial {width: initial;}
.width-full {width: 100%;}
.width-content {width: 800px;}
.height-full {height: 100%;}

.display-block {display: block !important;}
.display-inline-block {display: inline-block !important;}

.flex {
	display: flex !important;
	align-items: flex-start;
}
.flex-center {
	justify-content: center;
}
.flex-align-center {
	align-items: center !important;
}
.flex-stretch-content {
	align-content: stretch;
	align-items: stretch;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-1 {flex: 1 1 0}
.flex-2 {flex: 2 1 0}
.flex-3 {flex: 3 1 0}
.flex-4 {flex: 4 1 0}
.flex-5 {flex: 5 1 0}
.flex-6 {flex: 6 1 0}
.flex-7 {flex: 7 1 0}
.flex-8 {flex: 8 1 0}
.flex-9 {flex: 9 1 0}
.flex-10 {flex: 10 1 0}
.flex-11 {flex: 11 1 0}
.flex-12 {flex: 12 1 0}

/* potential fix for some overflow issues */
.flex-1,
.flex-2,
.flex-3,
.flex-4,
.flex-5,
.flex-6,
.flex-7,
.flex-8,
.flex-9,
.flex-10,
.flex-11,
.flex-12 {
	min-width: 0;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* some IE haxxorz */
	.flex-1{flex: 1 1 auto}
	.flex-2{flex: 2 1 auto}
	.flex-3{flex: 3 1 auto}
	.flex-4{flex: 4 1 auto}
	.flex-5{flex: 5 1 auto}
	.flex-6{flex: 6 1 auto}
	.flex-7{flex: 7 1 auto}
	.flex-8{flex: 8 1 auto}
	.flex-9{flex: 9 1 auto}
	.flex-10{flex: 10 1 auto}
	.flex-11{flex: 11 1 auto}
	.flex-12{flex: 12 1 auto}
}
@media ( min-width: 640px ) {
	.medium-flex {
		display: flex;
	}
}

.gap-tiny { gap: var(--size-tiny); }
.gap-small { gap: var(--size-small); }
.gap-medium { gap: var(--size-medium); }
.gap-large { gap: var(--size-large); }

.one-liner {
	white-space: nowrap;
}

.hidden { display: none !important; }

img {border: 0}

iframe,
main,
header,
footer,
section,
address {
	display: block;
}
header,
main,
footer {
	padding: var(--size-medium);
}
header {
	width: 100%;
	background: #fff;
	border-bottom: 1px solid var(--color-muted);
}
header a {
	text-decoration: none;
	text-transform: uppercase;
	color: var(--color-on-primary);
	font-size: calc(var(--unit) / 3);
}
header a:hover {
	text-decoration: underline;
}
main {

}
footer {
	margin-top: var(--size-large);
	border-top: 1px solid #888;
	color: var(--color-muted);
	font-size: .8rem;
}
table {
	border-collapse: collapse;
	margin: var(--size-small) 0;
}
.table-simple td {
	padding: .3rem .6rem;
	border: 1px solid var(--color-pale);
}

/* looks the same as .table-simple atm */
.table-plain {
	border: 0;
}
.table-plain td {
	padding: .3rem .6rem;
	border: 1px solid var(--color-pale);
}
.table-plain td:not(:first-child) {
	cellspacing: 0;
	padding-left: var(--size-medium);
}

.block {
	margin-bottom: var(--size-medium);
}

a {
	color: var(--color-primary);
}

.logo {
	width: calc(var(--size-large) * .8);
	height: calc(var(--size-large) * .8);
	margin-top: calc(var(--unit) * -.2);
	background-image: url('../images/ubytovani-prerov-logo.png');
	background-repeat: no-repeat;
}
.image {
	background-size: contain;
	background-repeat: no-repeat;
}
.index-image {
	width: calc(var(--unit) * 8);
	height: calc(var(--unit) * 8);
}

.card {
	display: block;
	padding: var(--size-small);
	background: #fff;
	border: 1px solid var(--color-pale);
	box-shadow: 0 calc(var(--size-small) / 4) calc(var(--size-small) / 4) rgba(0, 0, 0, .1);
	transition: .2s all;
}
a.card {
	text-decoration: none;
	color: var(--color-text);
}
a.card:hover {
	translate: 0 calc(var(--size-small) / -2);
	box-shadow: 0 calc(var(--size-small) / 2) calc(var(--size-small) / 2) rgba(0, 0, 0, .2);
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-small);
}
.image-thumb {
	width: 145px; height: 100px;
	background-size: cover;
}

.back-to-index {
	color: var(--color-secondary);
}
.back-to-index:hover {
	color: var(--color-on-primary);
}

@media ( min-width: 960px ) {
	.inner-header {
		translate: -60px 0;
	}
}