/* CSS Document */
body {
  margin:0px;
  padding:0px;
  font-family: Arial, Tahoma;
  background-image: url("../images/background.jpg");
  background-repeat:repeat-x;
  background-color: #76d4fa;
  color:#ffffff;
  text-align:center;
  font-size:12px;
  font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

td{
	font-size:12px;
}

#main {
  text-align:left;
  margin: 0 auto;
  width:1049px;  
}

#head {
  background-image: url("../images/head.jpg");
  background-repeat: no-repeat;
  height:162px;
  padding-left:70px;
  position: relattive;
}

#head h2{
  margin:0px;
  padding:0px;
}

#logo {
  float:left;
  margin-top:110px;
  margin-left:0px;
}

#menu {
  float:right;
  margin-top:82px;
  padding-right:3px;
  
}

#submenu {
  float:right;
  width:540px;
  padding:3px 8px 0 0;
  color:#000000;
}

#submenu a{
  font-size:0.9em;
  color:#000000;
  text-decoration:none;
}

#submenu a:hover{
  color:#ffffff;
}
#menu img {
  float:left;
  border:none;
  margin:0px;
  padding:0px;
}

#textBox {
  margin-left:61px;
  background-repeat: repeat-y;   
  background-color:#0f0f0f;
  width:987px;
  background-image: url("../images/text_bg.jpg");
  background-position: left top;
 }
 
#text {
  padding:0px 20px 0px 0px;
  font-size:12px;
}

#text p {
  text-align:justify;
  margin:10px 0px 5px 0px;
  font-size:12px;
}

#right {
  float:right;
  width:643px;
  padding-right:25px;
  padding-left:20px;
  font-size:12px;
  background-image: url("../images/right_bg.jpg");
  background-position: left top;
  background-repeat:no-repeat;
  padding-top:10px;
}

#left {
  float:left;
  width:279px;
  height:459px;
  background-image: url("../images/videoBox.jpg");
  background-repeat: no-repeat;  
}

#video{
  float:left;
  padding:50px 0 0 55px;
}

#video p {
  font-size:0.75em;
  margin:0px;
  margin-top:10px;
  padding:0px;
}

#videoFrame1{
  margin:8px 0 0 5px;
  width:108px;
  height:102px;
  /*background-image: url("../images/videoFrame1.jpg");*/
  background-repeat:no-repeat;
  background-position: left bottom;
}

#videoFrame2{
  margin:8px 0 0 30px;
  width:108px;
  height:102px;
  /*background-image: url("../images/videoFrame2.jpg");*/
  background-repeat:no-repeat;
  background-position: left bottom;
}

#videoFrame3{
  margin:8px 0 0 50px;
  width:108px;
  height:102px;
  /*background-image: url("../images/videoFrame.jpg"); */ 
  background-repeat:no-repeat;
  background-position: left bottom;
}

.flash {
  width:102px;
  height:62px;
  margin-top:6px;
}


#right h1{
  letter-spacing:1px;
  color:#ffffff;
  font-size:24px;
  margin-bottom:20px;
}

#right h1 a{
  letter-spacing:1px;
  color:#ffffff;
  font-size:24px;
  margin-bottom:20px;
  text-decoration:none;
}

#right h2 {
  margin:20px 0;
  color:#ffffff;
  font-size:16px;
}

#ohnostroje h2 a{
  margin:0px;
  color:#FF6609;
  font-size:16px;
  text-decoration: none;
}

#ohnostroje h2{
  margin:0px;
  color:#FF6609;
  font-size:16px;
}

#kompakty h2 {
  margin:0px;
  color:#FF6609;
  font-size:16px;
}

#right h3 {
  margin:15px 0 5px 0;
  color:#ffffff;
  font-size:14px;
}

#right ul {
  padding:0 0 0 5px;
  margin:0 0 10px 15px;
  font-size:12px;
}

#right a{
	color:#FF780C;
}

#right a:hover{
	color:#FFFFFF;
}

#foot {
  background: url("../images/foot.jpg");
  background-repeat: no-repeat;
  height:127px;
}

.pyroBox {
  float:left;
  width:320px;
  font-size:12px;
  margin-top:0px;
  cursor:pointer;
  padding-top:5px;
  text-decoration:none;
  color:#000000;
}

.pyrobox a{
  display:inline;
}

#ohnostroje p{
	margin:0px;
	padding:0px;
}

#ohnostroje a{
	color:#000000;
}

#ohnostroje a:hover{
	color:#000000;
}

#kompakty p{
	margin:0px;
	padding:0px;
}

#kompakty a{
	color:#000000;
}

#kompakty a:hover{
	color:#000000;
}

#ohnostroje {
  padding:20px 0px 0px 15px;
  margin-top:25px;
  margin-left:50px;
  background: url("../images/ohnostroje.jpg");
  background-repeat: no-repeat;
  width:530px;
  height:121px;
  cursor:pointer;
}

#kompakty {
  margin-top:25px;
  padding:20px 0px 0px 15px;
  margin-left:50px;
  background: url("../images/kompakty.jpg");
  background-repeat: no-repeat;
  width:530px;
  height:121px;
  cursor:pointer;
}

#kompakty2 {
  margin-top:25px;
  padding:20px 0px 0px 15px;
  margin-left:50px;
  background: url("../images/kompakty2.jpg");
  background-repeat: no-repeat;
  width:530px;
  height:121px;
  cursor:pointer;
}

#ailista {
  clear: both;
  color: #000;
  padding: 40px 5px 5px 85px;
  font-size: 10px;
}

#ailista a{
  color: #000;
  text-decoration: none;
}



.setter {
clear:both;
}

.copyright {
  font-weight:normal;
  font-size:12px;
  color:#8bbe12;
  float:right;
  text-align:right;
  padding:0px 20px 0 0; 
}

.copyright a{
  color:#8bbe12;
}

#silver {
  color:#c1c1c1;
}

#silver:hover {
  color:#8bbe12;
}

a img{
  border:none;
}
img {
  border:none;
}

.clear
{
	clear: both;
}

.minibox{
	margin:20px 0px 0px 20px;
	float:left;
	width:250px;
	text-align:center;
}

.miniboxp{
	margin-right:30px;
	border:1px solid #FF780C;
}

.miniboxt{
	font-size:16px;
	padding-top:8px;
}

.tabulka
{
border: solid black 2px;
min-width: 1px;
_width: 1px; /* IE */
width: 100%;
}

.radek
{
clear: left;
}

.tabulka2{
width: 365px;
padding-top: 20px;
border: 0px;
padding-bottom: 20px;
}


.bunka
{
float: left;
border: solid #333 1px;
border: 0px;
padding: .2em .5em;
margin: -1px;
}

.bunka2{
width: 270px;
float: left;
border: solid #333 1px;
padding: .2em .5em;
margin: -1px;
border: 0px;
}


.hvezdicka{
width: 270px;
float: left;
padding: .2em .5em;
margin: -1px;
border: 0px;
padding-left: 6px;
color: #FF8700;
}


.hlavicka
{
font-weight: bold;
}

.cl
{
clear: both;
}

.matrjoska
{
width: 75px;
padding: .2em .5em;
border: 0px;
margin-top: 5px;
} 

.matrjoska2 input{
padding: .2em .5em;
width: 255px;
margin: 5px;
border: 0px;
}

.matrjoska2 textarea{
padding: .2em .5em;
width: 255px;
height: 80px;
margin: 5px;
border: 0px;
}
.button1{


}

.odeslat{
width: 60px;
height: 20px;
float: right;
padding-top: 8px;
border: 1px solid #808080;
margin-top: 5px;
text-align: center;
margin-right: 5px;
}

.odeslat a{
text-decoration: none;
}

.left{
width: 150px;
float: left;
position: relative;
}

.right{
padding-right: 250px;
width: 150px;
float: right;
position: relative;
}

#menu-mobil{
display: none;
}

#right div{
width: 100%;
float: left;
}

.menu-mobil{
display: none;
}

#butMobileMenu{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    line-height: 30px;
    height: 30px;
    display: block;
    text-align: center;
    float: right;
    z-index: 99999;
    height: 30px;
    background-image: url("../images/menu-mobil.jpg");
  background-repeat: no-repeat;
}
























@media (min-width: 0px) and (max-width: 479px) {
body {margin: 0px; padding: 0px; background-image: none; background-color: #000; color: #fff;}
body div{float: left; display: block;}
#head a{width: 100%; text-align: center; float: left;}
#logo {float: left; margin-top: 0px; margin-left: 0px; width: 100%; height: auto; /*max-width: 300px;*/}
#main, #head, #left, #right, #textBox, #menu, #foot, #video{padding: 0px; margin: 0px; height: auto; width: 100%; float: left; background-image: none;}
#menu-mobil{display: block; float: left; margin-top: 172px; width: 100%;}
#menu-mobil a{padding: 2%; margin-top: 2px; background: none; margin-left: 3%; margin-right: 3%; width: 90%; text-align: center; font-size: 16px; color: #fff; text-decoration: none; height: auto; cursor: pointer; float: left; background-color: #444; border-radius: 10px;}
#menu-mobil a:hover{background-color: #ff6609;}
#menu{display: none;}
#head{width: 100%; background-image: url(../images/back-01.jpg); background-size: 100% auto; background-position: top 40px center; min-height: 240px;}
#right h1 {text-align: center; margin-top: 40px;}


#ohnostroje, #kompakty {padding: 3%; color: #fff; margin-top: 25px; background: none; background-repeat: no-repeat; margin: 0px; margin-bottom: 3%; width: 94% !important; height: auto; cursor: pointer; float: left; background-color: #444; border-radius: 10px;}
#ohnostroje a, #kompakty a {color: #fff;}
#ohnostroje a:hover, #kompakty a:hover{color: #fff; text-decoration: underline;}

.pyroBox {float: left; width: 100%; font-size: 12px; margin-top: 0px; cursor: pointer; padding-top: 5px; text-decoration: none; color: #fff;}
#video{padding: 20px 0px 0px 15px;}

#foot span{color: silver; padding: 2%; width: 96%; text-align: center; margin-top: 30px; margin-bottom: 30px;}


#videoFrame1 {margin: 8px 0 0 5px;}
#videoFrame2 {margin: 8px 0 0 5px;}
#videoFrame3 {margin: 8px 0 0 5px;}

#text {padding: 2%; font-size: 12px; width: 96%; margin: 0px;}
#textBox{overflow: hidden;}

#right p, #right h1, #right h2, #right h3{float: left;}
#right p {width: 100%;float: left; text-align: center;}
#right h1, #right h2, #right h3{width: 100%;float: left; text-align: center;}
#right p a{width: 100%;float: left;}
#right p a img{width: 100%;float: left;}

table{width: 100%; display: block; overflow: auto; max-width: 300px; min-width: 100%;}
table tbody{min-width: 450px; width: auto; display: block;}
table tbody{width: 100%; display: inline-table;}

.galerie-foto table tr, .galerie-foto table td, .galerie-foto table tbody{width: 100%; max-width: 100%; min-width: 100%; float: left; }
.galerie-foto table td a img{width: 100%; height: auto; float: left; }

#butMobileMenu{top: 60px; right: 10px; width: 30px !important; line-height: 30px; height: 30px;}
#menu-mobil{display: none;}
/*#submenu{display: none;}*/
#submenu{display: block; float: left; margin-top: 50px; width: 100%;} 
#submenu a{padding: 2%; margin-top: 2px; background: none; margin-left: 3%; margin-right: 3%; width: 90%; text-align: center; font-size: 16px; color: #fff; text-decoration: none; height: auto; cursor: pointer; float: left; background-color: #444; border-radius: 10px;}
#submenu a:hover{background-color: #ff6609;}

}
















@media (min-width: 480px) and (max-width: 799px) {
body {margin: 0px; padding: 0px; background-image: none; background-color: #000; color: #fff;}
body div{float: left; display: block;}
#head a{width: 100%; text-align: center; float: left;}
#logo {float: none; margin-top: 0px; margin:0px auto; width: 100%; height: auto; max-width: 300px;}
#main, #head, #left, #right, #textBox, #menu, #foot, #video{padding: 0px; margin: 0px; height: auto; width: 100%; float: left; background-image: none;}
#menu-mobil{display: block; float: left; margin-top: 172px; width: 100%;}
#menu-mobil a{padding: 2%; margin-top: 2px; background: none; margin-left: 3%; margin-right: 3%; width: 90%; text-align: center; font-size: 16px; color: #fff; text-decoration: none; height: auto; cursor: pointer; float: left; background-color: #444; border-radius: 10px;}
#menu-mobil a:hover{background-color: #ff6609;}
#menu{display: none;}
#head{width: 100%; background-image: url(../images/back-01.jpg); background-size: /*300px*/ 65% auto; background-position: top 40px center; min-height: 240px;}
#right h1 {text-align: center; margin-top: 40px;}

#ohnostroje, #kompakty {padding: 3%; color: #fff; margin-top: 25px; background: none; background-repeat: no-repeat; margin: 0px; margin-bottom: 3%; width: 94% !important; height: auto; cursor: pointer; float: left; background-color: #444; border-radius: 10px;}
#ohnostroje a, #kompakty a {color: #fff;}
#ohnostroje a:hover, #kompakty a:hover{color: #fff; text-decoration: underline;}

.pyroBox {float: left; width: 100%; font-size: 12px; margin-top: 0px; cursor: pointer; padding-top: 5px; text-decoration: none; color: #fff;}
#video{padding: 20px 0px 0px 15px;}

#foot span{color: silver; padding: 2%; width: 96%; text-align: center; margin-top: 30px; margin-bottom: 30px;}

#videoFrame1 {margin: 8px 0 0 5px;}
#videoFrame2 {margin: 8px 0 0 5px;}
#videoFrame3 {margin: 8px 0 0 5px;}

#text {padding: 2%; font-size: 12px; width: 96%; margin: 0px;}
#textBox{overflow: hidden;}

#right p, #right h1, #right h2, #right h3{float: left;}

table{width: 100%; display: block; overflow: auto; max-width: 450px; min-width: 100%;}
table tbody{width: 600px; display: block;}

#right p, #right h1, #right h2, #right h3{float: left;}
#right p {width: 100%;float: left; text-align: left;}
#right h1, #right h2, #right h3{width: 100%;float: left; text-align: left;}
#right p a{width: 100%;float: left;}
#right p a img{width: 100%; height: auto; float: left;}

.galerie-foto table tr, .galerie-foto table tbody{width: 100%; max-width: 100%; min-width: 100%; float: left; }
.galerie-foto table td {width: 48%; max-width: 48%; min-width: 48%; float: left; }
.galerie-foto table td a img{width: 100%; height: auto; float: left; }

#butMobileMenu{top: 10px; right: 10px; width: 30px !important; line-height: 30px; height: 30px;}
#menu-mobil{display: none;}
/*#submenu{display: none;}*/
#submenu{display: block; float: left; margin-top: 50px; width: 100%;} 
#submenu a{padding: 2%; margin-top: 2px; background: none; margin-left: 3%; margin-right: 3%; width: 90%; text-align: center; font-size: 16px; color: #fff; text-decoration: none; height: auto; cursor: pointer; float: left; background-color: #444; border-radius: 10px;}
#submenu a:hover{background-color: #ff6609;}
}









@media (min-width: 800px) and (max-width: 999px) {
body {margin: 0px; padding: 0px; background-image: none; background-color: #000; color: #fff;}
body div{float: left; display: block;}
#head a{width: 100%; text-align: center; float: left;}
#logo {float: none; margin-top: 0px; margin:0px auto; width: 100%; height: auto; max-width: 300px;}
#main, #head, #left, #right, #textBox, #menu, #foot, #video{padding: 0px; margin: 0px; height: auto; width: 100%; float: left; background-image: none;}
#menu-mobil{display: block; float: left; margin-top: 172px; width: 96%; padding-left: 2%;}
#menu-mobil a{padding: 2%; margin-top: 2px; background: none; margin-left: 0px; margin-right: 0px; width: auto; float: left; text-align: center; font-size: 16px; color: #fff; text-decoration: none; height: auto; cursor: pointer; float: left; background-color: #444; border-radius: 10px; margin-right: 2px; }
#menu-mobil a:hover{background-color: #ff6609;}
#menu{display: none;}
#head{width: 100%; background-image: url(../images/back-01.jpg); background-size: /*300px*/ auto 90%; background-position: top 40px center;}
#right h1 {text-align: center; margin-top: 40px;}

#ohnostroje, #kompakty {padding: 3%; color: #fff; background: none; background-repeat: no-repeat; margin: 0px; margin-top: 25px; width: 94% !important; height: auto; cursor: pointer; float: left; background-color: #444; border-radius: 10px;}
#ohnostroje a, #kompakty a {color: #fff;}
#ohnostroje a:hover, #kompakty a:hover{color: #fff; text-decoration: underline;}

.pyroBox {float: left; width: 100%; font-size: 12px; margin-top: 0px; cursor: pointer; padding-top: 5px; text-decoration: none; color: #fff;}
#video{padding: 20px 0px 0px 15px;}

#foot span{color: silver; padding: 2%; width: 96%; text-align: center; margin-top: 30px; margin-bottom: 30px;}

#videoFrame1 {margin: 8px 0 0 5px;}
#videoFrame2 {margin: 8px 0 0 5px;}
#videoFrame3 {margin: 8px 0 0 5px;}

#text {padding: 2%; font-size: 12px; width: 96%; margin: 0px;}
#textBox{overflow: hidden;}

#right p, #right h1, #right h2, #right h3{float: none;}

table{width: 100%; display: block; overflow: auto; max-width: 450px; min-width: 100%;}
table tbody{width: 600px; display: block;}

#right .kontakt-box p, #right .kontakt-box h1, #right .kontakt-box h2, #right .kontakt-box h3 {float: none;}
.minibox {max-width: 360px;}

#butMobileMenu{top: 10px; right: 10px; width: 30px !important; line-height: 30px; height: 30px; display: none;}
#menu-mobil{display: block;}
/*#submenu{display: none;}*/
#submenu{display: block; float: left; margin-top: 10px; width: 96%; padding-left: 2%;} 
#submenu a{padding: 2%; margin-top: 2px; background: none; margin-left: 0px; margin-right: 0px; width: auto; float: left; text-align: center; font-size: 16px; color: #fff; text-decoration: none; height: auto; cursor: pointer; float: left; background-color: #444; border-radius: 10px; margin-right: 2px; }
#submenu a:hover{background-color: #ff6609;}

}                                                   


@media (min-width: 1000px) {
#right .minibox{margin: 20px 0px 0px 20px; float: left; width: 250px; text-align: center;}
#right p, #right h1, #right h2, #right h3{width: 100%; float: left;}
.reference-box h1, .reference-box h2, .reference-box h3{width: auto; float: none;}
.reference-box p{float: none !important;}
#right .kontakt-box p, #right .kontakt-box h1, #right .kontakt-box h2, #right .kontakt-box h3 {float: none;}
#butMobileMenu{display: none;}
}