@charset "utf-8";
html { background-color:#4e5359;	font-size:16px;}
@font-face {
    font-family: 'texgyreadventorregular';
    src: url('texgyreadventor-regular-webfont.woff2') format('woff2'),
         url('texgyreadventor-regular-webfont.woff') format('woff'),
         url('texgyreadventor-regular-webfont.svg#texgyreadventorregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'texgyreadventorbold';
    src: url('texgyreadventor-bold-webfont.woff2') format('woff2'),
         url('texgyreadventor-bold-webfont.woff') format('woff'),
         url('texgyreadventor-bold-webfont.svg#texgyreadventorbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
body {
	margin:0; color: #000;
	padding:0; 
background-repeat:repeat-x;
	font-family:  'texgyreadventorregular',Helvetica, sans-serif;background-position:top center;background-color:#4e5359; background-repeat:no-repeat; line-height:1.25em; background-attachment:fixed; color:#393939; background-size:cover
}
a { color: #333;
}
a:link { color:#333}
a:visited { color: #333}
a:hover { color: #333}
a:active { color:#333}
img {border:0}
h1 {margin:0; padding:0; color:#000; padding-top:10px; font-weight:normal ; margin-bottom:17px; font-size: 2vw; text-align:left; padding-bottom:15px; text-transform:uppercase; border-bottom:#000 2px solid; line-height:1.3em}
h1 {}
h2 {font-size:1.5em ; font-weight:bold; text-transform:uppercase; padding-top:30px; padding-bottom:25px; color:#000;  margin-bottom:0px; margin:0; background-repeat:no-repeat; padding-left:10px; padding-right:10px; text-align:center; line-height:1.2em }
h2 a { color: #000; text-decoration:none}
h2 a:hover { color: #000; text-decoration:underline}
h3 {margin:0; padding:0; padding-bottom:10px; font-size:14px; color:#000; text-align:left }
p {  padding-left:28px; padding-right:28px}
#page { background-color:#f3f3f3;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;  }
#mainlogo {}
#mainlogo img{ margin-left:auto; margin-right:auto; width:40%; max-width:350px; padding-top:15px; display:block; padding-bottom:15px}
#header {background-color:#4e5359; margin-top:0px; height:40px; padding-top:5px; padding-bottom:5px}
.sirkapage { max-width:calc(1400px - 0px); padding-left:0px; padding-right:0px; margin-left:auto; margin-right:auto; }
#search {padding-right:20px; background-repeat:no-repeat;background-color:rgba(255,255,255,1.00); width:200px;-webkit-border-radius: 10px;
-moz-border-radius: 10px; float:left; border-radius: 10px; height:35px}
#SbMt { display:none}
#searchform { margin:0; padding:0; }
#headertxt { height:50px }
#headertxt #icons { float:right}
#headertxt img {height:40px; padding-left:15px }
#menu { text-align:center;  margin-top:55px; background-image:url(images/lajna.png); background-repeat:repeat-x; background-position:center; margin-bottom:20px   }
#menu a {text-transform:uppercase; font-size:2em;padding:9px; background-color:#f3f3f3;font-weight:normal; padding-top:15px;   color:#7b7c7d; text-decoration:none; padding-left:2vw; padding-right:2vw; font-family:'texgyreadventorregular'}
#menu a:hover {color:black}
#telo { clear:both;}
#clanky, #clankym {  display: flex;clear:both;
    flex-wrap: wrap; margin-top:40px;
    gap: 20px;
    justify-content: center;}
	.mobile { display:none !important}

.basictd {
    border: 1px solid #ddd;
    padding: 10px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(50% - 40px);
    transition: transform 0.3s, box-shadow 0.3s;
}
.basictd a { text-decoration:none}
.basictd a:hover { text-decoration:none}
@media (max-width: 768px) {
    .basictd {
    width: calc(100% - 40px);
    }
}

.basictd:hover {
    transform: translateY(-10px);
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
}

.basictd img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .basictd img {
        margin-bottom: 0;
        margin-right: 0px;
    }
}


#main { width:70%; float:left; padding-bottom:40px; padding-left:3%; padding-right:1%; clear:both; background-color:#f3f3f3;  min-height:800px; margin-top:20px; border-right:1px rgba(140,140,140,1.00) dotted  }
#banner {width:100%;  background:#FFF; }
#banner img { width:100%; max-width:100%}
#clanek { padding:0px; padding-top:0}
#topbanner {background-color:#f3f3f3; }
#obsah01 { padding-top:0px; padding-left:1%; background-color:#f3f3f3;width:22%; padding-right:3%;  margin-left:74%;padding-top:30px;/* min-height:4317px*/}
#obsah { background-color:white; padding-top:10px;padding-left:17px; margin-top:5px; padding-right:20px;/* min-height:4317px*/}
#novinky { background-color:#ebebed;   padding-top:15px;padding-bottom:15px;  margin-top:10px;¨/*box-shadow: -3px 7px 16px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: -3px 7px 16px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -3px 7px 16px 0px rgba(0,0,0,0.75);*/ }
#obsah img { width:100%; max-width:100%; margin-bottom:20px}
#obsah h2 { font-weight:normal; padding-top:20px; }
#obsah h3 {  text-align:center; font-weight:normal; padding-top:0px}
#novinky h2 { padding:0; margin:0; padding-bottom:5px;padding-left:15px;padding-right:15px; font-size:0.9em; line-height:1.1em; font-weight:bold; text-align:left}
#novinky p { font-size:0.8em; padding:0; margin:0; line-height:1.1em; padding-bottom:10px; padding-left:15px;padding-right:15px;text-align:left}
#obsah a { display:block; border-top:1px solid #000;  padding:10px; text-decoration:none}
#bannertxt01 {font-size:0.9em;text-align:center;    cursor:pointer; overflow:hidden;}
#bannertxt02 {  font-size:0.9em;text-align:center;  cursor:pointer; overflow:hidden;}
#bannertxt03 {  font-size:0.9em; text-align:center; cursor:pointer; overflow:hidden;}
#bannertxt04 {  font-size:0.9em; text-align:center; cursor:pointer; overflow:hidden;}
.bantxt { background: -webkit-linear-gradient(bottom, #eee, #333);
  -webkit-background-clip: text; height:100px;
  -webkit-text-fill-color: transparent;}
#bantxt p { visibility:hiddenssd; display:none}
#bantxt h2 { padding:0px; margin:0px; text-align:left; padding-left:10px}
#bantxt p { padding:0px; margin:0px; text-align:left; padding-left:10px; }
.bantxt:hover { background:white;-webkit-text-fill-color: inherit}

#banner h2 { padding-top:3px; padding-bottom:0}
#banner a { text-decoration:none}
#banimg {width:70%;float:left;}
#banimg img { width:100%}
.div01 {width:47.5%;  margin-top:17px; float:left; }
.div01 img { width:100%; position:relative; display:block;  z-index:1;box-shadow: 3px 2px 17px -1px rgba(0,0,0,0.75);
-webkit-box-shadow: 3px 2px 17px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 2px 17px -1px rgba(0,0,0,0.75); }
.div01 p { padding:0}
.div01  .stit {z-index:10; width:30%;box-shadow:0px 0px 0px 0px rgba(0,0,0,0);-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);-moz-box-shadow: 0px 0px 0px 0px  rgba(0,0,0,0); position:absolute}
.div01 h2 { margin:0}
.sekcetop { float:left; width:33%; text-align:center; padding-top:50px; padding-bottom:20px; background-color:#f0f0ee)}
.sekcetop img { width:70%; }
.sekcetop img:hover { opacity:0.7}
.sekcetop span { }
.brcle { clear:both}
#sekcetop { clear:both; margin-top:25px;box-shadow: 3px 2px 17px -1px rgba(0,0,0,0.75);
-webkit-box-shadow: 3px 2px 17px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 2px 17px -1px rgba(0,0,0,0.75); }



#footer {margin-left:auto; margin-right:auto; clear:both; padding-top:15px; padding-bottom:25px; font-size:12px; text-align:center; }
#footer a {color:white; text-decoration:none}
#footer a:hover {color:white; text-decoration:underline}
#foot1 { color:white; width:33%; float:left}
#foot2 { color:white; width:33%; float:left}
#foot3 { color:white; width:33%; float:left}
.div010 {width:297px; height:102px;  background:#FFF; margin-top:17px}
.div010 img { width:297px}
.div02 {width:611px; height:611px;  background:#FFF; margin-top:17px}
.div022 {width:611px; height:454px;  background:#FFF; margin-top:17px}
.div03 {width:611px; height:297px;  background:#FFF; margin-top:17px}
.div03 img { max-width:100%; max-height:100%;  }
.div03 p { display:none} 
.div03 h2 { position:absolute; margin-bottom:-150px; display:none}
.div04 {width:611px; height:377px;  background:#FFF; margin-top:17px}
.div04 img { max-width:100%; max-height:100%;}
.div04 h2 { position:absolute; margin-bottom:-150px; display:none}
.odd01 { background-image: url(images/odd01.png); background-repeat:no-repeat; background-position:center center; clear:both; padding:60px; clear:both; display:block; width:calc(100% - 129px)}


.div040 {width:611px; height:377px;  background:#FFF; margin-top:17px}
.div04 p { display:none} 
.div05 {width:297px; height:691px;  background:#FFF; margin-top:17px}
.div06 {width:297px; height:297px;  background:#FFF; margin-top:17px}
.div07 {width:297px; height:377px;  background:#FFF; margin-top:17px}
.div08 {width:925px; height:377px;  background:#FFF; margin-top:17px}
.floatl {float:left;}
.ml17 { margin-left:17px}
.mr17 { margin-right:17px}
.admintxt {   position:absolute; }
.admintxt:link { background-color: white; color:#000;visibility: visibl }
.admintxt:visited {  background-color: white; color:#000;visibility: visibl }
.admintxt:hover { background-color: white; color:#000;visibility: visible}
#anketatable tr:hover { background: #F0F0F0}
#anketatable a { border:0}
#overlayk { position:fixed; top:0; left:0; width:100%; z-index: 99999999; height:100%; background:#FFFFFF; opacity:0.8 }
#kampan {padding:20%; padding-top:10px;   background-repeat:no-repeat;  background-position:top center }
#loginform {margin-left: auto; margin-right: auto; width: 99%; margin-top: 25px; border: 1px solid #fff;
background-color: #fff;-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;color: black; font-size: 1em; overflow-y: auto;
	        position: fixed; z-index:99991000000;
            transform: translate(0,0);
            left: 0; right: 0; max-width:1200px;
            height: auto; top: 0; bottom: 25px;border: solid 5px #aaaaaa;
            z-index: 990; /* display above everything else */
           padding-left: 10px; padding-right: 10px; padding-bottom:15px; 
}
#loginform::-webkit-scrollbar {
    width: 12px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
 
#loginform::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
 
#loginform::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.closeb {
    color: #aaaaaa; background-color: black; padding-left:5px; padding-right:5px; 
    float: none; text-align:right; position:absolute; top:0; right:0px; z-index:9000000;
    font-size: 28px;
    font-weight: bold; 
}

.closeb:hover,
.closeb:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
#kampan p { margin:0; padding:0; font-size: 14px; text-align:justify}
#administrace { position:fixed; top:0; background:#000000; left:0; padding:3px}
		#flashContent { width:100%; height:100%; }

#kampan {margin-left: auto; margin-right: auto; width: 70%; margin-top: 0px;
	        position: fixed;
            transform: translate(0,0);
            left: 0; right: 0;
            height: auto; top: 0; bottom: 25px;
            z-index: 990; /* display above everything else */
           padding-left: 10px; padding-right: 10px
}
#kampan::-webkit-scrollbar {
    width: 12px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
 
 #rightanketa a { text-decoration:none}
 #rightanketa a:hover {}
 
#kampan::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
 
#kampan::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#overlay0, #overlay {background-repeat: repeat;width: 100%; height: 100%; position: fixed; overflow:visible !important; top:0; left: 0; display:none; background-color:  rgba(243,243,243,0.2); opacity: 1; text-align: center; z-index:100000000; }
.close {
    color: #1d572c; background-color:transparent; 
    float: right;  display:block; 
    font-size: 56px; cursor:pointer;
    font-weight: bold; 
}

@media screen and (max-width: 1500px) {

.sirkapage { max-width:1400px;}
}
@media screen and (max-width: 1400px) {

.sirkapage { max-width:1300px;}
}
@media screen and (max-width: 1300px) {

.sirkapage { max-width:1200px;}
}
@media screen and (max-width: 1200px) {

.sirkapage { max-width:1000px;}
}
@media screen and (max-width: 1100px) {

.sirkapage { max-width:900px;}

#main { width:98%; float:none ; padding-left:1%; padding-right:1%; }
#obsah01 { padding-top:0px; padding-left:1%;  background-color:#f3f3f3;width:98%; padding-right:1%;  margin-left:0%;/* min-height:4317px*/}
.div01  .stit { width:45%;}



}

@media screen and (max-width: 1060px) {
html {
	font-size:14px;
}
}
@media screen and (max-width: 900px) {

.div01 {width:90%; padding-left:5%;  float:none; }
.div01  .stit { width:95%;}
#menu a {font-size:16px;}
.odd01 { background-image: none; background-repeat:no-repeat; background-position:center center; clear:both; padding:20px}

}
@media screen and (max-width: 600px) {
.nomobile { display: none}
.mobile { display: block !important}
#menu a {font-size:14px;}
}


 .menu-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: calc(100% - 80px);
	padding-left:40px; padding-right:40px; padding-top:20px; background:#f3f3f3;
    margin: auto
}

.menu-container .menu-item {
    background: white;
    padding: 20px; text-align:center;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.3s;
}

.menu-container .menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.menu-container .menu-item i {
    font-size: 48px;
    margin-bottom: 10px;
    display: block; padding-top:10px;
   
   transition: color 0.3s;
}
.menu-container .menu-item img  {
    width: 48px; text-align:center; padding-top:-10px;
    margin-bottom: 10px;
  	
    transition: color 0.3s;
}
.menu-container .menu-item a {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 10px;
}
.menu-container .menu-item:hover i {
	opacity:0.8;
    -color: #009688; /* Světlejší zelená */
}
.menu-container0 .menu-item p {
    font-size: 0.8em;
    font-weight: bold;
    margin: 0;
}
 .menu-container0 { 
    max-width: calc(100% - 40px); 
	padding-left:20px; padding:20px; background:#f3f3f3;
    margin: auto; display:block
}
.menu-container0 .menu-item:hover {
  opacity:1
}
.menu-container0 .menu-item {
background:#f3f3f3;
    padding: 0px; text-align:center;
    border-radius: 0px; width:12.5%; float:left;opacity:0.6;
    transition: transform 0.2s ease-in-out, box-shadow 0.3s;
}
.menu-container0 .menu-item i {
    font-size: 48px; text-align:center;
    margin-bottom: 10px;
    display: block;
}
.menu-container0 .menu-item img {
    width: 44px; text-align:center;
    margin-bottom: 10px;
 	
    transition: color 0.3s;
}
.menu-container0 .menu-item p {
    font-size: 16px; text-align:center;
    font-weight: bold; padding:0;
    margin: 0;
}

.menu-container0 .menu-item a {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 0px;
}
/* Hover efekt */
@media (max-width: 1200px) {
.menu-container0 .menu-item i  {
    font-size: 32px;
}
.menu-container0 .menu-item img {
	width:32px
}
.menu-container0 .menu-item p {
    font-size: 12px; text-align:center; line-height:10px;
}
}
/* Responsivita */
@media (max-width: 850px) {
  

.menu-container0 .menu-item i  {
    font-size: 32px;
}
.menu-container0 .menu-item img {
	width:32px
}
.menu-container0  {
width:100%; padding:0
}
.menu-container0 .menu-item p {
    font-size: 8px; text-align:center; line-height:8px;
}
.menu-container0 .menu-item  {
width:25%;
margin-bottom:5px
}
 

}

@media (max-width: 600px) {
    .menu-container {
        grid-template-columns: repeat(1, 1fr);
    }


}
