/* CSS Document */
html, body            { height: 100%; border: none; min-width: 320px; }
@font-face            { font-family: "handel";
                        src: url('../fonts/handgotl/handgotl.eot'); /* IE9 Compat Modes */
                        src: url('../fonts/handgotl/handgotl.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                             url('../fonts/handgotl/handgotl.woff') format("woff"), 
                             url('../fonts/handgotl/handgotl.ttf') format("truetype");  /* Safari, Android, iOS */ }
@font-face            { font-family: 'Century Gothic'; 
                        src: url('../fonts/century_gothic/century_gothic.eot'); 
                        src: url('../fonts/century_gothic/century_gothic.eot?#iefix') format('embedded-opentype'), 
                             url('../fonts/century_gothic/century_gothic.svg#Century Gothic') format('svg'), 
                             url('../fonts/century_gothic/century_gothic.woff') format('woff'), 
                             url('../fonts/century_gothic/century_gothic.ttf') format('truetype'); 
                             font-weight: normal; font-style: normal; }
@font-face            { font-family: 'Century Gothic Bold'; 
                        src: url('../fonts/century_gothic_bold/century_gothic_bold.eot'); 
                        src: url('../fonts/century_gothic_bold/century_gothic_bold.eot?#iefix') format('embedded-opentype'), 
                             url('../fonts/century_gothic_bold/century_gothic_bold.svg#Century Gothic Bold') format('svg'), 
                             url('../fonts/century_gothic_bold/century_gothic_bold.woff') format('woff'), 
                             url('../fonts/century_gothic_bold/century_gothic_bold.ttf') format('truetype'); 
                             font-weight: normal; font-style: normal; }
body                        { background-repeat: no-repeat;
                              background-position: center center;
                              background-attachment: fixed; 
                              -webkit-background-size: cover;
                              -moz-background-size: cover;
                              -o-background-size: cover;
                              background-size: cover;
                              background-color: rgb(0,0,0); 
                              text-align: center;
                              vertical-align: middle;
                              padding: 0; 
                              margin: 0;
                              font-size: 10px;
                              font-family: 'Century Gothic', sans-serif; color: rgb(255,255,255);}
a                           { text-decoration: none; }                        
table                       { width: 100%; height: 100%;  }
.uvod-obsah, .kontakt-obsah { vertical-align: top; }
.uvod-obsah, .logo-nav, .banner-slide, .kontakt-banner, .kontakt-banner-obr                    
                            { width: 100%; }
.kontakt-banner, .kontakt-banner-obr 
                            { height: auto; }                              
.banner-slide, .kontakt-banner               
                            { margin-top: 50px; }              
.uvod-okraj                 { width: 0px; }
.horny-panel                { height: 50px; position: absolute; top: 0px ; width: 100%; background-color: #333; color: rgb(255,255,255); z-index: 10;  }
.logo-nav                   { margin-left: auto; margin-right: auto; height: 100%; }
.logo, .nav                 { display: inline-block; height: 100%; }
.logo                       { width: 100%; vertical-align: top; }
.nav                        { width: 0px; text-align: right; margin}
.logo-obr                   { text-align: left; }
.logo-obr img               { height: 50px; margin: 0px 0px 0px 0px; }
.logo-text                  { font-size: 20px; margin: 10px 0 0 10px; font-family: 'Century Gothic'; text-align: left; }                 
.nav-text                   { color: rgb(255,255,255); text-align: right; } 
.nav-text a                 { color: rgb(255,255,255); }

.okraj-obr-lavy, .okraj-obr-pravy
                            { background-repeat: repeat-x; display: none; }
.okraj-obr-lavy             { background-image: url(../artworks/okraj1.jpg); background-position: right top; }
.okraj-obr-pravy            { background-image: url(../artworks/okraj2.jpg); background-position: left top; }

.popiska                    { width: 100%; background-color: #333; text-align: center; }
.popiska-text               { display: block; font-family: 'Century Gothic Bold'; padding: 10px; }
.cenovka                    { display: none; width: 100%; height: 85px; bottom: -85px; position: absolute; background-color: #333; }
.cenovka-popis              { margin: 10px 0 0 10px; display: block; font-family: 'Century Gothic'; }
.cenovka-cena-skrt, .cenovka-cena-akt, .cenovka-jednotka          
                            { margin: 5px 0 0 10px; display: inline-block; }
.cenovka-cena-skrt          { text-align: right; text-decoration: line-through; }                        
.cenovka-cena-akt           { font-size: 35px; width: auto; font-family: 'Century Gothic Bold'; }
.cenovka-jednotka           { text-align: left; }

.topnav                     { display: inline-block; position: fixed; top: 0px; right: 0px; overflow: hidden; }
.topnav a                   { background-color: #333; display: none; float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }
.icon                       { background-color: #333; color: #f2f2f2; }     
.icon:hover                 { background-color: #ddd; color: black; }     
.active                     { background-color: #4CAF50; color: white; }
.topnav .icon               { display: none; }
.nav-text                   { display: none; }
.topnav a                   { display: none;}
.topnav a.icon              { float: right; display: block; }
.topnav.responsive          { position: fixed; right: 0; top: 0px; }
.topnav.responsive a.icon   { position: fixed; right: 0; top: 0px; }
.topnav.responsive .topnav-linky { margin-top: 40px;  }
.topnav.responsive a        { float: none; display: block; text-align: left; }
    .kontakt-info           { }
    .kontakt-nadpis         { width: 100%; font-size: 20px; display: block; margin-top: 5px; }
    .kontakt-nadpis span    { margin-left: 5px; }
    .kontakt-udaje          { width: 100%; display: inline-block; vertical-align: top; margin-top: 5px; margin-bottom: 5px; background-color: rgb(40,40,40); padding-bottom: 5px; padding-top: 5px; }
    .kontakt-text           { display: inline-block; }
    .kontakt-text span      { margin-left: 5px; }
    .kontakt-1riadok        { width: 100%; font-size: 16px; font-family: 'Century Gothic Bold'; display: block; }
    .kontakt-2riadok, .kontakt-3riadok
                            { font-size: 15px; display: block; }
    .kontakt-email, .kontakt-telefon
                            { font-size: 20px; display: block; }                             
    .kontakt-telefon        { margin-top: 5px; }
    
    a[href^="tel:"].kontakt-telefon-a { font-size: inherit; color: rgb(255,255,255); }
    a[href^="mailto:"].kontakt-email-a { font-size: inherit; color: rgb(255,255,255); }
    
    .kontakt-obchudaj1, .kontakt-obchudaj2, .kontakt-obchudaj3 
                            { display: inline-block; font-size: 15px; }
    .kontakt-obchudaj1      { margin-top: 5px; }
    .kontakt-qr             { display: none; text-align: right; float: right; margin: 10px 30px 10px 10px; }
    .kontakt-qr img         { height: 200px; }
    .kontakt-udaje2         { font-size: 0px; }
    .kontakt-mapa           { width: 100%; height: 200px; display: inline-block; border: none; }
    .kontakt-form           { width: 100%; height: 320px; margin-top: 5px; background-color: rgb(40,40,40);  display: inline-block; border: none; vertical-align: top; }
    .kontakt-form-nadpis    { font-size: 18px; width: 100%; text-align: center; margin: 5px 0 5px 0; }
    .kontakt-form form      { padding: 0 5px 5px 5px; }
    .kontakt-form span      { font-size: 15px; }
    .kontakt-form input, .kontakt-form textarea     
                            { padding: 5px; font-size: 15px; border: none; width: 100%; margin-bottom: 10px; margin-top: 5px; background-color: rgb(0,0,0); color: rgb(180,180,180); font-family: 'Courier New', Courier, 'Andale Mono', monospace; }
    .kontakt-form textarea  { height: 100px; overflow: auto; resize: none; }                          
    .kontakt-form button    { width: 100px; height: 25px; border: none; background-color: rgb(80,80,80); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; font-family: 'Century Gothic'; color: rgb(255,255,255); font-size: 15px; }
    .kontakt-vysledok-ok, .kontakt-vysledok-fail
                            { font-size: 18px; display: inline-block; margin-left: 15px; }
    .kontakt-vysledok-fail  { color: rgb(255,0,0); font-family: 'Century Gothic Bold'; }

@media screen and (min-width: 375px) {
    .banner-slide           { margin-top: 50px; }
    
    
    .logo-text              { font-size: 20px; margin: 12px 0 0 10px; }
    .nav-text               { font-size: 20px; margin: 0 15px 0 0; }
    
    .cenovka                { height: 85px; right: 0px; z-index: 10000; }
    .cenovka-popis          { font-size: 16px; margin: 8px 0px 3px 8px; }
    .cenovka-cena-skrt, .cenovka-cena-akt, .cenovka-jednotka          
                            { margin: 3px; }
    .cenovka-cena-skrt      { width: 70px; }
    .cenovka-cena-akt       { font-size: 35px; }
}


@media screen and (min-width: 568px) {
    .uvod-obsah, .logo-nav, .banner-slide, .kontakt-banner, .kontakt-banner-obr             
                            { margin-top: 0px; }
    .uvod-okraj             { }                            
    .horny-panel            { height: 60px; background-color: rgba(0,0,0,0.6); }
    .topnav                 { position: fixed; }
    .logo, .nav             {  }
    .logo-obr img           { height: 60px; margin: 0px 0 0px 0px; }
    .logo-text              { font-size: 35px; margin: 5px 0 0 10px; }
    .nav-text               { font-size: 20px; margin: 0 10x 0 0; }
    
    .popiska                { max-width: 50%; width: auto; position: absolute; text-align: left; bottom: 20%; right: 0px; background-color: rgba(0,0,0,0.6); }
    .popiska-text           { font-size: 18px; padding: 10px 20px 10px 20px; }
    .cenovka                { width: 350px; height: 80px; bottom: 100px; right: 0px; background-color: rgba(0,0,0,0.6); }
    .cenovka-popis          { font-size: 16px; margin: 8px 0px 3px 8px; }
    .cenovka-cena-skrt, .cenovka-cena-akt, .cenovka-jednotka          
                            { margin: 3px; }
    .cenovka-cena-skrt      { width: 70px; }
    .cenovka-cena-akt       { font-size: 35px; }
     
    .kontakt-nadpis         { font-size: 30px; margin-top: 10px; }
    .kontakt-nadpis span    { margin-left: 15px; }
    .kontakt-udaje          { margin-top: 10px; margin-bottom: 10px; padding-bottom: 5px; padding-top: 5px; }
    .kontakt-text span      { margin-left: 15px; }
    .kontakt-1riadok        { font-size: 25px; }
    .kontakt-2riadok, .kontakt-3riadok
                            { font-size: 15px; }
    .kontakt-email, .kontakt-telefon
                            { font-size: 20px; }                             
    .kontakt-telefon        { margin-top: 8px; }
    .kontakt-obchudaj1, .kontakt-obchudaj2, .kontakt-obchudaj3 
                            { font-size: 15px; }
    .kontakt-obchudaj1      { margin-top: 8px; }
    .kontakt-mapa           { width: 100%; height: 220px; }
    .kontakt-form           { width: 100%; height: 300px; margin-left: 0px; margin-top: 10px; }
    .kontakt-form-nadpis    { font-size: 18px; margin: 10px 0 5px 0; }
    .kontakt-form form      { padding: 0 10px 10px 10px; }
    .kontakt-form span      { font-size: 15px; }
    .kontakt-form input, .kontakt-form textarea     
                            { padding: 5px; font-size: 15px; margin-bottom: 10px; margin-top: 5px; }
    .kontakt-form textarea  { height: 65px; }                          
    .kontakt-form button    { width: 110px; height: 28px; font-size: 15px; }
    .kontakt-vysledok-ok, .kontakt-vysledok-fail
                            { font-size: 15px; margin-left: 15px; }               
}

@media screen and (min-width: 736px) {
    .uvod-obsah, .logo-nav, .banner-slide, .kontakt-banner, .kontakt-banner-obr                  
                            { width: 736px; }
    .uvod-okraj             { width: 50%; vertical-align: top; }
    .topnav                 { display: none; }                            
    .horny-panel            { height: 80px; position: fixed; }
    .logo, .nav             { width: 49%; }
    .logo-obr img           { height: 70px; margin: 5px 0 5px 15px; }
    .logo-text              { font-size: 40px; margin: 15px 0 0 10px; }
    .nav-text               { font-size: 20px; margin: 30 15px 0 0; display: inline-block; }
    .okraj-obr-lavy, .okraj-obr-pravy
                            { height: 220px; margin-top: 80px; display: block; 
                              -webkit-background-size: 220px 220px;
                              -moz-background-size: 220px 220px;
                              -o-background-size: 220px 220px;
                              background-size: 220px 220px; }
    .popiska                { bottom: 20%; }
    .popiska-text           { font-size: 25px; padding: 10px 20px 10px 20px; }
    .cenovka                { width: 350px; height: 80px; bottom: 100px; right: 0px; }
    .cenovka-popis          { font-size: 16px; margin: 8px 0px 3px 8px; }
    .cenovka-cena-skrt, .cenovka-cena-akt, .cenovka-jednotka          
                            { margin: 3px; }
    .cenovka-cena-skrt      { width: 70px; } 
    .cenovka-cena-akt       { font-size: 35px; }
    
    .kontakt-banner-obr     { height: 300px; }                              
    .kontakt-nadpis         { font-size: 30px; margin-top: 10px; }
    .kontakt-nadpis span    { margin-left: 15px; }
    .kontakt-udaje          { margin-top: 10px; margin-bottom: 10px; padding-bottom: 5px; padding-top: 5px; }
    .kontakt-text span      { margin-left: 15px; }
    .kontakt-1riadok        { font-size: 25px; }
    .kontakt-2riadok, .kontakt-3riadok
                            { font-size: 15px; }
    .kontakt-email, .kontakt-telefon
                            { font-size: 20px; }                             
    .kontakt-telefon        { margin-top: 8px; }
    .kontakt-obchudaj1, .kontakt-obchudaj2, .kontakt-obchudaj3 
                            { font-size: 15px; }
    .kontakt-obchudaj1      { margin-top: 8px; }
    .kontakt-mapa           { width: 386px; height: 330px; }
    .kontakt-form           { width: 340px; height: 330px; margin-left: 10px; margin-top: 0px;}
    .kontakt-form-nadpis    { font-size: 18px; margin: 10px 0 5px 0; }
    .kontakt-form form      { padding: 0 10px 10px 10px; }
    .kontakt-form span      { font-size: 15px; }
    .kontakt-form input, .kontakt-form textarea     
                            { padding: 5px; font-size: 15px; margin-bottom: 10px; margin-top: 5px; }
    .kontakt-form textarea  { height: 95px; }                          
    .kontakt-form button    { width: 110px; height: 28px; font-size: 15px; }
    .kontakt-vysledok-ok, .kontakt-vysledok-fail
                            { font-size: 15px; margin-left: 15px; }               
}

@media screen and (min-width: 850px) {
    .uvod-obsah, .logo-nav, .banner-slide, .kontakt-banner, .kontakt-banner-obr             
                            { width: 850px; }
    .okraj-obr-lavy, .okraj-obr-pravy
                            { height: 250px; 
                              -webkit-background-size: 250px 250px;
                              -moz-background-size: 250px 250px;
                              -o-background-size: 250px 250px;
                              background-size: 250px 250px; }                             
                            
    .kontakt-banner-obr     { height: 330px; }                              
    .kontakt-qr             { margin: 10px 15px 10px 10px; display: inline-block; }
    .kontakt-qr img         { height: 120px; }
    .kontakt-mapa           { width: 500px; height: 330px; }
}

@media screen and (min-width: 1000px) and (min-height: 625px) {
    .uvod-obsah, .logo-nav, .banner-slide, .kontakt-banner, .kontakt-banner-obr             
                            { width: 1000px; }
    .horny-panel            { height: 100px; }
    .logo, .nav             { width: 498px; }
    .logo-obr img           { height: 80px; margin: 10px 0 10px 20px; }
    .logo-text              { font-size: 55px; margin: 20px 0 0 15px; }
    .nav-text               { font-size: 25px; margin: 40px 20px 0 0; }
    .okraj-obr-lavy, .okraj-obr-pravy
                            { height: 300px; margin-top: 100px;
                              -webkit-background-size: 300px 300px;
                              -moz-background-size: 300px 300px;
                              -o-background-size: 300px 300px;
                              background-size: 300px 300px; }
    .popiska-text           { font-size: 28px; padding: 15px 25px 15px 25px; }                              
    .cenovka                { width: 400px; height: 100px; bottom: 120px; right: 0px; }
    .cenovka-popis          { font-size: 20px; margin: 10px 0px 5px 10px; }
    .cenovka-cena-skrt, .cenovka-cena-akt, .cenovka-jednotka          
                            { margin: 8px; }
    .cenovka-cena-skrt      { width: 80px; }
    .cenovka-cena-akt       { font-size: 40px; }
    
    .kontakt-banner-obr     { height: 400px; }                              
    .kontakt-nadpis         { font-size: 36px; margin-top: 10px; }
    .kontakt-nadpis span    { margin-left: 20px; }
    .kontakt-udaje          { margin-top: 10px; margin-bottom: 10px; padding-bottom: 5px; padding-top: 5px; }
    .kontakt-text span      { margin-left: 20px; }
    .kontakt-1riadok        { font-size: 30px; }
    .kontakt-2riadok, .kontakt-3riadok
                            { font-size: 18px; }
    .kontakt-email, .kontakt-telefon
                            { font-size: 22px; }                             
    .kontakt-telefon        { margin-top: 8px; }
    .kontakt-obchudaj1, .kontakt-obchudaj2, .kontakt-obchudaj3 
                            { font-size: 18px; }
    .kontakt-obchudaj1      { margin-top: 8px; }
    .kontakt-qr             { margin: 10px 20px 10px 10px; }
    .kontakt-qr img         { height: 150px; }
    .kontakt-mapa           { width: 590px; height: 330px; }
    .kontakt-form           { width: 400px; height: 330px; margin-left: 10px; }
    .kontakt-form button    { width: 130px; height: 28px; font-size: 15px; }
}

@media screen and (min-width: 1200px) and (min-height: 750px) {
    .uvod-obsah, .logo-nav, .banner-slide, .kontakt-banner, .kontakt-banner-obr                      
                            { width: 1200px; }
    .horny-panel            { height: 120px; }
    .logo, .nav             { width: 598px; }
    .logo-obr img           { height: 100px; margin: 10px 0 10px 25px; }
    .logo-text              { font-size: 65px; margin: 25px 0 0 15px; }
    .nav-text               { font-size: 30px; margin: 50px 25px 0 0; }
    .okraj-obr-lavy, .okraj-obr-pravy
                            { height: 350px; margin-top: 120px;
                              -webkit-background-size: 350px 350px;
                              -moz-background-size: 350px 350px;
                              -o-background-size: 350px 350px;
                              background-size: 350px 350px; }
    .popiska-text           { font-size: 40px; padding: 20px 25px 20px 25px; }                              
    .cenovka                { width: 500px; height: 120px; bottom: 150px; right: 0px; }
    .cenovka-popis          { font-size: 25px; margin: 10px 0px 5px 10px; }
    .cenovka-cena-skrt, .cenovka-cena-akt, .cenovka-jednotka          
                            { margin: 10px; }
    .cenovka-cena-skrt      { width: 100px; }
    .cenovka-cena-akt       { font-size: 50px; }
    
    .kontakt-banner-obr     { height: 470px; }                              
    .kontakt-nadpis         { font-size: 42px; margin-top: 10px; }
    .kontakt-nadpis span    { margin-left: 25px; }
    .kontakt-text span      { margin-left: 25px; }
    .kontakt-1riadok        { font-size: 35px; }
    .kontakt-2riadok, .kontakt-3riadok
                            { font-size: 22px; }
    .kontakt-email, .kontakt-telefon
                            { font-size: 26px; }                             
    .kontakt-telefon        { margin-top: 10px; }
    .kontakt-obchudaj1, .kontakt-obchudaj2, .kontakt-obchudaj3 
                            { font-size: 22px; }
    .kontakt-obchudaj1      { margin-top: 10px; }
    .kontakt-qr             { margin: 10px 25px 10px 10px; }
    .kontakt-qr img         { height: 180px; }
    .kontakt-mapa           { width: 750px; height: 350px; }
    .kontakt-form           { width: 440px; height: 350px; margin-left: 10px; }
    .kontakt-form-nadpis    { font-size: 22px; margin: 12px 0 5px 0; }
    .kontakt-form form      { padding: 0 12px 12px 12px; }
    .kontakt-form span      { font-size: 15px; }
    .kontakt-form input, .kontakt-form textarea     
                            { padding: 5px; font-size: 18px; margin-bottom: 10px; margin-top: 5px; }
    .kontakt-form textarea  { height: 105px; }                          
    .kontakt-form button    { width: 160px; height: 28px; font-size: 15px; }
    .kontakt-vysledok-ok, .kontakt-vysledok-fail
                            { font-size: 15px; margin-left: 15px; }
}

@media screen and (min-width: 1440px) and (min-height: 900px) {
    .uvod-obsah, .logo-nav, .banner-slide, .kontakt-banner, .kontakt-banner-obr                
                            { width: 1440px; }
    .horny-panel            { height: 150px; }
    .logo, .nav             { width: 718px;  }
    .logo-obr img           { height: 120px; margin: 15px 0 15px 30px; }
    .logo-text              { font-size: 80px; margin: 30px 0 0 20px; }
    .nav-text               { font-size: 35px; margin: 60px 30px 0 0; }
    .okraj-obr-lavy, .okraj-obr-pravy
                            { height: 400px; margin-top: 150px;
                              -webkit-background-size: 400px 400px;
                              -moz-background-size: 400px 400px;
                              -o-background-size: 400px 400px;
                              background-size: 400px 400px; }
    .kontakt-banner-obr     { height: auto; }                              
    .kontakt-nadpis         { font-size: 50px; }
    .kontakt-nadpis span    { margin-left: 30px; }
    .kontakt-text span      { margin-left: 30px; }
    .kontakt-1riadok        { font-size: 40px; }
    .kontakt-2riadok, .kontakt-3riadok
                            { font-size: 25px; }
    .kontakt-email, .kontakt-telefon
                            { font-size: 30px; }                             
    .kontakt-obchudaj1, .kontakt-obchudaj2, .kontakt-obchudaj3 
                            { font-size: 25px; }
    .kontakt-qr             { margin: 10px 30px 10px 10px; }
    .kontakt-qr img         { height: 200px; }
    .kontakt-mapa           { width: 900px; height: 400px; }
    .kontakt-form           { width: 530px; height: 400px; }
    .kontakt-form-nadpis    { font-size: 25px; margin: 15px 0 10px 0; }
    .kontakt-form form      { padding: 0 15px 15px 15px; }
    .kontakt-form span      { font-size: 18px; }
    .kontakt-form textarea  { height: 125px; }                          
    .kontakt-form button    { width: 200px; height: 30px; font-size: 18px; }
    .kontakt-vysledok-ok, .kontakt-vysledok-fail
                            { font-size: 18px; margin-left: 15px; }
}


/*
border: thin solid rgb(255,255,255);
border: thin solid rgb(0,0,0); 
*/