/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}


html,body {
	margin:0;
	padding:0;
  font-family: 'Verdana';
  font-size:12px;
	height:100%;
}

h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a           { color:black; text-decoration: none;}
a:hover     { text-decoration: underline; }
.clearboth  { clear: both; }
.floatleft  { float: left; }
img         { border:0; }
.nopadding  { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#left       { position: relative; float:left; width:20%; height:100%; background: url(../images/left.jpg); background-size:cover; background-position:top; }
#logo       { width:80%; margin:auto; margin-top:2%; margin-bottom:4%; }
#logo img   { width:100%; }
#hlava      { position: absolute; width:80%; left:10%; bottom:0; }
#hlava img  { width:100%; }

#menu a     { text-decoration: none;}
.menu       { background-color: white; width:85%; margin-bottom:4%; padding:1.5% 5% 1.5% 0; text-align: right; cursor: pointer;
              -webkit-border-bottom-right-radius:8px; -moz-border-bottomright:8px; border-bottom-right-radius:8px; color:#990000; font-weight: bold; 
              -webkit-border-top-right-radius:8px; -moz-border-topright:8px; border-top-right-radius:8px; }
.menu:hover { color:#FF0000; }
.active     { color:#FF0000; }

h1			{ font-size:17px; line-height:22px text-transform: uppercase; text-align: center; }

#obsah      { position:relative; z-index:10; float:left; width:60%; margin-top:5vh; margin-left:7%; height:85%; background: url(../images/pozadi.png); }
#obsah1     { width:100%; height:250px; border-left:solid 1px #C3C3C3; border-right:solid 1px #C3C3C3; }   
#obsah1-top { position: relative; width:100%; height:60px; background: url(../images/obsah1.png); background-size:cover; background-position:top right; }
#obsah1-top-text { font-size:20px; line-height:60px; margin-left:20px; color:rgb(117,117,116); } 
#obsah1-bottom { float:left; width:100%; background-color: white;
                  -webkit-border-bottom-left-radius:45px; -moz-border-bottomleft:45px; border-bottom-left-radius:45px;
                  -webkit-border-bottom-right-radius:45px; -moz-border-bottomright:45px; border-bottom-right-radius:45px; }  
#obsah1-popis { float:left; margin:15px 0 0 0; width:100%; padding:0 20px; font-size:14px; padding-bottom:15px  }
#popis-left,  
#popis-right  { float:left; width:48%; text-align: center; }

#obsah2     { width:100%; height:calc(100% - 250px); border-left:solid 1px #C3C3C3; border-right:solid 1px #C3C3C3; border-bottom:solid 1px #C3C3C3;  }
#paticka    { position: absolute; width:64%; left:25%; height:6%; bottom:1%; background: url(../images/paticka.png) no-repeat;  background-size:contain; }

#right      { position:fixed; right:0; width:10%; height:100%; background: url(../images/right.png); background-size:cover; background-position:left; }
    
#foto-uvod  { position:relative; width:100%; height:100%; text-align:center; }
#foto-uvod img { position:relative; height:96%; top:2% }
    
/* Galerie */
#galerie     { width:100%; height:100%; text-align:center; margin:auto; overflow-y: scroll; %text-align:left; %width:95%; %margin-left:5%;}
.fotoX       { position: absolute; bottom: 0; left:0; color:#fff; width:100%; min-height:20px; text-align:center; padding:5px; letter-spacing:1px; font-size:11px; line-height:18px; background-image: url("../images/cerna.png"); }


.thumbs a             	{ position:relative; float:left; width:calc(25% - 15px); cursor:pointer; z-index:10; margin:5px; }
.thumbs a img           	{ float:left; width:100%;object-fit: cover; }
.thumbs a.margin-right0 	{ margin-right:0 }
.thumbs a.margin-right0-2 	{ display:none }

#menu-mobile			{ display:none; position:absolute; right:15px; top:18px; width:22px; height:20px; margin-top:1px; cursor:pointer;}
#menu-mobile span		{ position:absolute; display:block; width:100%; height:2px; border:1px solid black; background-color: black;
					  	  -webkit-border-radius:5x; -moz-border-radius:5px; border-radius:5px; behavior: url(PIE.htc); }
#menu-mobile span:nth-child(1) { top:0; }
#menu-mobile span:nth-child(2) { top:8px }
#menu-mobile span:nth-child(3) { bottom:0; }


#mobile-menu { display:none; width:100%; background:white; font-size:14px; line-height:22px; padding:10px 0 }
#mobile-menu a { display:block; width:100%; text-align:center; }

#logo-mobile { display:none; float:left; width:100%; background:white }
#logo-mobile img { float:left; width:100%; max-width:250px; }

/* scroll-pane */
.scroll-pane    { width: 100%; overflow-y: auto; }
.jspContainer   { overflow: hidden;	position: relative; }
.jspPane        { position: absolute; }
.jspVerticalBar { float:right; top: 0; right:40px; width: 26px; height: 100%; }
.jspTrack       { background-color: white; position: relative; border-left:2px solid #e31e24; border-right:2px solid #e31e24; }
.jspDrag        { background: #e31e24; position: relative; top: 0; left: 0;	cursor: pointer; }
.jspArrowUp     {	background: url("../images/scroll-top.jpg"); height: 26px; display: block;	cursor: pointer; }
.jspArrowDown   { background: url("../images/scroll-down.jpg");	height: 26px;	display: block;	cursor: pointer; }