html, body { margin: 0px; padding: 0px; font-family: 'Open Sans', Arial, Helvetica, sans-serif; color: #777777;}
img { border: 0px;}

section table, section td, section th { font-size: 12px;}

.cn {width: 90%; max-width: 1200px; margin: auto; position: relative;}
.clear {clear: both;}

nav {position: fixed; width: 100%; top: 0; left: 0; background: white; height: 130px; z-index: 998;}
nav img, nav h1 {float: left;}
nav ul {float: right;}
nav h1 {color: #fbae54; text-transform: uppercase; font-weight: 300; font-size: 40px; padding-left: 30px;}
nav a, nav .tgmenu {color: #fbae54;text-decoration: none;}
nav .menu {list-style-type: none; padding: 0; margin: 60px -30px 0 0; float: right;}
nav .menu a {font-weight: 500;font-size: 15px;line-height: 21px; text-transform: uppercase;}
nav .menu li{padding: 0; margin: 0 30px 0 0;  float: left;}
nav .tgmenu {display: none;}


header {background: url('../images/header.jpg') no-repeat center center;  background-size: cover; color: white; padding-top: 32px; margin-top: 130px; height: 500px; text-align: center;}
header a {color: white;}
header h2 {margin: 160px 0 0 0; font-size: 50px; text-shadow: 2px 2px #666; padding: 0; letter-spacing: 3px;}
header h3 {margin-top: 0px; padding: 0; font-size: 35px; text-shadow: 2px 2px #666;}

section h2 {text-transform: uppercase; font-weight: 300; font-size: 40px;}
section h3 {text-transform: uppercase; font-weight: 300; font-size: 30px;}
section a {color: #fbae54 !important;}

#o-nas {padding: 40px 0;}
#o-nas p {text-align: justify;}
.cn .left {float: left;}
.cn .right {float: right;}
.cn .l30 {margin-left: 30px;}
.cn .r30 {margin-right: 30px;}
.cn .t20 {margin-top: 20px;}

section.dark {background-color: #F8B156;}
section.dark, section.dark a {color: white;}
#produkty {padding: 40px 0;}
#produkty p, #produkty h2 {text-align: center;}
.prodbox {width: 48%; background: white; color: #666; float: left;}
.prodbox.b2 {float: right;}
.prodbox img {float: left; margin-right: 10px;}
#produkty .prodbox p {margin: 0; text-align: left; padding}
#produkty .prodbox h3 {margin: 0; padding: 6px 0;}


x#fotogalerie {text-align: center;}
#fotogalerie h2 {margin-bottom: 0; padding-bottom: 0;}
#fotogalerie h3 {clear: both; padding-top: 40px; margin-top: 0;}
#fotogalerie ul {list-style-type: none; padding: 0; margin: 0;}
#fotogalerie ul li{list-style-type: none; padding: 0; margin: 0; float: left; margin-right: 10px;}
#fotogalerie ul li img{ width: 230px; height: 230px; object-fit: cover;}
#fotogalerie {padding-bottom: 100px; padding-top: 60px;}


footer {background-color: #666; color: white; padding: 10px 0;}
footer a {color: white;}
footer textarea {float: left; width: 75%; background-color: #777; border: 0; font-family: 'Open Sans', Arial, Helvetica, sans-serif; resize: none; color: white; padding: 2px 6px; height: 122px; margin: 0; box-sizing: border-box;}
footer .r{float: right; width: 25%; padding-left: 10px; box-sizing: border-box;}
footer input, footer button { width: 100%; margin: 0; padding: 2px 6px; line-height: 30px; margin: 0 0 10px 0; background-color: #777; border: 0; color: white; box-sizing: border-box;}
footer button {letter-spacing: 2px;}
.mail_result {padding: 10px; border-top: 1px solid #999;}

footer input::-webkit-input-placeholder, footer textarea::-webkit-input-placeholder { color: #bbb; }

@media all and (max-width: 1120px) {
	nav h1 {width: 280px; margin-top: 6px;}
}
@media all and (max-width: 1100px) {
	.prodbox {width: 100%; margin-bottom: 2%;}
}
@media all and (max-width: 910px) {
	.cn {width: 96%;}
	nav h1 { font-size: 30px; margin-top: 20px; width: 200px;}
}
@media all and (max-width: 800px) {
	nav .tgmenu {display: block; float: right; font-size: 60px; line-height: 130px; letter-spacing: 20px; cursor: pointer;}
	nav .menu {display: none;}
	.visiblemenu section, .visiblemenu footer, .visiblemenu header {display: none;}
	.visiblemenu .menu {display: block; float: left; clear: both; width: 100%;}
	.visiblemenu .menu li {display: block; width: 100%; float: none; text-align: center;}
	.visiblemenu .menu li a{ font-size: 30px; line-height: 60px;}
	footer textarea {width: 100%; float: none;}
	footer .r{float: none; width: 100%; padding: 10px 0 0 0;}
	
	.cn .left {float: none;}
	.cn .right {float: none;}
	.cn .l30 {margin-left: 0px;}
	.cn .r30 {margin-right: 0px;}
	.cn .t20 {margin-top: 0px;}
}
@media all and (max-width: 480px) {
	nav {height: 80px;}
	nav .logo {width: 64px; height: 64px; margin-top: 10px;}
	nav h1 {font-size: 26px; margin-top: 6px; padding-left: 10px;}
	nav .tgmenu {line-height: 80px; margin-right: -16px;}
	header {margin-top: 80px;}
}
@media all and (max-width: 360px) {
	nav h1 {font-size: 22px; margin-top: 12px; letter-spacing: -1px; width: 150px;}
	nav .tgmenu {font-size: 40px;}
}

 .bilejodkaz{
   color: white !important;	
}

/* *********** Tooltip container *********** */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* *********** Tooltip text *********** */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 5px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -100px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}


/* *********** Show the tooltip text when you mouse over the tooltip container *********** */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* *********** Zarovnání textu do bloku *********** */
.blok {
  text-align: justify;	
}

/* *********** Nadpisy pro stránky medů *********** */
.nadpisH2 {
  text-align: center;
  text-transform: uppercase; 
  font-size: 50px;
  font-weight: bold;	
  margin: 20px 0px 20px 0px;
}

.nadpisH3 {
  text-transform: uppercase; 
  font-size: 25px;	
  margin: 15px 0px 10px 0px;
}

.nadpisH4 {
 font-size: 18px;
 margin: 10px 0px 5px 0px;
}

/* *********** Tabulka pro stránky medů *********** */
.tabulka {
  margin-left: auto; 
  margin-right: auto;
  
}

.tabulka td{
  font-size: 16px !important;
}

.levypadding {
  padding-left: 30px;
}