/* ********* definice obecnych HTML znacek ********* */
body {
    margin: 0px 0px 15px 0px;
    padding: 0px;
    font-family: sans-serif;
    font-size: 0.8em;
    background-color: white;
    background-image: url('../images/bg.jpg');
    background-repeat: repeat-x;
    color: rgb(25,23,24);
}

img { border: none;}
form {padding: 0px;margin: 0px;}
a {color: rgb(245,173,70);text-decoration: underline;}
a:hover {color: rgb(89,93,76);}

h1 {font-weight: normal;margin: 0px;}
h2 {font-weight: normal;margin: 0px;font-size: 110%;   font-weight: bold;}
h3 {margin: 0px;color: rgb(128,128,128);font-size: 120%;font-weight: normal;}
h4 {color: rgb(128,132,105);font-size: 100%;font-weight: bold;margin: 0px;}
textarea {font-family: sans-serif;font-size: 100%;}
.clear {clear: both;font-size: 1px;line-height: 1px;height: 1px;}
.back {display: block;margin: 20px 0px 0px 0px;font-weight: bold;text-decoration: none;}
.back:hover {text-decoration: underline;}
.layout { border-collapse: collapse;}
.nextRight {float: right;}

/********************* lists **********************/

ul li {margin: 0px 0px 10px 0px;padding: 0px;}
ul li .sub {margin: 0px;padding: 0px;}


.odrazky {margin: 10px 0px 10px 10px;padding: 0px 0px 0px 20px;}
.odrazky li {list-style-image: URL('/images/odrazka.gif');padding: 0px 0px 7px 0px; margin: 0;}
.odrazky a {color: rgb(0,130,68);}
.odrazky a:hover { color: rgb(245,173,70);}


/********************* page **********************/
#page {position: relative; width: 993px;text-align: left;margin: auto;}
#header {position: relative;text-align: left;height: 120px;margin-bottom: 10px;}
#logo {position: absolute;display: block;top: 0px;left: 15px;z-index: 1;}
#claim, #claimLogo {float: right;position: relative;margin: 78px 15px 0px 0px;z-index: 3;}
#webTitle {position: absolute;top: 10px;left: 20px;font-size: 110%;color: black; z-index: 0;   }
#webTitle .perex {display: block;font-size: 80%;  line-height: 12px; }

/* ******************************************* */
/* ************ menu *********** */
/* ******************************************* */

#menu {padding: 0px;margin: 0px 0px 20px 20px;}
#menu ul {margin: 0px;padding: 0px;}
#menu ul li {list-style: none;display: block;width: 250px;height: 19px;padding: 0px;margin: 0px 0px 5px 0px;}
#menu ul li a, .links ul li a, .links ul .contactFriends a {font-weight: bold;font-size: 120%;text-decoration: none;background-image: url('../images/icoMenu.gif');background-repeat: no-repeat;background-position: top left;display: block;color: rgb(245,173,70);padding: 0px 0px 0px 26px;margin: 0px;cursor: pointer;}
#menu ul li a:hover, #menu ul a.active, .links ul li a:hover, .links ul a.active {background-image: url('../images/icoMenuCurrent.gif');background-repeat: no-repeat;background-position: top left;color: rgb(89,93,76);}
#menu .pdf a {background-image: url('../images/ico-pdf.png');background-position: -2px 0;height: 25px}
#menu .pdf a:hover {background-image: url('../images/ico-pdfCurrent.png');background-position: -2px 0;}


/* ********* MENU MOBILE  ********* */

    #mobileMenu {display:none; top: 0; left: 0;}

    .slicknav_menu {display:none; width: 100%; top:0px; padding: 0; margin: 0;z-index: 9996;position: absolute;background-color: rgba(120,120,120,0.96);} 
    .slicknav_btn {    float: right; z-index: 9995; position: absolute; top: 20px; right: 20px; left: auto; width: 46px; padding: 7px 6px 10px 6px;  background-color: transparent;  }
    .slicknav_btn .close {  display: absolute; left:0; top:0; }

    .slicknav_menu .slicknav_icon { float: none;}
    .slicknav_menu .slicknav_icon-bar { display: block; width: 100%; height: 3px; background-color: rgb(120,120,120); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; box-shadow: none; -webkit-box-shadow: 0; -moz-box-shadow: 0; box-shadow: 0; }
    .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.4em }
    .slicknav_menu .slicknav_icon .slicknav_no-text { padding: 0; }
 
    .slicknav_nav   {  font-size: 170%; padding: 0 0 20px 0;}
    .slicknav_nav ul  {  margin: 0; padding: 40px 0 20px 0; text-align: center;list-style: none; overflow: auto; }
    .slicknav_nav ul a, .slicknav_nav ul li a:hover  {  letter-spacing: 2px; color: white; padding: 0; margin: 0;text-decoration: none; }
    .slicknav_nav ul li   { padding: 0 10px 5px 10px;}
    
    .slicknav_nav ul li a:hover, .slicknav_nav ul>li>ul>li a:hover {color: rgb(134,231,185);background-color:transparent;}


    .slicknav_nav ul li ul a:hover, .slicknav_nav ul li ul .slicknav_row,.slicknav_nav ul a:focus, .slicknav_nav ul li ul a:focus  
    { outline: none;}


    .slicknav_nav ul ul { padding: 15px 0 0 20px;list-style: none; height: auto!important; font-size: 90%;}

    .slicknav_nav .slicknav_arrow { font-size: 80%; }
    .btnClose { display: block; width:38px; height: 23px; margin:0;background-image: url('../images/btn-close.png');background-position: center top;background-repeat: no-repeat;}



.links {position: relative;}
.links ul .contact a:hover, .links ul .contact a.active {background-position: top right;}
.links ul {padding: 0px;margin: 0px 0px 0px 0px;}
.links ul li, .links ul .contactFriends {list-style: none;padding: 0px;margin: 0px 22px 10px 0px;text-align: right;}
.links ul .contactFriends { margin: 20px 0px 0px 15px;text-align: left;}
.links ul .contactFriends a {background-image: url('../images/ico-contactFriends.jpg');height: 30px;padding: 5px 0px 0px 53px;background-position: 0 -44px;}
.links ul .contactFriends a:hover, .links ul .contactFriends a.active {background-image: url('../images/ico-contactFriends.jpg');background-position: 0 0;}
.links ul li a {background-position: top right;padding: 0px 23px 0px 0px;}
/********************* main content **********************/

.container {padding: 0;margin: 0;background-image: url('../images/mainContentBg.gif');background-repeat: repeat-y;}
.inside {width: 991px;margin: 0px 1px 0px 1px;}
.leftColumn {float: left;width: 340px;padding: 0px 0px 65px 0px;margin: 0;position: relative;min-height: 550px;_height: 550px;position: relative;background-image: url('../images/madeInGermany.gif');background-repeat: no-repeat;background-position: bottom left;}
#mainContent {padding: 0px 20px 0px 20px;margin: 0px 0px 0px 330px;}
#mainContent p {display: block;}

.homeVisual  {width: 100%;}
.homeVisual img, .homeVisual .cycle-sentinel  {width: 100%; height: auto;}
.articleVisual {display: block; float: right; margin-left:20px;;}
cycle-sentinel

/* ************ news********** */
/* ******************************************* */

#newsBox {position: relative;width: 295px;height: 275px;margin: 30px 0px 20px 0px;z-index: 99;background-position: bottom left;background-repeat: no-repeat;background-image: url('/images/illustration-left-column.png');}
.newsLink {display: block;width: 295px;height: 275px;text-decoration: none;font-size: 0px;}

.news {padding: 10px 20px 10px 20px; }
.news a {font-size: 130%;text-decoration: none; color: rgb(0,130,68);}


/* ************ home Box *********** */
#homeBox { position: absolute;width: 490px;height: 183px;top: 614px;left: 435px;z-index: 70;font-size: 110%;line-height: 125%;}
#homeBox .title {font-size: 113%;color: rgb(25,23,24);margin: 0px 0px 0px 0px;}
#homeBox a {color: rgb(25,23,24);}
#homeBox p {margin: 7px 0px 0px 0px;padding: 0px 0px 0px 0px;}


/* ************ article *********** */
.sectionTitle {color: rgb(150,150,150);font-size: 150%;font-weight: normal;margin: 10px 0px 10px 0px;}
.sectionTitle a {font-size: 70%;font-weight: bold;text-decoration: none;}
.sectionTitle a:hover {color: rgb(89,93,76);}
.articleTitle {color: rgb(128,132,105);font-size: 200%;font-weight: normal;margin: 0px 0px 20px 0px;}



/* ************ gallery pattern *********** */
#gallery img {border: none;}
.galleryPattern img {border: none;}
.galleryPattern .sampleNum {display: block;margin: 0px 0px 12px 0px;}
.galleryPattern .gallerySpace {display: block;margin: 0px 12px 6px 0px;}
#gallery .title {display: none;margin: 5px 0px 8px 0px;font-size: 74%;}

.accessories {width: 252px; float: right;margin: 0px 0px 10px 20px;}
.accessories .item {display: block;margin: 0px 0px 6px 0px;}

/********************* footer ****************************/
#footer { margin: 5px 0px 20px 20px;padding: 0px;}
#footer .copy .copyright {color: rgb(127,126,105);font-size: 88%; display: block; margin-top:4px;}
#footer .copy .developer a {text-decoration: none;color: rgb(169,169,169);}
#footer .copy .developer a:hover {text-decoration: underline;}

/********************* highslide forms ****************************/

.hsFormBody {margin: 0px 0px 0px 5px;padding: 0px;font-family: "Myriad Web" , sans-serif;font-size: 0.8em;background-color: rgb(255, 255, 255);color: black;}
.hsFormBody .contacts {width: 300px;}
#hsFormMainContent {padding: 15px 15px 25px 15px;margin: 0px 0px 10px 20px;background-color: white;}
.errorLabel {color: #AA0000;text-align: center;font-weight: bold;font-size: 90%;    }
.messageSent {text-align: center;padding: 10px;}


/************************** contact form *****************************/

#contactForm {width: 482px;background-image: url('../images/sendFormMiddle.jpg');background-repeat: repeat-y;}
#contactForm .inside {padding: 0px 30px 0px 30px;color: rgb(126,126,126);min-height: 350px;_height: 350px;}
#contactForm .confirmMessage {display: block; padding-top: 20px;}
#contactForm .confirmMessage a {display: block; padding: 10px; text-align: center; font-weight: bold;}
#contactForm textarea {height: 60px;}
#contactForm .label {display: block; padding: 15px 0px 3px 0px;}
#contactForm .inputItem {width: 418px; border: solid 1px rgb(126,126,126);}
#contactForm .buttons {padding-top: 25px; padding-bottom: 10px;}
#contactForm .buttons .submit {width: 128px; height: 30px;border: 0px;cursor: pointer; color: white;text-align: left;padding: 1px 0px 0px 10px; font-size: 100%; font-weight: bold;background-image: url('../images/buttonSend.gif');background-repeat: no-repeat;background-position: top left;background-color: white;}
#contactForm .buttons .submit:hover {background-image: url('../images/buttonSendHover.gif');padding: 2px 0px 0px 11px; }
  #contactForm .note {width: 418px;text-align: justify;font-size: 90%;}

/************************** 5 let zaruka *****************************/
.zaruka {float: right;position: relative;top: 85px;right: 100px; width: 129px;height: 38px;}


/************************** 5 let zaruka *****************************/
.highslide-caption {font-weight: normal;font-size: 100%;text-align:left;}  
  
.highslide-caption .captiontitle  {font-weight: bold;}         

/************************** navigation *****************************/

.navigation  {font-weight: normal;margin: 0px 16px 10px 0px;} 
.navigation a {text-decoration: none;}  
.navigation .left {float: left;}


/************************** realisation *****************************/

#realisations {display: block;margin: 20px 0px 0px 0px;text-align: center;}
#realisations .item {float: left;display: block;width: 151px;margin: 0px 50px 34px 0px;}
#realisations .itemII {float: left;width: 151px;margin: 0px 50px 0px 100px;}
#realisations img {display: block;padding: 0px 0px 8px 0px;}
#realisations .title {display: block;background-image: url('../images/odrazka2.gif');background-repeat: no-repeat;background-position: top left;padding: 0px 0px 0px 15px;font-weight: bold;font-size: 104%; text-align: left;}
#realisations a {text-decoration: none;color: rgb(89,93,76); }
#realisations a:hover {color: rgb(245,173,70);}




@media screen and (max-width: 1020px) {  
    #header {height: 90px;}
    #page, .inside  {width: 100%;}
    .mainContentBgTop, .mainContentBgBottom  {display: none;}
    .container {border-top: 1px solid rgb(166,166,166);border-bottom: 1px solid rgb(166,166,166); padding-bottom: 30px;}
    .container .inside    {margin:0;}
    #mainContent {padding: 20px 20px 20px 20px; margin: 0 0 0px 41%;}
    .leftColumn {width: 40%; }
    .leftVisual {width: 100%; }
    #newsBox  {width: 100%; height: auto;}
    #newsBox .newsLink, #newsBox .newsLink img {width: 100%;height: auto; }    
    #logo {top: -33px;}
    #webTitle {top: 0px; }  
    #claim, #claimLogo {margin-top: 48px;}
    #menu {margin-top: 20px;}
    
    #gallery td img {width: 100%!important; height: auto!important; }
    
  }
  
@media screen and (max-width: 900px) {  
    /*.container {margin-top: 50px;background-image: none; } */  
    .js #menu {display:none;}
    .js .slicknav_menu {display:block;} 
    #mainContent {margin: 35px 0 0px 41%;}
    .leftColumn {top:35px }
    .links  {display:none;}
    #header {height: 72px;}
    #claimLogo {top: 45px; margin-right: 25px;}
    #claim {top: 55px; }
    
    #contactForm  {width: 100%;}
    #contactForm img  {width: 100%!important; height:auto!important;}
    #contactForm {background-image: none; border: 1px solid rgb(199,207,202); background-color: rgb(254,254,254);
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
    #contactForm img {display: none;}    
    #contactForm .inside {padding: 0px; margin: 0 30px 0 20px;}
    #contactForm .inputItem, #contactForm .buttons {width: 86%;}
    
    .odrazky {margin: 0px 0px 10px 10px;} 
    
    .articleVisual {float: none;margin-bottom:10px;} 
      
  }  

@media screen and (max-width: 600px) {    	
    #claimLogo {margin: 0; top: 95px; display: block;float: none; text-align: center;}
    #claim {margin: 0 auto 0 auto; top: 105px; float: none;display: block;text-align: center;}
     #mainContent {margin: 60px 0 0px 41%;}
     #mainContent .odrazky {padding-top: 20px;}
    .leftColumn {top:55px }
    

  }
  
    
@media screen and (max-width: 500px) {    	
    #logo, #webTitle  {left: 0; right: 0;text-align: center;}
    .slicknav_menu {top:83px;}
    .slicknav_btn {    float: none; top: 8px; right: 0; left: 0; margin: auto;}
    #claimLogo {top: 137px;}
    #claim {display: none;}
    
    .leftColumn {float: none; width: 100%; min-height: auto; height: auto; margin: 60px 0 20px 0;padding: 0px 0px 10px 0px;background-image: none;}
    /*.leftVisual {width: 100%!important; }   */
    #mainContent {position:relative; margin: 20px 0 20px 0; padding: 0 10px;}
    #mainContent .odrazky {padding-top: 0px; margin-top:0;}
    .slicknav_nav ul  {  padding: 65px 0 20px 0; }
    #newsBox {margin:0;}.newsContact  {text-align: center;}
    .leftNew, #newsBox, .leftVisual, .news {display: none;}
    
    
    #gallery {margin-top:10px;}
    .articleVisual  {width: 100%!important; float:none; }
    
    #footer{margin: 5px 0px 20px 0px;}
    #footer .copy {text-align: center;}
  }

  
  @media screen and (max-height: 400px) {    	
    #claim {display: none;}
    #mainContent .odrazky {padding-top: 0px; margin-top:0;}
    #mainContent {margin-top: 35px;}
    .leftColumn {top:38px }
  }