@import url('https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap'); 
body{font-family: 'Slabo 27px', serif;line-height:1.33em;color:black; background: #aaa url('') middle top no-repeat fixed; background-size:cover;text-align:justify; font-style:normal;margin:0;padding:0;}
h2,h3 {clear:both;margin:.2em 0;padding:0;} 
h2 {font-size: 1.5em;padding-top:.9em;} h3 {font-size: 1.2em;padding-top:.6em;}}

a {color:#c33}
#content img {max-width:100%; height:auto;}
#nav-container {width:200px;height:auto;overflow:hidden;background-image:url("/img/pruhledne85.png");position:fixed;z-index:9999;margin-top:50px;margin-left:50px;top:0px;left:0;padding:20px 6px;}
#nav-container ol,ul{list-style:none}
#nav-container h1,#nav-container ul{margin:0 10px;padding:0;border:0;font-size:100%;}
#nav-container h1 a{text-transform:uppercase;text-decoration:none;font-size:18px;display:block;margin:0 0 15px 0;color:#333;font-weight:bold;}
#nav-container ul{margin-top:10px;}
#nav-container ul a:link,#nav-container ul a:visited{text-decoration:none;text-transform:uppercase;font-size:1.1em;
letter-spacing:0;display:block; line-height:20px; padding: 3px 10px; color:#333;
-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;-chrome-transition:.4s;transition:.4s}
#nav-container ul a:hover,#nav-container ul li#current-section a{color:#c33;background-color: rgba(120,120,120,.33);}

#exkl {font-size: 2em; margin-top: 30%; text-align: center; color: #eee; background-color: rgba(20,20,40,0.7); padding: .3em 0 .3em 250px;}

#content {-max-width:100%;background-image:url("/img/pruhledne85.png");color:#333;margin: 50px 50px 50px 280px;padding:30px;font-size:1.1em}  
#content h1 {margin: 0px 0px 20px 0px;padding:0px;text-align:left; line-height:1.2em}
#content h1 a {text-decoration:none;color:#333;}
h2 small {float: right; font-size: .5em; margin-top: .5em;}
#content li {list-style: circle; padding: 4px;}

#listicka {width:40px;height:40px;overflow:hidden;position:fixed;z-index:9999;top:100px;right:0;padding:12px;}
#alert {background-color:darkred;color:white;padding:18px;margin:-6px;clear:both;}

.osmicka {margin:0px;display:table;height:100px;padding:0;margin:6px 0;clear:both;}
.ikona {float:left;padding:2px;width:150px;height:100px;text-align:center;overflow:hidden;}
.mosaicflow * {margin:0;padding:0;box-sizing:border-box;}
.mosaicflow__column {float:left;}
.mosaicflow__item {position:relative;}
.mosaicflow__item img {display:block;width:100%;max-width:255px;height:auto;border:solid 1px white;}
.mosaicflow__item p {position:absolute;bottom:0;left:0;width:100%;margin:0;padding:5px;background:hsla(0,0%,0%,.5);color:#fff;
		font-size:14px;text-shadow:1px 1px 1px hsla(0,0%,0%,.75);opacity:0;-webkit-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);-moz-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
		-o-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);transition: all 0.4s cubic-bezier(0.23,1,0.32,1);}
.mosaicflow__item:hover p {opacity:1;}

#podpis, #banner {float:right;clear:both;}
.ctverec {width:162px;height:162px;border:solid 6px #888;float:left;margin:0 10px 10px 0;background-color:#d6d6d6;padding:3px;text-align:left;font-size:20px;color:white;background-repeat: no-repeat;}
.ctverec:hover {border-color:darkgreen;}
.button {background-color:#ccc;font-size:1.2em;font-weight:bold;color:#666;}

hr {margin: 1em 4em;border: 0;height: 1px;
    background-image:-webkit-linear-gradient(left, rgba(50,50,50,0), rgba(50,50,50,0.75), rgba(50,50,50,0));
    background-image:-moz-linear-gradient(left, rgba(50,50,50,0), rgba(50,50,50,0.75), rgba(50,50,50,0));
    background-image:-ms-linear-gradient(left, rgba(50,50,50,0), rgba(50,50,50,0.75), rgba(50,50,50,0));
    background-image:-o-linear-gradient(left, rgba(50,50,50,0), rgba(50,50,50,0.75), rgba(50,50,50,0));}

.clanekodkaz span{background-color: rgba(0,0,0,0.5);line-height:1.2em;padding:0em;color:white;text-decoration:none;}
.clanekodkaz span:hover{background-color: rgba(0,0,0,1);}

.pokracovat {width:auto;height:20px;padding:4px;text-align:center;background-color:#ddd;display:block;color:black;text-decoration:none;}
.pokracovat:hover {background-color:darkgreen;color:#eee}

#dojezd {float: left; width:50%;}
#dojezd2 {float: right; width:50%;}
#top {font-size:2em;text-decoration:none;color:black;font-weight:bold;}
#clanek {margin-left:50px;}
#zpet {text-transform:uppercase;text-decoration:none;font-size:40px;display:block;margin-bottom:60px;padding-right:10px;color:#333;font-weight:bold;float:left;}
#datum {float: right;}
span {width: 7em; display: block; float: left;}
.dalsifotky {clear: both; background-color: #BBB; margin: 1em; font-size: 1.6em;}

#ctverce {text-align: center;}
#ctverce img {padding: 3px;}
#ctverce img:hover {padding: 0px; border: solid 3px pink;}

@media (min-width: 1200px)  {
#content {width: 770px; }
}

@media (max-width: 900px)  {
 #nav-container {width:auto;height:auto;position:relative;margin:0px 10px 20px 10px;}
 #content {width:auto;margin: 0 10px; padding: 10px;}
 #nav-container ul,#nav-container h1 {text-align:center;}
 #nav-container li {display:inline-flex;padding:0 6px;} 
 #clanek {margin:0px;}
 .ctverec {max-width: 40%;}
}

@media (max-width: 400px)  {  
  body{background:#ddd;}
  #content,#nav-container {width:380px;margin:3px;padding:5px;}
  #dojezd, #dojezd2 {font-size:.6em;}  
}