html, body {
  padding: 0;
  margin: 0;
}
body {
  background: rgb(0,0,0);
}
#menu {
  padding: 5px;                               /* vnitřní okraj */
  text-align: center;                         /* text na střed */
  background: rgb(100,100,100);               /* barva pozadí */
  box-shadow: 0 1px 2px 1px rgb(100,100,100); /* stín menu */  
  float: left;                                
  position: fixed;                            /* pevné umístění */
  top: 0;                                     /* vzdálenost od horní části nadřzeného elementu */
  left: 0;                                    /* vzdálenost od levé části nadřzeného elementu */
  z-index: 1;                                 /* vrstvení - nastavení překrývání elementů */
}
#menu a {
  color: rgb(220,220,220);                    /* barva textu */
  text-decoration: none;                      /* odstranit podtržení */
  background: rgb(185,0,0);
  font-size: 20px;                            /* velikost písma */
  padding: 2px 10px;                          /* vnitřní okraj 2px nahoře i dole, 10px vlevo a v pravo */
  margin-left: -4px;
  padding: 6px 14px;
  font-weight: bold; /* tučný text */
  font-family: arial;
  text-shadow: 1px 1px 1px rgb(50,50,50);
  transition-duration: 0.8s;                  /* doba prolnutí */
}
#menu {
  float: left;
  width: 100%;                                /* šířka přes celý obsah */
}   
#menu a:hover {
  background: rgb(100,0,0);
}     
#poutac {
  width: 100%;                                /* šířka obrázku přes celý obsah nadřazeného elementu */
}
#nadpis, .nadpis {
  position: absolute;                         /* absolutní pozice nutná pro pozicování za pomoci příkazů top a left */
  top: 140px;                                 /* vzdálenost od horního okraje */
  left: 90px;                                 /* vzdálenost od levého okraje */
  color: white;
}
#nadpis h1, .nadpis h2 {
  text-transform: uppercase;                  /* všechna písmena velká */
  background: rgba(0,0,0,0.6);
  font-family: verdana;                       /* změnit typ písma */
  font-size: 36px;
  padding: 8px;
  float: left;                                /* obtékání kolem textu nadpisu */
  margin: 0;                                  /* odstranit vnější okraje (element <p> a h1 se smrsknou blíž k sobě) */
}
#nadpis div, .nadpis div {                    /* nutné kvůli tomu, aby element <p> neskočil vedle <h1> */
  float: left;
  width: 100%;
}
#nadpis p, .nadpis p {
  width: 500px;
  margin-bottom: 0;
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;                          /* nastavit tloušťku textu */
  text-shadow: 0px 0px 5px rgb(0,0,0), 0px 0px 5px rgb(0,0,0);
}       
#obsah {
  margin: auto;
  padding: 20px;
  max-width: 1160px;                          /* 1160px protože padding ubere 20px z každé strany takto bude výsledná délka taková jakou jsme chtěli, tedy 1200px */
}  
.sekce img {
  display: block;
  margin: auto;
  width: 80%;
  min-height: 200px;                          /* kvůli tomu, aby nedošlo k deformaci obrázku u menších rozlišení */
  min-width: 400px;                           /* kvůli tomu, aby nedošlo k deformaci obrázku u menších rozlišení */
}         
.sekce {
  position: relative;
  margin-bottom: 20px;
}
.nadpis {
  left: 130px;
}
.nadpis h2 {
  font-size: 26px;
}
.sekce-1 .nadpis {
  left: 600px;
}
.sekce-2 .nadpis {
  left: 400px;
}
.sekce-3 .nadpis {
  left: 200px;
}  
#zapati {
  padding: 20px;
  text-align: center;
  color: silver;    
  float: left;
  width: 96%;      
}
#zapati a {
  color: blue;
}
.sub-menu span {
  position: absolute;
  top: 38px;
  margin-left: -114px;
  width: 130px;
  visibility: hidden;                      /* skrýt menu */
  line-height: 32px;                       /* výška řádku */
  opacity: 0;                              /* průhlednost menu */
  transition-duration: 1.2s;                       
}
.sub-menu:hover span {
  visibility: visible;                     /* odhalit menu */
  opacity: 1;                              /* viditelné menu */
}
@media (max-width: 1120px) {
  .sekce .nadpis {
    top: 40px;
    left:  30%;
  } 
}
@media (max-width: 850px) {
  img#poutac {
    position: absolute;
    top: 0;
    left: 0px;                
  }
  #nadpis {
    position: relative;
    top: 0;
    left: 0;
    margin-top: 80px;
  }       
  #nadpis h1, #nadpis p {
    margin-left: 20px;
  }
  #nadpis p, .nadpis p {
    max-width: 500px;
    width: 90%;
  }          
  #obsah {
    padding: 20px 0;
    float: left;
    width: 100%;
  }
  #zapati {
    float: left;
    width: 90%;
    padding: 20px 0;
    margin: 0 10px;
  }           
  .sekce .nadpis {
    top: 40px;
    left:  5%;
  }                    
  .sekce img {
    min-width: 350px; 
  }
}            
.sluzba {
  display: block;
  float: left;
  text-decoration: none;
  color: white;
  width: 250px;
  margin: 10px;
  padding: 10px;
  font-size: 18px;
}