* {
    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: 133em;         
       margin: 0em auto 0em auto;      /* nahoře mezera 0, postranní panely jsou shodné, tedy vycentováno */ 
       background-color: white;           /* barva pozadí ... */ 
       color: #414141;            /*  #333333 nebo rgb(65,65,65)   */ 
       font-size: 1.1em; 
       font-family: 'Open Sans', Arial, Verdana, Geneva, Tahoma, Helvetica, sans-serif, 'Segoe UI';
       line-height: 170%; 
       letter-spacing: 0em;
       font-weight: 300;
             }     /* to je konec body */

 
h4, h4 a, h5, h5 a, h6, h6 a {color: rgb(70,70,70); text-decoration: none; font-weight: bold; padding: 0.1em 0 0.2em 0; }
 
h1, h1 a, h1 a:hover, h2, h2 a, h3, h3 a {color: black; text-decoration: none; font-weight: bold; line-height: 150%; }         
h1 {
  font-size: 1.5em; 
  padding: 0.1em 0 0.5em 0;
          }       
 
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: #0071eb; } 
a b:hover, a strong:hover {text-decoration: underline; color: #0256b3;}


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;     
          }         
        
 .webcam {
  width: 4.4em;        
  height: auto;     
             }          

iframe {
  max-width: 100%;        
  box-sizing: border-box;
        }       

#logo {
 color: black;
 font-size: 1.8em;
 margin: 0.1em 0 0.2em 0;
 font-family: 'Trebuchet MS', 'Open Sans', Arial, sans-serif; 
  /*
 font-weight: bold;
 font-variant: small-caps;*/  
  }

.sarka {
  max-width: 7em;        
          }  

.ebookmensi {
  max-width: 17em;        
          }      
        
.ebookvetsi {
  max-width: 24em;        
          }         
        
#prvni_radka {
 background-color: white;  /* to je světle šedá */ 
 font-size: 1em;
 padding: 0em 5% 0em 5%;
 text-align: right;
    }  
       
header {
 background-color: white;  
 padding: 0.3em 1.3em;
   }  

nav {
 background-color: white; /* #f5f5f5 to je světle šedá */
 padding: 0em 1% 0.2em 1%;
 color: black;
 /* border-bottom: 0.05em solid #cccccc;  */  
 box-shadow: 0px 2px 2px #c0c0c0; 
   }  

footer { 
  background-color: rgb(225,225,225);  
  color: black;
  padding: 2em 1% 2em 1%; 
  font-size: 97%;
        }     
   
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 + 9%) 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%; 
                         }
 
.gallery { 
     background-color: rgb(128,128,128);           /* případná barva pozadí ... */ 
     background-image: url(IMAGES/pilsen-plzen-bartholomew-cathedral.jpg);
     background-position: center center;
       background-repeat: no-repeat;
        webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;  
        padding: 1.8em 0.1em 1.4em 0.1em;
        color: white;                                                 
        font-size: 1.5em;
        text-align: center;   /* odstavec zarovnán na střed */ 
        line-height: 190%; 
        text-shadow: 0.1em -0.01em 0.1em black;  
                               }
 

.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;  
    }  
    
.srovnani {
  border-collapse: collapse;
  width: 100%;
        }   

.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(229,231,233)} 

.prvniradkatabulky { 
    background-color: #F0F0F0; 
    font-weight: bold;
    border: 0px solid lightgrey;
   }  

article p { padding: 0 0 1em 0;   }      

aside a { color: #414141; text-decoration: none; } 

/* 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(32,144,206);          
  }      
      
.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) */        
      }         
                   
.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); 
   }     

.oranz { 
  background-color: rgb(255,80,52); 
   }  
           
.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: 55em;          /* maximální šířka 800 px */
 padding: 2em 1em 0.1em 1em;
 
 } 
 
.maxphoto {
 margin: 0em auto 0em auto;      /* nahoře mezera 0, postranní panely jsou shodné, tedy vycentováno */ 
 max-width: calc(30em + 10vw);          /* maximální šířka 35em u notebooku */
 
 } 
 
.photos { 
     background-color: rgb(51,51,51);           /* případná barva pozadí ... */ 
     padding: 0em 5% 0em 5%;
     color: rgb(224,224,224);   
                 }
 
.vsuvka2 {
  padding: 1em;
  margin: 1em 0 3em 0;
  border: 0.05em solid #cccccc;
  background-color: #f7f7f7; 
          }  

.vsuvka {
  padding: 1em 2em 1.2em 2em;
  margin: 1em 1em 2em 1em;
  font-size: 119%; 
  line-height: 175%;
  font-style: italic.;  
  text-align: center;
  color: rgb(10,10,10);
  border: 0.05em solid rgb(214,188,130);
  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;
      }  
  
p.booking {
  font-size: 90%;
  line-height: 70%;
  text-align: right;
  font-style: italic;
        }    
  
.seznam { padding: 0em 1em 0em 2em; }  
.seznam a { text-decoration: none; }  

           /* modra: #2e64e6 #114ef7 #0062de #0066cc #4bb6f5    Laura: #164ee5 */
a {text-decoration.: none; color: #0071eb; }  /*  původně rgb(32,144,206)   */
a:hover {text-decoration: underline; color: #0256b3;}

.menu {                          /* seznam, navigační nabídka */ 
       text-align: center;       /* menu je vycentrované */ 
       /*font-variant: small-caps;*/  
       } 
  
.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 */
   transform: scale(1.03);} 
 
#logo a {color: black; text-decoration: none;} 
  .menu a {color: black; text-decoration: none;}     
  .menu a.aktualni {color: #0071eb; }   
  .menu a:hover {color: #0071eb;}
  
a.backtotop {display: none; 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.4em 0.7em; color: #fff; text-decoration: none; border-radius: 0.3em; }
/* a.tlacitko:hover {background-color: #E371AF} */

a.oranztlacitko {padding: 0.4em 0.7em; background-color: #ff5034; text-decoration: none; border-radius: 0.3em; color: white; font-weight: bold}
a.oranztlacitko:hover {background-color: #e85034; text-decoration: none;} 

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 */

a.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%; 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 {
    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;
  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: 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 + 5%) 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 75% 0;
       height: 0;
       overflow: hidden;
       text-align: center;
       margin: 0.5em 0 1em 0;
      }    
   
  .things {
      background-image: url(IMAGES/pilsen-cathedral.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);  
	         }     
     
  .beer {
      background-image: url(IMAGES/pilsner-urquell-brewery.jpg);  /* obrázek na pozadí */ 
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);   
	         }    
           
  .sleep {
      background-image: url(IMAGES/pilsen-accommodation.jpg);  /* obrázek na pozadí */ 
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);  
	         }    
           
  .eat{
      background-image: url(IMAGES/pilsen-restaurant-svejk-u-petatricatniku.jpg);  /* obrázek na pozadí */
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);   
	         }     
                  
  .guides {
      background-position: center center; 
      background-image: url(IMAGES/pilsen-travel-guide.png);  /* obrázek na pozadí */
      webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;  
         } 
         
             
  .practical {
      background-image: url(IMAGES/pilsen-photogallery.jpg);  /* obrázek na pozadí */   
      box-shadow: 0.2em 0.2em 0.6em rgba(0, 0, 0, 0.4);  
	         } 
  .czechia {
      background-image: url(IMAGES/prague.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ář */