/* CSS Document */

/* bxslider - full sceen */ 

body, html{
    height: 100%; 
} 


.bxslider, .bxslider li{
    height: 100% !important;;
}

/* */  

div {
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #333333;
}

td {
    line-height: 24px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #333333;
   }
   
ul {
     margin: 0px 20px 0px 0px;
   }
   
.stred {margin: 0px auto;}

a {color: #02ace8; text-decoration: none;}
a:hover {color: #02ace8; text-decoration: underline;}

/*
.tlacitko-carka-bile {float: left; color: #ffffff; font-size: 14px; line-height: 14px; border: 1px solid #ffffff; padding: 8px 32px 7px 32px; text-decoration: none; text-transform: uppercase;}
.tlacitko-carka-bile:hover {float: left; color: #000000; font-size: 14px; line-height: 14px;  background: #ffffff; border: 1px solid #ffffff; padding: 8px 32px 7px 32px; text-decoration: none; text-transform: uppercase;}

.tlacitko-zlute {float: left; color: #ffffff; font-size: 12px; line-height: 14px; background: #f3c766; border: 1px solid #f3c766; padding: 8px 32px 7px 32px; text-decoration: none; margin-bottom: 10px; text-transform: uppercase;}
.tlacitko-zlute:hover {float: left; color: #ffffff; font-size: 12px; line-height: 14px;  background: #f9bf3f; border: 1px solid #f9bf3f; padding: 8px 32px 7px 32px; text-decoration: none; margin-bottom: 10px; text-transform: uppercase;}
*/

.tlacitko-modre {color: #ddf4fc; font-size: 14px; line-height: 14px; background: #02ace8; border: 1px solid #02ace8; padding: 8px 40px 7px 40px; text-decoration: none; margin-bottom: 10px; text-transform: uppercase;}
.tlacitko-modre:hover {color: #ddf4fc; font-size: 14px; line-height: 14px;  background: #038ab9; border: 1px solid #038ab9; padding: 8px 40px 7px 40px; text-decoration: none; margin-bottom: 10px; text-transform: uppercase;}

.text-paticka {color: #ffffff;}
.odkaz-paticka {color: #ffffff; text-transform: uppercase;font-size: 14px; line-height: 14px; padding-right: 40px;}
.odkaz-paticka:hover {color: #ffffff; text-transform: uppercase;font-size: 14px; line-height: 14px; padding-right: 40px;}

.text-bily {color: #ffffff;}
.text-bily-upoutavka {color: #ffffff; font-size: 18px; line-height: 18px;}

/* desktop */
@media screen and (min-width:1300px) {
  .logo {float: left; z-index: 6; position: absolute; left: 0px; top: 40px;}
  .logo a:before {content: url('../../../Image/user_img/candy_servis_sk/obecne/logo.png'); }
  .menu-carky {float: right; position: relative; margin-top: 27px; margin-right: 60px;} 
  .menu {float: left; clear: both; display: block; width: 100%; margin-top: 102px;} 
  .kontakt-fidelia {float: left; z-index: 6; position: absolute; right: 0px; top: 52px;}
  .kontakt-fidelia-a {float: left; clear: both; position: relative;}
  .kontakt-fidelia-b {float: left; clear: both; position: relative; margin-top: 12px;}    
  .menu-mobile {float: right; display: none;}
  .menu-mezera {float:left; padding: 0px 10px 0px 10px;}
  .menu-mezera-big {float:left; padding: 0px 120px 0px 120px;}
  .pod-menu {display: block;}
}                        
/* tablet */                 
@media screen and (min-width:1050px) and (max-width:1299px) {
  .logo {float: left; z-index: 6; position: absolute; left: 0px; top: 40px;}
  .logo a:before {content: url('../../../Image/user_img/candy_servis_sk/obecne/logo.png'); }
  .menu-carky {float: right; position: relative; margin-top: 27px; margin-right: 60px;} 
  .menu {float: left; clear: both; display: block; width: 100%; margin-top: 102px;} 
  .kontakt-fidelia {float: left; z-index: 6; position: absolute; right: 0px; top: 40px;}
  .kontakt-fidelia-a {float: left; clear: both; position: relative;}
  .kontakt-fidelia-b {float: left; position: relative; margin-left: 25px;}     
  .menu-mobile {float: right; display: none;}
  .menu-mezera {float:left; padding: 0px 10px 0px 10px;}
  .menu-mezera-big {float:left; padding: 0px 120px 0px 120px;}
  .pod-menu {display: none;}     
}
/* mobile */
@media screen and (min-width:0px) and (max-width:1049px) {
  .logo {float: left; z-index: 6; position: absolute; left: 0px; top: 75px;}
  .logo a:before {content: url('../../../Image/user_img/candy_servis_sk/obecne/logo.png'); } 
  .menu-carky {float: right; position: relative; margin-top: 43px; margin-right: 20px;}
  .menu {float: right; display: none;}
  .kontakt-fidelia {float: left; z-index: 6; position: absolute; right: 0px; top: 40px;}
  .kontakt-fidelia-a {display: none;}
  .kontakt-fidelia-b {display: none;}    
  .menu-mobile {float: right; width: 100%; display: block; margin-top: 25px;}
  .menu-mezera {}
  .menu-mezera-big {}
  .pod-menu {display: none;}
}

/* desktop */
@media screen and (min-width:1300px) {
  .obsah {width: 100%;}
  .hlavni {max-width: 1240px; width: 100%;}
  .table-2-sloupce {width: 42%; margin: 0px 4% 0px 4%;}
  .table-3-sloupce {width: 31%; margin: 0% 1% 0% 1%;}
  .nadpis {float: left; width: 100%; font-size: 40px; line-height: 48px; padding-bottom: 40px;}
  .nadpis-bily {float: left; width: 100%; font-size: 40px; line-height: 48px; padding-bottom: 40px; color: #ffffff;}
  .table-home-img {float: left; width: 42%; background: #ffffff; opacity: 0.8; border-top: 3px solid #02ace8; padding: 20px; margin: 320px 0px 0px 0px;}
  .table-home-img-nadpis {float: left; width: 100%; font-size: 30px; line-height: 36px; padding-bottom: 10px; color: #02ace8;}
  .nadpis-bez-odsazeni {padding: 0px 0px 35px 0px; color: #041f41; font-size: 24px; line-height: 24px; font-weight: 600;}
  .input-control {float: left; width: 280px; height: 34px; border: 1px solid #dbd7d7; }
  .input-control input {height: 34px; width: 280px; padding: 8px 6px 6px 20px; border: none; font-size: 14px; }
  .control-textarea {height: 100px; width: 585px; padding: 8px 6px 6px 20px; border: 1px solid #dbd7d7; font-size: 14px; }
  .select-control {float: left; width: 280px; height: 34px; border: 1px solid #dbd7d7; }
  .select-control select {height: 34px; width: 280px; padding: 8px 6px 6px 20px; border: none; font-size: 14px; }
  .menicko {float: left; position: relative; width: 31%; margin: 0% 1% 0% 1%; height: 70px; background-color: #ffffff; margin-bottom: 20px;}
  .menicko:hover {float: left; position: relative; width: 31%; margin: 0% 1% 0% 1%; height: 70px; background-color: #D6D4D4; margin-bottom: 20px;}            
  .menicko-in {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 90%; padding: 0% 5% 0% 5%; line-height: 16px; font-size: 14px;}
  
}                        
/* tablet */                 
@media screen and (min-width:808px) and (max-width:1299px) {
  .obsah {width: 100%;}
  .hlavni {width: 90%;}
  .table-2-sloupce {width: 42%; margin: 0px 35px 0px 35px;}
  .table-3-sloupce {width: 31%; margin: 0% 1% 0% 1%;}
  .nadpis {float: left; width: 100%; font-size: 40px; line-height: 48px; padding-bottom: 40px;}
  .nadpis-bily {float: left; width: 100%; font-size: 40px; line-height: 48px; padding-bottom: 40px; color: #ffffff;}
  .table-home-img {float: left; width: 70%; background: #ffffff; opacity: 0.8; border-top: 3px solid #02ace8; padding: 20px; margin: 320px 0px 0px 0px;}
  .table-home-img-nadpis {float: left; width: 100%; font-size: 30px; line-height: 36px; padding-bottom: 10px; color: #02ace8;}
  .nadpis-bez-odsazeni {padding: 0px 0px 35px 0px; color: #041f41; font-size: 24px; line-height: 24px; font-weight: 600;}
  .input-control {float: left; width: 280px; height: 34px; border: 1px solid #dbd7d7; }
  .input-control input {height: 34px; width: 280px; padding: 8px 6px 6px 20px; border: none; font-size: 14px; }
  .control-textarea {height: 100px; width: 585px; padding: 8px 6px 6px 20px; border: 1px solid #dbd7d7; font-size: 14px; }
  .select-control {float: left; width: 280px; height: 34px; border: 1px solid #dbd7d7; }
  .select-control select {height: 34px; width: 280px; padding: 8px 6px 6px 20px; border: none; font-size: 14px; }
  
  
}
/* mobile */
@media screen and (min-width:0px) and (max-width:807px) {
  .obsah {width: 100%;} /* 100% */
  .hlavni {width: 90%;}
  .table-2-sloupce {width: 90%; margin: 0px 5% 0px 5%; clear: both;}
  .table-3-sloupce {width: 90%; margin: 0px 5% 0px 5%; clear: both;}
  .nadpis {float: left; width: 100%; font-size: 40px; line-height: 48px; padding-bottom: 40px;}
  .nadpis-bily {float: left; width: 100%; font-size: 40px; line-height: 48px; padding-bottom: 40px; color: #ffffff;}
  .table-home-img {float: left; width: 90%; background: #ffffff; opacity: 0.8; border-top: 3px solid #02ace8; padding: 20px; margin: 320px 0px 0px 0px;}
  .table-home-img-nadpis {float: left; width: 100%; font-size: 30px; line-height: 36px; padding-bottom: 10px; color: #02ace8;}
  .nadpis-bez-odsazeni {padding: 0px 0px 35px 0px; color: #041f41; font-size: 24px; line-height: 24px; font-weight: 600;}
  .input-control {float: left; width: 280px; height: 34px; border: 1px solid #dbd7d7; }
  .input-control input {height: 34px; width: 280px; padding: 8px 6px 6px 20px; border: none; font-size: 14px; }
  .control-textarea {height: 100px; width: 280px; padding: 8px 6px 6px 20px; border: 1px solid #dbd7d7; font-size: 14px; }
  .select-control {float: left; width: 280px; height: 34px; border: 1px solid #dbd7d7; }
  .select-control select {height: 34px; width: 280px; padding: 8px 6px 6px 20px; border: none; font-size: 14px; }
  
  
} 

.responsive {
    padding: 0px 0px 0px 0px;
    float: left;
    width: 24.99999%;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.responsive-1 {width: 24.25%; margin: 0% 1% 0% 0%;}
.responsive-2 {width: 24.25%; margin: 0% 1% 0% 0%;}
.responsive-3 {width: 24.25%; margin: 0% 1% 0% 0%;}
.responsive-4 {width: 24.25%; margin: 0% 0% 0% 0%;}

@media only screen and (max-width: 700px){
    .responsive {width: 49.99999%; margin: 6px 0;}
    .responsive-1 {width: 49.00%; margin: 0% 2% 0% 0%;}
    .responsive-2 {width: 49.00%; margin: 0% 0% 0% 0%;}
    .responsive-3 {width: 49.00%; margin: 0% 2% 0% 0%;}
    .responsive-4 {width: 49.00%; margin: 0% 0% 0% 0%;}
}

@media only screen and (max-width: 500px){
    .responsive {width: 49.99999%; margin: 6px 0;}
    .responsive-1 {width: 49.00%; margin: 0% 2% 0% 0%;}
    .responsive-2 {width: 49.00%; margin: 0% 0% 0% 0%;}
    .responsive-3 {width: 49.00%; margin: 0% 2% 0% 0%;}
    .responsive-4 {width: 49.00%; margin: 0% 0% 0% 0%;}
}