* {
    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 0 0.2em 0; }  /* color: rgb(70,70,70) */
 
h1, h1 a, h1 a:hover, h2, h2 a {color: black; text-decoration: none; font-weight: bold; line-height: 150%; }      
  
 
h1 {
  padding: 0 0 0.8em 0;
  font-size: 2em; 
  font-family: 'Lora', serif;        /* 'Bree Serif' */
  font-weight: 400;
  font-style : italic;
               }       
 
h2 {
  color: black;
  font-size: 1.4em;
  padding: 0.1em 0 0.3em 0;
  font-weight: 600;
  ine-height: 150%;
        }       
     

strong, b { 
    font-weight: bold; color: rgb(10,10,10);   
} 

a strong, a b { 
    color: #c7045f;   /*  #f7323f rgb(247, 50, 63)  */ 
    } 

 
 
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.5em;
 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;  /* #f7f7f7 to je světle šedá */ 
 font-size: 0.8em;
 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: 1em 1.3em 0.2em 1.3em;
     }  



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


.fialovyradek {
 background-color: #a16b90; /* #fff5f5 to je světle růžová */
 padding: 0.1em 1% 0.2em 1%;
 color: white;
 font-weight: bold;
 font-size: 1.2em;
 text-align: center;
 letter-spacing: 0.01em;
     }  

.fialovyradek a {color: white; text-decoration: none; }        
    
.fialovyradek a:hover {color: white; text-decoration: underline; }  

footer { 
  background-color: rgb(225,225,225);  
  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 {   /* něco jako header, nav nebo footer: určuji barvu pozadí, písma a padding po stranách */ 
  padding: 2em 1em 2em 1em;
      } 
      
.mezeradole {   /* div, který bude mít jen spodní okraj */ 
  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;
           }   

.srovnani td {
  padding: 0.5em;
         }
       
.srovnani tr {
 border-top: 1px solid lightgrey;
 border-bottom: 1px solid lightgrey;
     }

.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;
    } 


    
/* input[type=text] {width: 9em; }  
input {font-size: 1em; padding: 0.5em; box-sizing: border-box;   
          }    */    
    
.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);           /* případná barva pozadí ... */ 
                }

.zelena { 
     background-color: rgb(66,165,53);           /* barva tlačítka Download */ 
                }


.modra { 
     background-color: rgb(36,73,111);           /* případná barva pozadí ... */ 
  }       
    

.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: #c7045f;    /* solomon: #fc6c6c */ 
           } 
.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); 
   }    

.hneda  { 
     color: #a05d5d;           
  }     

         
 
.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;
 } 

 

/*  Small Switch Palette:
    https://mycolor.space/ 

*/

.vsuvka {               /* kulatý rámeček s fialovým obrysem, vyplněný růžovou, černý text, vystředěný */
  padding: 1em 2em 1.2em 2em;
  margin: 1em 0em 2em 0em;
  font-size: 119%; 
  line-height: 175%;
  font-style: italic.;  
  text-align: center;
  color: rgb(10,10,10);
  border: 0.05em solid #a16b90;
  background-color: #f7e3f0;
  border-radius: 0.4em;
       }  


.vsuvka1 {       /*  větší okraj */
  margin: 1em 2em 1em 2em;
             }  

.vsuvka2 {       /*  stažení e-booku */
  padding: 1em;
  margin: 0.5em 0 3em 0;
  border: 0.05em solid #cccccc;
  background-color: #f7f7f7; 
           }  


.vsuvka3 {       /*  velké fialové písmo, vystředěné */
  padding: 1em 2em 2em 2em;
  text-align: center;  
  font-size: 130%; 
  line-height: 175%;
  font-weight.: bold;   
  color: #a16b90;  /*  světle fialová #ab6e77    41B3B3 tyrkysová    #aeb6bf #2499C3 rgb(15,150,150) */
          }  
 
.vsuvka4 {       /*  stažení e-booku */
  padding: 1em 1em 1.2em 1em;
  margin: 0.5em 0 2em 0;
  border: 0.25em solid #f7e3f0;
             }  

.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;
      }  
  
/*
ul {
  list-style-image: url('fajfka.jpg');
}
*/

  
.seznam {
  padding: 0em 1em 0em 2em;
       }                             /* modrá pro Prahu: color: #0033ff */

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


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

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

.menu li a {                         /* položky seznamu */ 
    padding: 0.2em 2.7%;
    list-style-type: none;  /* bez odrážek */ 
    display: inline-block;
 } 

  /*a img:hover {max-width: 101%;}*/ 
  
a img:hover {opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */} 
   
 

#logo a {color: black; text-decoration: none;} 
  .menu a {color: #414141; text-decoration: none;}     
  .menu a:hover {color: #c7045f;}
  
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;}       
    
.vsuvka a {text-decoration: none; } 
.vsuvka a:hover {text-decoration: underline; }


a.tlacitko {padding: 0.3em 0.8em 0.4em 0.8em; margin: 0.5em 0em 2.3em 0em; color: #fff; text-decoration: none; border-radius: 0.4em; font-weight: bold;}

a.stitek {padding: 0.2em 0.5em 0.3em 0.5em; margin: 0em 1em 2em 0em; letter-spacing.: 0.02em; color: #c7045f; text-decoration: none; border-radius: 0.4em; border: 0.05em solid #c7045f;}
a.stitek:hover {color: white; background-color: #c7045f;}

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.6em 0.2em 0.6em; line-height: 200%; }  

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 {
    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.05em solid rgb(230,230,230);
  }  

 
 

 
.container {
  display: flex; 
  display: -webkit-flex;
  flex-wrap: wrap;
  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 3em;  /* 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 7em;  /* budou se roztahovat horizontálně i vertikálně a poslední číslo je minimální šířka */
    margin: 0em 1em 0.5em 0em;
    
    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: 2em calc(0.5em + 2%);
    border: 0px solid grey;  
     
}  
                              
.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 + 3%) 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: 50em;
    }  
         
         
aside {
background-color: white;
padding: 1em 0.7em 1em calc(0em + 6%);
border: 0px solid grey;   
flex: 1 1 11em;  /* budou se roztahovat horizontálně i vertikálně a poslední číslo je minimální šířka */  
    }         



.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;
       
     }    
   
       
  .muz {
      background-image: url(IMAGES/darek-pro-muze.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);  
	         }     
     
  .zena {
      background-image: url(IMAGES/darek-pro-zenu.jpg);  /* obrázek na pozadí */ 
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);   
	         }    
           
  .dite {
      background-image: url(IMAGES/darek-pro-dite.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; 
	         }             
           
           
           

 /* komentář */