* {
    margin: 0;             /* vynulování všech okrajů */ 
    padding: 0; 
    }
    
body {
	          *, *:after, *:before {
       -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
           -ms-box-sizing: border-box;
               box-sizing: border-box;
      height: 100%;
        }

       width: 100%;             /* bude zabírat 75 pc okna prohlížeče */ 
       height: 100%;
       min-width: 5em;
       max-width: 130em;         
       margin: 0em auto 0em auto;      /* nahoře mezera 0, postranní panely jsou shodné, tedy vycentováno */ 
        
       background-color: white;           /* barva pozadí ... */ 
       color: #414141;            /*  #666666 #333333 nebo rgb(65,65,65)   */ 
       font-size: 1.1em; 
       font-family: 'Open Sans', Arial, sans-serif, Tahoma, 'Segoe UI', Helvetica, Verdana;
       line-height: 170%; 
       letter-spacing: 0em;
       font-weight: 300;
             }     /* to je konec body */

h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {color: black; text-decoration: none; font-weight: bold; padding: 0.1em 0em 0.2em 0em; font-size: 1.2em; }
 
h1, h1 a, h1 a:hover, h2, h2 a {color: black; text-decoration: none; font-weight: bold; line-height: 150%; }      
  
h1 {  font-size: 1.5em; 
  color: #003366;
  padding: 0 0 0.8em 0;
  font-size.: 2.1em; 
  font-family.: 'Lora', serif;
  font-weight.: normal;
  font-style.: italic;
  text-align.: center; }       
 
h2 { font-size: 1.4em; padding: 0.1em 0 0.3em 0; }       
     
strong, b { font-weight: bold; color: rgb(10,10,10); } 

a strong, a b { color: #d6005f; text-decoration: underline } 

a:hover strong, a:hover b { color: #bd0054 }
 
img, canvas, video, svg {
  max-width: 100%;        /* obrázek se nebude zvětšovat nad své skutečné rozměry, např. ikony sociálních sítí */ 
  height: auto;     
  box-sizing: border-box;
  position: relative;
          }
        
.follow { width: 2em; height: auto; }   
        
 .followinst {
  width: 2.1em;         
  height: auto;     
          }          
        
 .share {
  width: 2.3em;         
  height: auto;     
           }         
      
iframe { max-width: 100%; box-sizing: border-box; }       

#logo {
 color: black;
 font-size: 1.8em;
 margin: 0.1em 0 0.4em 0;
 /*font-family: Georgia, 'Times New Roman', serif; 
 font-weight: bold;
 font-variant: small-caps;*/  
  }

.logoimg { max-width: 80%;  }
 

.sarka { max-width: 7em; }  
          
.ebookmensi { max-width: 17em; }      
        
.ebookvetsi { max-width: 24em; }         
        
#prvni_radka {
 background-color: #f7f7f7;  /* šedá #f7f7f7 */ 
 font-size: 1em;
 padding: 0em 0.1em 0em 0.1em;
 text-align: right;
 color.: grey;
    }  

#prvni_radka a {color.: grey; text-decoration.: underline; }        
       
#prvni_radka a:hover {color.: black;}  

header { background-color: #f7f7f7; padding: 0.9em 1.3em 0.2em 1.3em; }  

nav {
 background-color: #f7f7f7; /* #fff5f5 to je světle růžová */
 padding: 0em 1% 0.1em 1%;
   /* border-bottom: 0.05em solid #eaeaea; 
     box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.25)   */  
 box-shadow: 0px 1px 0px #e2e2e2;       /* #eaeaea */
    }  

footer { 
  background-color: #f8f8f8;  
  color: black;
  padding: 0.5em 1% 2em 1%; 
  font-size: 97%;
  border-top: 0.05em solid #bbbbbb;  
 
 /*  background-position: center center;
       background-repeat: no-repeat;
         webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;  
   background-image: url(IMAGES/footer.jpg); padding: 1% 1% 8% 1%; 
  */   
          }     
 
   
section { 
     background-color: rgb(128,128,128);           /* případná barva pozadí ... */ 
     background-position: center center;
       background-repeat: no-repeat;
    /*background-attachment: fixed;    pozadí neroluje */    
        webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;  
        padding: calc(5.5em + 8%) 1% 0 1%;
        color: white;                                                 
        font-size: calc(1.1em + 1.1vw);
        text-shadow: 0.1em -0.01em 0.1em black;  
        text-align: center;   /* odstavec zarovnán na střed */ 
        line-height: 190%; 
                           }
 

.odstavec { padding: 2em 1em 2em 1em; } 
      
.mezeradole { padding: 0 0 5em 0; }  

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
} 
     
p { padding: 0.2em 0 0.5em 0; }  
    
.ramecekdole {
  padding: 0.2em 0 0.2em 0; 
  margin: 0 0 1em 0;
  border-bottom: 0.1em solid black;
      } 

.srovnani {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8em;
  border: 1px solid silver;
  box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);
             }   
.srovnani td { padding: 0.5em 0em 0.5em 0.3em;  border: 1px dotted #E5E5E5; }
       
.srovnani tr {
 border-top.: 1px solid silver;
 border: 1px solid silver;
     }
@media (max-width: 700px) { .srovnani { font-size: 0.7em; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.3);} }
@media (max-width: 700px) { .srovnani td { padding: 0.5em 0em 0.5em 0.1em; }  }

.obrvtab { max-height: 90px;  }  

tr:hover {background.: rgb(239,239,239)} 

.prvniradkatabulky { 
    background-color: #F0F0F0; 
    font-weight: bold;
    border: 0px solid lightgrey;  
  }  
    
article p { padding: 0 0 1em 0; }      

aside a { color: #414141; } 
    
.lupa  {
  width: calc(2em + 1.5%);
  height: 0;  
  padding: 0 0 calc(2em + 1.5%) 0; 
  overflow: hidden;
  float: right;
  border: 0px solid grey;
  display: nonen;   
    } 


.obr34 {
  height: 0;
  padding: 0 0 75% 0; 
  overflow: hidden;
  border: 0px solid grey;   
    } 
   
.obr23 {
  height: 0;
  padding: 0 0 66.66% 0; 
  overflow: hidden;
  border: 0px solid grey;
    } 
    
.obr916 {
  height: 0;
  padding: 0 0 56.25% 0; 
  overflow: hidden;
  border: 0px solid grey;
    }     
    
.obr11 {
  height: 0;
  padding: 0 0 100% 0; 
  overflow: hidden;
  border: 0px solid grey;
    }      

.center { text-align: center; }  

.svetlezelena { background-color: rgb(230,235,215);  }

.zelena { background-color: rgb(66,165,53); }

.modra { background-color: rgb(36,73,111); }       

.holidays { 
     background-color.: rgb(36,73,111);           /* případná barva pozadí ... */ 
     margin: 0 7% 0 7%;
     padding: 1em 0em 1em 0em;
     }

.stin { box-shadow: 0.3em 0.3em 0.6em rgb(70,70,70); }            
    
.svetlemodr { background-color: rgb(88,184,245); }      
      
.visnova { 
     background-color: rgb(253,108,111); 
      /*  background-color:  rgb(253,108,111)-Tchibo mail, rgb(237,24,70) rgb(247,50,63) rgb(247,62,49) rgb(232,62,57) */          }         
     
.cervena { background-color: #dd3333; } 

.ruzova { background-color: #d6005f;    /* #d6005f */ } 

.fialova { background-color: #ab6e77; } 
              
.bila { color: white; }       

.cerna { color: black; }     

.tmavemodra { color: rgb(36,73,111); }  

.svetleseda { color: rgb(224,224,224); }   
  
.zlatepozadi { background-color: rgb(224,205,160); }  
  
.seda { background-color: rgb(136,136,136); }                                          
      
.bilepozadi { background-color: white; }         
     
.sedepozadi { background-color: rgb(229,231,233); }  

.bezovepozadi { background-color: #f1e7de; }  
  
.cernepozadi { background-color: rgb(10,10,10); }  
       
.svetlemodra { color: rgb(32,144,206); }     
          
.max {
 margin: 0em auto 0em auto;      /* nahoře mezera 0, postranní panely jsou shodné, tedy vycentováno */ 
 max-width: calc(55em + 16vw);          /* nebo 90%, maximální šířka celého layoutu 1.120px  */
  } 
 
.maxmensi {
 margin: 0em auto 0em auto;      /* nahoře mezera 0, postranní panely jsou shodné, tedy vycentováno */ 
 max-width: 50em;          /* maximální šířka 800 px */
  /*background-color: aqua; */
 } 

.nadpis {
 max-width: 50em;          /* maximální šířka 800 px   */
 padding: 2em 1em 0.1em 1em;
 } 

.vsuvka {
  margin: 0.3em 0 2em 0;
  padding: 0.8em 2em 1em 2em;
  text-align: center;  
  font-size: 120%; 
  line-height: 170%;
  font-weight.: bold;   
  color: #0097f5;  /*  rgb(61,115,177)  #a96e77 světle fialová #ab6e77    41B3B3 tyrkysová    #aeb6bf #2499C3 rgb(15,150,150) */
  border-top.: 1px solid rgb(61,115,177);
  box-shadow: 3px 3px 10px 2px #ecebeb;  /*  šedá: #ecebeb  */
          } 

.vsuvka2 {
  padding: 1em 0em 1em 0.7em;
  text-align: center;
  margin: 1em 0 3em 0;
  border: 0.05em solid #cccccc;
  background-color: #f8f8f8; 
  box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);
           }  

.vsuvka3 {
  padding: 1em 1em 1.5em 1em;
  margin: 0.5em 0em 2.5em 0em;
  font-size: 115%; 
  line-height: 190%;
  text-align: center;
  color.: rgb(10,10,10); color: #003366;
  border: 2px solid #ebf6fd;     /*  šedá: #ecebeb  */
  background-color.: #f8f8f8;     /* světle modrá: #ebf6fd  */
  border-radius.: 0.4em;
  box-shadow.: 3px 3px 10px 2px #ecebeb;
  box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);
            }  
 
.vsuvka3 strong { color: #003366; }  

.vsuvka4 {
  padding: 0.5em 0.5em 0.5em 0.9em;
  margin: 0.5em 0em 0.5em 0em;
  font-size: 110%; 
  line-height: 175%;
  font-weight: bold;   
  background-color: #ab6e77;
  color: white;  /*  bílé písmo ve fialovém poli */
          }  
 
.vsuvka5 {
  padding: 0em 0em 1em 0em;
  margin: 1em 0em 1em 0em;
  background-color: #f8e7e9; 
  border: 0.05em solid #ab6e77;
  border-radius: 0.4em;
       }  

.reklama {                /* skrytý text za účelem zobrazení relevantnější reklamy */ 
  font-size: 0.4em;   
  color: white;
  line-height: 50%; 
         }  

.pismovetsi { font-size: 115%; padding: 0.7em 0; line-height: 175%; }  
 
.pismonejvetsi { font-size: 1.5em; }  
   
.pismomensi { font-size: 0.7em; }  

p.popisobr {
  font-size: 90%;
  color: rgb(100,100,100);   
  line-height: 150%;
  padding-bottom: 2em;
  text-align: center;
      }    
      
p.amazon {
  font-size: 80%;
  text-align: center;
  line-height: 140%;
  font-style: italic;
  margin: 0em 0 1em 0;
      }  
      
p.adresa {
  font-size: 90%;
  color: rgb(100,100,100);
  line-height: 150%;
      }

.drobecky {
  font-size: 85%;
  line-height: 180%;
      }   
  
p.podpis {
  font-size: 90%;
  line-height: 180%;
  text-align: right;
  font-style: italic;
  padding: 1em 0 2em 0;
      }  
  
 
.seznam { padding: 0em 1em 0em 2em;  }           
.seznam li { padding: 0.1em 0em 0.3em 0em;  } 

                            /* růžovo-červená: color: #f0013e #dc0032 #d90823 #e73246 #dd3333  červená: #de0000 #ee1c25 ca0000  zelena: #3a9921    modra: #006dac #4bb6f5  */
  
a {text-decoration.: none; color: #0064d1; color: #0071eb; }   /*  doplňková tyrkysová: #218380 nebo #08bdbd #1b998b nebo tmavě modrá #175676*/
a:hover {text-decoration: underline; color: #0256b3 }


.menu {                          /* seznam, navigační nabídka */ 
       text-align: center;       /* menu je vycentrované */ 
      /*  font-variant: small-caps;
       font-size: 90%;  */ 
                 } 
  
.menu ul {                        
       list-style-type: none;      /* bez odrážek */ 
       } 

.menu li {                         /* položky seznamu */ 
     display: inline;
 } 

.menu li a {                         /* položky seznamu */ 
    padding: 0em 0.6em 0.05em 0.6em;
    margin: 0.3em 0.2em;
    color: black; 
    list-style-type: none;  /* bez odrážek */ 
    display: inline-block;
 } 

ul li::marker { color: #d6005f }

  /*a img:hover {max-width: 101%;}*/ 
  
/* a img:hover {opacity: 0.8; filter: alpha(opacity=80); }  */
a img:hover {transform: scale(1.01); }   

#logo a {color: black; text-decoration: none;} 
  .menu a {color: black; text-decoration: none;}     
  .menu a.aktualni {color: #de0000; }   
  .menu a:hover {color: #d6005f}
  
a.backtotop {color: white; background-color: rgb(135,135,135); padding: 0.28em 0.32em 0.32em 0.32em; font-size: 1.8em; 
  text-decoration: none; border-radius: 1em; position: fixed; bottom: 1em; right: 0.5em;}          
  
/*  cookies lišta dole */   
#lista {background-color: white; border-top: 2px solid #d9eefb; box-shadow: 0px -3px 18px 0px rgba(0,0,0,0.1); width: 100%; text-align: center; padding: 0.6em 0em 0.1em 0em; position: fixed; bottom: 0em; left: 0em; height: 3.5em }    
@media (max-width: 700px) { #lista { display: none; } }
#lista a {text-decoration.: underline; color.: black;}          

button {
  background-color: transparent;          /*  #E9967A  */ 
  border: 0.15em solid #414141;
  font-size: 1.1em;
  height: 3em;
  font-weight: bold;
  color.: white;
  font-family: 'Open Sans', Arial, sans-serif;
  padding: 0.3em 0.5em;
  text-decoration: none;
  margin: 0em 0em 0em 0.7em;
  cursor: pointer;
  text-align: center; 
  border-radius: 0.3em;
  outline: none;           /*  kolem políčka se nedělá modrý rámeček  */
  white-space: nowrap;      /*  text se nezalomí na novou řádku  */
 }

.vsuvka a {text-decoration: none; } 
.vsuvka a:hover {text-decoration: underline; }


a.tlacitko {padding: 0.45em 0.9em 0.55em 0.9em; letter-spacing: 0.02em; color: #fff; text-decoration: none; border-radius: 0.3em; font-weight: bold; font-size: 0.95em; }
/* a.tlacitko:hover {background-color: #E371AF} */

a.podtrzene:hover {text-decoration: underline;}
a.nepodtrhavat {text-decoration: none; }
a.nepodtrhavat strong {color: white; }

 
.ramecek {border: 0.1em solid white; }  
a.ramecek:hover {background-color: white; color: rgb(32,32,32); text-shadow: 0-0 0 black;}    /* modrá barva z oblohy */

.ramecekcerny {border: 0.1em solid rgb(65,65,65); color: rgb(65,65,65); font-size: 1.1em; padding: 0.1em 0.2em 0.2em 0.2em; line-height: 200%;
  text-decoration: none; }  

a.ramecekcerny:hover {border: 0.1em solid black; color: black; text-decoration: none; border-right: 0.15em solid black; border-bottom: 0.15em solid black;}

.ztmavitmin {
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

.ztmavit {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}

.zesvetlit {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.ztmavit:hover, .ztmavitmin:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.zesvetlit:hover { background-color: #bd0054;
    opacity.: 0.8;
    filter.: alpha(opacity=80); /* For IE8 and earlier */
} 
 
hr {
    margin: 0px auto 0px auto; 
    border: 0.1em;
   /* height: 0.1em;
    background-image: linear-gradient(to right, #ccc, #999999, #ccc);    přechod čáry do ztracena 
    color: rgb(220,220,220);*/
    background-color: white;
    border-top: 0.1em dotted rgb(176,176,176);
  }  

 
.container {
  display: flex; 
  display: -webkit-flex;
  flex-wrap: wrap;
  align-items: stretch;      /* stejná výška */
  justify-content: space-between;   /* nebo center nebo space-around */
  margin: 0.4em auto 1em auto; 
   }

.containerh1 {
  display: flex; 
  display: -webkit-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0.4em auto 1em auto; 
    }

.boxclanek {           
  flex: 1 1 15em;  /* budou se roztahovat horizontálně i vertikálně a poslední číslo je minimální šířka */
    margin: 1em calc(1em + 1%);
    border: 0px solid grey;
  }
    
.eventimg {           
    flex: 1 1 7em;  /* budou se roztahovat horizontálně i vertikálně a poslední číslo je minimální šířka */
    margin: 0.5em 1em 0.5em 0;
    border: 0px solid grey;
}                                 
        
.eventtext {           
  flex: 3 1 15em;  /* budou se roztahovat horizontálně i vertikálně a poslední číslo je minimální šířka */
    margin: 0em 1em 0.5em 0;
    border: 0px solid grey;
    overflow: hidden;
   }               
                                 
.box {           /* pro boxy v hlavní části=navigace */
    flex: 1 1 15em;  /* budou se roztahovat horizontálně i vertikálně a poslední číslo je minimální šířka */
    margin: 1.7em calc(0.5em + 2%);
    border: 0px solid grey;  
    max-width: 18em; 
}  
                              
.boxik {         /* v patičce */
    flex: 1 1 11em;  /* budou se roztahovat horizontálně i vertikálně a poslední číslo je minimální šířka */
    margin: 0.3em 1.5em;
    /*margin: 0 1em 0 0;*/
    border: 0px solid grey;
}

article {
background-color: white; 
margin: 1em calc(0.1em + 7%) 1em 0.8em;
border: 0px solid grey;   
flex: 3 1 32em;  /* budou se roztahovat horizontálně i vertikálně a poslední číslo je minimální šířka */  
max-width: 49em;
order.: 2;
    }  
         
         
aside {
background-color: white;
padding: 1em 0.7em 1em calc(0em + 6%);
border: 0px solid grey;   
flex: 1 1 15em;  /* budou se roztahovat horizontálně i vertikálně a poslední číslo je minimální šířka */  
order.: 1;
    }         


.obrnapozadi {
     /* background-color: rgb(51,51,51);           /* případná barva pozadí ... */ 
        background-position: top center; 
        background-repeat: no-repeat;
         webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
       background-size: cover;
       padding: 0 0 66% 0;
       height: 0;
       overflow: hidden;
       text-align: center;
       margin: 0.5em 0 1em 0;
     }    
   
       
.seo {
      background-image: url(IMAGES/seo-optimalizace-webu.jpg);  /* obrázek na pozadí */   
      /*border-right: 4px solid rgb(230,230,230);
      border-bottom: 4px solid rgb(230,230,230);  */
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);  
	         }     
     
.webnode {
      background-image: url(IMAGES/jak-vytvorit-webove-stranky-navod-0.jpg);  /* obrázek na pozadí */ 
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);   
	         }    
           
.blog {
      background-image: url(IMAGES/jak-zalozit-blog-zdarma.jpg);  /* obrázek na pozadí */ 
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);  
	         }    

.struktura {
      background-image: url(IMAGES/struktura-webu.jpg);  /* obrázek na pozadí */ 
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);           
               }     

.logozdarma {
      background-image: url(IMAGES/logo-designer.jpg);  /* obrázek na pozadí */ 
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);  
	         }     
     
.koupitdomenu  {
      background-image: url(IMAGES/kde-koupit-domenu.jpg);  /* obrázek na pozadí */ 
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);  
	         }     
     
.strukturawebu  {
      background-image: url(IMAGES/seo-struktura-webu.jpg);  /* obrázek na pozadí */ 
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);  
	         }     

.googlemap {
      margin: 0 auto 2em auto;  
      width: 95%;   
      max-width: 38em;
	         }  
        
.banner {
      margin: 0 auto 8em auto;  /* obrázek na pozadí */
      width: 300px; 
      height: 600px;
      overflow: hidden; 
	         }