/* CSS Document */




div {
  //border: 1px solid blue;
}

body{
  background: #99ff99 url('layout/bg-strip.png') repeat-x;
  color: #FFFFFF;
}


@media (max-width: 820px) {
	body{
	 background: none;
	}
}

.left {
	float: left;
}

.center{
  text-align: center;
}

.right{
  float: right;
}

.clean{
  float: both;
}


div.whole{
  max-width: 800px;
  margin: 2em auto 0px auto;
  background-color: #486748;
  position: relative;
  top: 0px;
  border: 1px solid #333;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

@media (max-width: 820px) {
  div.whole{
    margin: 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
  } 
}

div.hlavicka{
  position: relative;
  //top 20px;
  clear: none;
  //max-width: 800px;
  //height: 100px;
  margin: 0 auto 0 auto;
  //position: relative;
}

@media (max-width: 500px) {
  div.hlavicka{
   //height: 20px;
  }
}



#pravySloupek{
  color: #FFF;
  width: 250px;
  float: right;
  margin: 1em 2em 3em 0em;
  padding: 10px;
  text-align: right;
}

@media (max-width: 750px) {
  #pravySloupek{
    display: none;
  }	
  
  .topnav{
    //display: none;
  }
}  


#levySloupek{
  max-width: 480px;
  float: left;
  margin: 2.4em 0 0 0.2em;
}

@media (max-width: 500px) {
  #levySloupek{
   margin: 0em;
  }
}

#logo{
 //max-width: 450px;
 //height: 100px;
 position: relative;
 left: 30px;
 //top: -15px;
}

@media (max-width: 750px) {
  #logo{
  top:-30px;
  left:0;
  width: none;
  height: 80px;
  }
}

#logo h1{
  font-size: 0.8em;
  color: transparent;
}

@media (max-width: 750px) {
  #logo h1{
   font-size: .8em; 
   text-align: center; 
  }
}

h1 a{
 background: none;
 max-width: 370px;
 height: 120px;
 text-decoration:none;
 display: block;
 //overflow: hidden;

}

h1 span{
 background-image: url('layout/logo-pechan2nd.jpg');
 width: 450px;
 height: 150px;
 left: 0px;
 top: -30px;
 position: absolute;
 //z-index: 2;
}

@media (max-width: 500px) {
	h1 a{
	 height: 80px;
	}
	
  h1 span{
    //overflow:hidden;
    //height: 80px;
    //  display: none;
    //background-image: none;
/*     position: absolute; */
    top: 3px;
    left: 1em;
    //position: absolute;
    
    -ms-transform: scale(0.7); /* IE 9 */
    -moz-transform-origin: top left;    
    -webkit-transform: scale(0.7); /* Safari */
    -o-transform-origin: top left;
    transform: scale(0.7); /* Standard syntax */
    -webkit-transform-origin: top left;
  }
}


div.main{
	clear:both;
  margin: 0 auto 0 auto;
}

div.inner{
	clear: both;
	padding: 1em 1em 0 1em;
  margin: 0 auto 0 auto;

}

div.paticka{
  clear: both;
  width: 100%;
  height: 1.5em;
  padding-top: 0.3em;
  //background-color: #339933;
  color: #000;
  text-align: center;
}

div.paticka a{
  color: #000;
}

a{
  font-weight: normal;
  color: #aaa;
  text-decoration: underline;
}

a:hover{
  text-decoration: none;
  color: #999;
}

a.mail{
  text-decoration: underline;
}

a.mail:hover{
  text-decoration: none;
}


h1{
  /*text-align: center;*/
  color: #dddddd;
  padding-bottom: 0.3em;
  margin: 2em 0 2em 5%;
  
}

h2{
	font-size: 1.5em;
  padding-left: .5em;
  text-align: center;
}

h3{
	font-size: 1.4em;
  margin-left: 1em;
  //text-align: center;  
}

@media (max-width: 400px) {
	h2, h3{
	 
	 //padding-left: .5em;;
	}
	h2 {
	 margin-left: .2em;
	 font-size: 1.3em;
	}
	h3 {
	 margin-left: .1em;
	 font-size: 1.2em;
	}
}



h4{
  margin: 0.3em 0 0.2em 1.3em;
}

img.nB{
  border: 0px;
}

.imageLabel{
	margin-bottom: 2em;
}

.imageLabel img{
  margin-bottom: .3em;
}

.imageLabel span{
	text-align: left;
  margin-left: 2em;
}

ul li{
  padding-bottom: .1em;
}

ul.storages li span{
	font-size: .9em;
	color: #DDD;
}

p{
  text-align: justify;
  margin-bottom: 1em;
}

p.odst{
  margin: 0 auto 0 auto;
  text-indent: 1.5em;
  line-height: 1.2em;
  padding-bottom: .5em;
  text-align: justify;  
  clear: both;
}

.cervene {
	color: #FF0000;
}

.input {
	margin-bottom: .5em;
}

.input div{
  width: 9em;
  display: inline-block;
}

.input input{
  display: inline-block;
}

textarea, input{
  color: #000;
}

input[type=submit] {
	display: inline-block;
	margin-left: 4em;
	color: #000;
}

table.tb1{
  border-collapse: collapse;
  width: 90%;
  margin: 0 auto 0 auto;
  border-width: 0px
}

table.tb2{
  border-collapse: collapse;
  width: 70%;
  margin: 20px auto 0 auto;
  border-width: 1px
}

table.border{
  border-collapse: collapse;
  width: 90%;
  margin: 0 auto 0 auto;  
  border: 1px solid #FFF;	
}

table.border td{
  border: 1px solid #FFF; 
}

div.contactWindow {
	max-width: 400px;
	float: left;
}


td{
  padding-left: 0.5em;
}

td.data{
  color: #44ee55;
}

td.w5p{
  width: 5%;
  text-align: center;
}

td.w30p{
  font-weight: bold;
  width: 30%;
  padding-right: 1em;
}

td.w15p{
  font-weight: bold;
  width: 15%;
  padding-right: 1em;
  text-align: right;
}

table.cenik tr td:nth-child(2) {
	width: 3.5em;
	text-align: right;
	padding-right: .2em;
	font-weight: bold;
}

fieldset{
  max-width: 700px;
  margin: 0 auto 0 auto;
}

.ramecek{
  border: 1px solid #fff;
  padding: 5px;
  color: #000;
}

.yellow-ramecek {
	border: 1px dashed yellow; 
	color: yellow; 
	padding: 0 1em 0 1em;
}

.podpis {
	 float: right; 
	 padding: 0 4em 1em 0;
	 font-weight: bold;
}



ul.navigace {
  max-width: 700px;
  position: relative;
  //float: left;
  list-style: none;
  //line-height: normal;
}


ul.navigace li {
  float: left;
  margin-right: 1.5em;
  text-transform: uppercase;
  //width: 4em;
  //padding: 1em 1em;
  font-size: 1.2em;
}

ul.navigace li a{
  //display: block;
  height: 35px;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  
}

ul.navigace li a:hover{
  color: #bbb;
}


/*
ul.navigace li strong{
  background: url('layout/under-strip2nd.gif') no-repeat bottom left;
  color: #fff;
  padding: 5px 0 5px 0;
}
*/


.topnav {
  overflow: hidden;
}



.active {
  background-color: #4CAF50;
  color: white;
}

.topnav ul li.icon {
  display: none;
}

.topnav ul li.icon a {
  color: #FFF;
}

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media (max-width: 700px) {
  .topnav ul li:not(:nth-child(2)) {display: none;}
  .topnav ul li.icon {
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media (max-width: 700px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive ul li.icon {
  }
  .topnav.responsive ul li{
    float: none;
    display: block;
    text-align: left;
  }
} 

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(232, 98, 86, 0.8) url(/images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s, background-color .3s 0s;
  transition: opacity .3s 0s, visibility 0s .3s, background-color .3s 0s;
}

.cd-top.cd-top--show,
.cd-top.cd-top--fade-out,
.cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s, background-color .3s 0s;
  transition: opacity .3s 0s, visibility 0s 0s, background-color .3s 0s;
}

.cd-top.cd-top--show {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}

.cd-top.cd-top--fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}

.cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}