html,body,a,p,form,img{ margin:0;padding:0;border:0;scroll-behavior: smooth;}
/*
html{ font-size: 62.5%; background: #DFDFDF;}
*/
body{ font-family: sans-serif,verdana,helvetica; font-size: 1.3em; background: darkgray;}

#btnTop { display: none; position: fixed; bottom: 30px; right: 30px; border: none; outline: none; background-color: silver; color: white; cursor: pointer; padding: 10px; border-radius: 25px; font-size: 18px; font-weight: bold; z-index: 99;}
#btnTop:hover { background-color: gray;}
#mainmenu { position: absolute; left: 0; bottom: 60px; width: 100%; border: 0px solid yellow;}
#topbar { position: fixed; top: 0; width: 100%; margin:0; padding: 0; border-bottom: 2px solid white; background-color: #000080; z-index: 10;} /* #800080, #00009F */
#topbarbox { max-width: 1200px; margin: 0; padding: 0 30px 0 20px; background-color: #000080; } /* šedá background-color: #E8E8E8, #FF0080, #C40062, #800080, #00009F */
#entraspace {min-height: 51px;}
.pagedata { max-width: 1200px; margin: 0; padding: 0 30px 0 20px; display: table; margin: 0 auto;}	
.pagebox {margin:0; padding:0; width: 100%; margin-top: 0px; overflow-x: hidden; overflow-y: auto;}
#topmenu { margin:0; padding:0;}
#topmenu li { display: inline-block; color: #ADABAF; }
#topmenu li:hover { color: white; }
#topmenu li a { text-decoration: none; /*color: #ADABAF;*/ margin-right: 20px; display: block;} /*  color: #ADABAF; FFFFFF;*/

#trigram {font-size: 15px; font-weight: bold; color: #FFFFFF; border: 1px solid silver; padding: 5px 10px; border-radius: 5px;}
#trigram:hover {color: darkgray; background-color: lightgray; border-color: darkgray;}

#levemenu { position: fixed; top:0; bottom: 0; left:0; margin:0; padding:0; width: 200px; color: white; background-color: #0D0D0D; margin-left: -200px; transition: margin-left 0.5s; z-index: 2; overflow-y: auto;}
#levemenu.ahoj { margin-left: 0;}
.lmenu { padding: 5px 10px;}
.lmenu ul { margin:0; padding: 0; }
.lmenu li { width: 180px; border: 0px solid white; }
.lmenu a { text-decoration: none; color: gray; padding: 10px 0; padding-right: 20px; display: block; }
.lmenu a:hover { color: white; }
.modal { display: none; position: fixed; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); z-index: 1;}

#kontaktyonecol {display: table;}
#kontaktytwocol {display: none;}

@media screen and (min-width: 880px) {
	#kontaktyonecol {display: none;}
	#kontaktytwocol {display: table;}
}

.more {
	height: 20px;
	transform: rotate(-45deg);
	margin-top: -8px;
}

.roundTop { border-radius: 8px 8px 0 0; }
.roundBottom { border-radius: 0 0 8px 8px; }
.roundAll { border-radius: 8px; }

.nadpis:hover {
	font-weight: bold;
}

.reference {
	float: left;
	display: block;
	border: 0px solid silver;
	height: 250px;
	width: 100%;
	min-width: 180px;
	padding: 5px;
}

.refnazev {
	font-size: 1.2em;
}

.tableref { margin: 10px auto 0 auto; border-collapse: collapse; font-size: 0.9em;}
.tableref td { margin: 0; padding: 0;}


@media screen and (min-width: 420px) {
	.reference { width: 50%; }
}
@media screen and (min-width: 420px) and (max-width: 470px) {
	.refnazev { font-size: 1em; }
}

@media screen and (min-width: 630px) {
	.reference { width: 33%; }	
}
@media screen and (min-width: 630px) and (max-width: 700px) {
	.refnazev { font-size: 1em; }
}


@media screen and (min-width: 840px) {
	.reference { width: 25%; }
}
@media screen and (min-width: 840px) and (max-width: 900px) {
	.refnazev { font-size: 1em; }
}



/*#topmenu li:hover a { color: white; }*/

.w3-dropdown-content { color: black !important;}

/* tohle tady asi být musí ...*/
* { box-sizing: border-box;}
/* Create two columns that floats next to each other */
.column1 { float: left; width: 50%; padding: 10px; border: 0px solid blue; display: none;}
.column2 { float: left; width: 30%; padding: 10px; border: 0px solid blue; display: table;}

/* Clear floats after the columns */
.row {width: 100%; max-width: 600px; min-width: 250px; min-height: 600px; margin: 0 auto; padding: 0; min-height: 140px; border: 0px solid green;}
.row:after { content: ""; display: table; clear: both; }
.row a { text-decoration: none; }

.normalrow {width: 100%; max-width: 600px; min-width: 250px; margin: 0 auto; padding: 0; min-height: 140px; border: 0px solid green;}
.normalrow:after { content: ""; display: table; clear: both; }
.normalrow a { text-decoration: none; }

.grid-container {
  display: grid;
  grid-template-columns: auto;
  padding: 10px;
  color: white;
  gap: 10px;
}


.grid-item table {
	min-width: 100%;
	height: 175px;
	text-align: center;
	border-radius: 20px;
	background-color: white;
	border: 3px solid white;
	font-weight: bold;
	color: darkgray;
}

.grid-item table:hover {
	background-color: #BEE8FF; /* #BE7C7C */
	color: #00004A; /*#800000;*/
	border-color: #40BCFF;
}

.grid-item table:hover img {
	border: 1px solid #800000;
}

.grid-item img {
	height: 80px; 
	width: 80px; 
	border: 1px solid silver;
	border-radius: 8px;
}

.grid-item a {
	text-decoration: none;
	font-weight: bold;
	color: darkgray;
	display: block;
}

.grid-item td:hover a {
	color: black;
}

.grid-item {
  border: 0px solid white;
}

.nadpisis {
	display: block;
}

.nadpisinfos {
	font-size: 120px; 
	display: block;
}

.tdnadpisis {
	height: 98%;
}

.tdnadpisinfos {
	height: 2%;
}

@media screen and (min-width: 0px) {
#topbarbox {padding-left: 0px;}	
#topmenu { display: none;}
#trigram { display: inline-block;}
#mainmenu { bottom: 60px; }
}

@media screen and (min-width: 321px) {
#topbarbox {padding-left: 5px;}	
#topmenu { display: none;}
#trigram { display: inline-block;}
}

@media screen and (max-width: 300px) {

.grid-item {
	width: 100px;
}

.potraviny {
	margin-left: -20px;
}
	
}

@media screen and ((max-width: 420px) or (max-height: 460px)) {
.column2 {display: none;}
.column1 {display: table;}
}

@media screen and ((min-width: 421px) and (max-height: 460px)) {
.nadpisinfos { font-size: 120px;}
}

/*
@media screen and (min-width: 701px) {
#topbarbox {padding-left: 15px;}	
#topmenu { display: none;}
#trigram { display: inline-block; }
}
*/

@media screen and (min-width:910px) {
#topbarbox {padding-left: 15px;}	
#topmenu { display: inline-block;}
#trigram { display: none; }
}

@media screen and (min-width: 920px) { 
#topbarbox { margin: 10px auto; padding: 5px 30px; border: 0px solid silver; /*background: #E8E8E8; */ } 
#topmenu { display: inline-block;}
#trigram { display: none; font-size: 25px; }
}

@media screen and (max-width: 920px) and (max-height: 700px){
.nadpisis { display: none;} 
}

@media screen and (min-width: 400px){
	
  .grid-item table {
	  width: 179px;
  }

 
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 650px) {
  .column1 {
	display: table;
  }
  #mainmenu { bottom:; top: 60px;}
  
  
  .column2 {
	display: none;
  }
  
  .row {
	  max-width: 406px; min-height: 600px;
  }
}

.col1win { float: clear; width: 100%;}
.col2win { float: clear; width: 100%; margin-top: 40px;}

@media screen and (min-width: 960px) {

.col1win { float: left; width: 25%; }
.col2win { float: left; margin-left: 100px; margin-top: 20px; width: 50%; }

}