/*

barvy.. ř

*/

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;	padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;
}
:focus {outline: 0;} /* remember to define focus styles! */
body {line-height: 1; color: black; background: white;}
ol, ul {list-style: none;}
table {border-collapse: separate; border-spacing: 0;} /* tables still need 'cellspacing="0"' in the markup */
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/* reset end */
 
html, body {font-size: 20px;} 
 
body {font-family: "Zeppelin", sans-serif; position: relative; color: #333; line-height: 1.4} /* 75.3% puvodni font size */
a {text-decoration: underline;}
a:hover {text-decoration: none;}

/* utility */

.offscreen { clip-path: inset(100%);clip: rect(1px 1px 1px 1px); /* IE 6/7 */ clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.onscreen { position:relative; clip:auto; width:auto; height:auto; overflow:auto; }
.bold, strong {font-weight: bold;}
.italic, em {font-style: italic;}
.center {text-align: center;}
.right {text-align: right;}

.mt-15 {margin-top: 1.5rem;}
.pull-right {float: right;}

/* text */

.text h1 {font: bold 2em/1.2em "Zeppelin", sans-serif; margin: 1em 0;}
.text h2 {font: bold 1.6em/1.3em "Zeppelin", sans-serif; margin: .8em 0;}
.text h3 {font: bold 1.2em/1.4em "Zeppelin", sans-serif; margin: .6em 0;}

h1 small, h2 small, h3 small {display: block; font: normal 0.8em/1.6em "Zeppelin", sans-serif; padding-top: .5em;}
h1 small {text-transform: uppercase; letter-spacing: .2em; font-size: .5em;}

.text p, .text ul, .text ol, .text dl, .text address, .text blockquote {margin-bottom: 20px;}
.text ul, .text dl, .text ol {margin-top: 20px}
.text a {text-decoration: underline; color: #333;}
.text a:hover {text-decoration: none;}

.text ul li:before {content:"►";position:absolute;margin-left: -1.5em; color: #555;}
.text ul ul li:before {content: "";}
.text ul ul {list-style-type: circle;}
.text ul {margin-left: 1.5em;}

.text ol {margin-left: 2em; list-style-type: decimal;}
.text ol ol {list-style-type: lower-alpha;}
.text ol ol ol {list-style-type: circle;}

.text ul ul, .text ul ol, .text ol ul, .text ol ol {margin-top: 10px; margin-bottom: 10px;} 

.text .grayblock, .text blockquote {background: #eee; padding: 10px; margin: 20px -10px}
.text .grayblock *:first-child, .text blockquote *:first-child {margin-top: 0px;}
.text .grayblock *:last-child, .text blockquote *:last-child {margin-bottom: 0px;}

.valuelist .label, .valuelist .value {float: left;}

/* layout */
header, article, footer {position: relative; z-index: 2; font: normal 1rem/1.4em "Zeppelin", sans-serif;}

.bottomlinks {}


.top-slide {position: relative; min-height: 100vh; overflow: hidden; background: url("/img/bg-top-tile.jpg") center center; }

.top-slide__promo {display: block; position: relative; width: 100%; height: 88vh; box-sizing: border-box; padding: 0 8.5%; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1px solid #333;}
.top-slide__promo h1 {margin: 0;}
.top-slide__promo h1 a {text-decoration: none;}
.top-slide .btn-line {margin-top: 1em;}
.top-slide__promo-i {width: auto; margin: auto; max-width: 80%;}

.top-slide__nav {position: relative; z-index: 99; height: 12vh; box-sizing: border-box; padding: 0 8.5%; }

.top-slide__menu { display: flex; justify-content: space-between; height: 100%;}
.top-slide__menu-links {list-style-type: none; margin: 0; padding: 0; display: flex; height: 100%; flex-direction: row; flex-wrap: wrap; align-items: stretch; flex: 1 0 auto;}
	.top-slide__menu-link {position: relative; display: flex; flex-direction: column; justify-content: center;  border-left: 1px solid #333;}
	.top-slide__menu-link:before {content: "";}
	.top-slide__menu-link:first-child {border: 0px none;}
	.top-slide__menu-link:first-child a {padding-left: 0;}
	.top-slide__menu-links a {text-decoration: none; font-weight: bold; padding: 0 1.5em; line-height: 1.3em; font-size: 1.1em; color: inherit;}
.top-slide__logo {max-height: 6vh; width: auto; padding-top: 3vh; flex: 0; text-align: right;}
.top-slide__logo-i {height: 100%; max-width: 200px;}

@media all and (max-height: 800px) {
	html {font-size: 16px;}
}

@media all and (max-width: 1024px) {
	html {font-size: 16px;}
}

@media all and (max-width: 800px) {
	.top-slide__nav {height: auto;}
	
	.top-slide__menu {flex-direction: column; height: auto; justify-content: flex-start;}
	
	.top-slide__menu-links {margin-bottom: 1.5rem;}
	.top-slide__menu-link, .top-slide__menu-link:first-child {flex: 1 0 100%; border: 0px solid; border-bottom: 1px solid #333;}
	.top-slide__menu-link a {padding: .5rem 0;}
	.top-slide__menu-link br {display: none;}

	.top-slide__logo {padding: .5rem 0 2rem; text-align: center;}
	.top-slide__logo-i {height: 60px; width: auto;}
	
	.top-slide {min-height: 0; }
	.top-slide__promo {height: auto; padding: 8.5%;}
}

footer {font-size: .75rem; padding: 1rem 8.5%; border-top: 1px solid #999; color: #999; text-align: center;}
footer a {color: #999;}