body {
   background-color: #5EB5FF;
   
   margin: 0; 
}

/* hlavicka */

.hlavicka {
   color: white;

   width: 100%;
   
   display: block;

   box-sizing: border-box;
   
   background-color: #333;
}

.hlavicka a.logo {
   color: white;
   font-family: sans-serif;
   font-size: 220%;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   
   display: inline-block;
   
   width: 30%;
   
   padding: 0 1em 0 1.5em; 
}

.hlavicka .obr {
   width: 1.8em;
   
   position: relative;
   top: .3em;
   
   margin-right: .5em;
}

.hlavicka .menu {
   display: inline-block;
   
   box-sizing: border-box;
   
   margin: 0 2em;
}

.hlavicka .menu .odkaz {
   color: white;
   font-family: sans-serif;
   font-size: 100%;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   
   border-bottom: 3px solid white;
   
   width: 5em;
   margin: 0 .8em;
   padding: .2em .2em .5em;
   
   display: inline-block;
   
   transition: color .4s, border-bottom-color .4s;
}

.hlavicka .menu .odkaz:nth-child(1) {
   width: 6.5em;
}

.hlavicka .menu .odkaz:nth-child(1) .skryte a:not([tucne]) {
   font-weight: normal;
}

.hlavicka .menu .odkaz:nth-child(4) {
   width: 6em;
}

.hlavicka .odkaz.ven {
   text-decoration: underline;
}

.hlavicka .menu a:hover.odkaz, .hlavicka .menu a:active.odkaz, .hlavicka .odkaz:hover {
   color: gold;
   border-bottom-color: gold;
}

.zamecek::before {
  content: '';
  
  width: 4px;
  height: 5px;
  
  border: 2px solid white;
  border-bottom: 2px solid transparent;
  
  position: relative;
  top: -11px;
  left: -0px;
  
  display: inline-block;
  
  transition: border-color .4s;
}

.zamecek {
   content: '';
   background-color: white;
   
   width: 12px;
   height: 10px;
   
   position: relative;
   top: 4px;
   left: 5px;
   
   display: inline-block;
   
   transition: background-color .4s;
}

.hlavicka .odkaz:hover .zamecek {
  background-color: gold;
}

.hlavicka .odkaz:hover .zamecek::before {
  border-color: gold;
  border-bottom-color: transparent;
}

.hlavicka .rozklik::after {
   content: '';
   
   width: 0;
   height: 0;
   
   border: 6px solid transparent;
   border-top: 8px solid white;
   
   position: relative;
   top: 13px;
   left: 6px;
   
   transition: border-top-color .4s;
}

.hlavicka .rozklik:hover::after {
   border-top-color: gold;
}

.skryte {
   background-color: #333;
   
   display: none;
   
   width: 8em;
   
   position: absolute;
   top: 4.1em;
   
   padding: .5em 2px .5em;
   margin-left: -1.5em;
}


.hlavicka .rozklik .odkaz, .hlavicka .rozklik a.odkaz:hover  {
   padding: .6em 0;
   border-bottom: 2px solid white;
}

.hlavicka .rozklik .odkaz:last-child, .hlavicka .rozklik a.odkaz:last-child:hover {
   border-bottom: 0 solid white;
}

.hlavicka .rozklik:hover > .skryte {
   display: block;
}

.hlavicka a.face {
   color: #333;
   font-size: 200%;
   font-weight: bold;
   font-family: sans-serif;
   text-decoration: none;
   text-align: center;
   
   background-color: white;
   width: 1em;
   height: 1em;
   
   border: 4px solid white;
   border-radius: 50%;
   
   display: inline-block;
   float: right;
   
   margin: .7em 1em 0 0; 
   padding-bottom: 3px;
   
   transition: color .2s, background-color .2s, border-color .2s; 
}

.hlavicka a.face:hover {
   color: white;
   background-color: #4267B2;
   border-color: #4267B2; 
}

.hlavicka a.rajce {
   color: white;
   font-size: 200%;
   font-weight: bold;
   font-family: sans-serif;
   text-decoration: none;
   text-align: center;
   
   display: inline-block;
   float: right;
   
   margin: .75em .6em 0;
   
   transition: color .2s; 
}

.rajce span {
   color: lightgray;
   transition: color .2s;
}

.hlavicka a.rajce:hover {
   color: #F30;
}

.rajce:hover span {
   color: #7AB800;
}

.hlavicka .dolu {
   color: white;
   font-family: sans-serif;
   text-decoration: none;
   font-size: 140%; 
   
   display: none;
   
   margin-top: 1em;
}

/* obsah */

.obsah {
   font-family: sans-serif;
   font-size: 120%;
   
   background-color: white;
   box-shadow: 0px 0px 20px black;

   width: 80%;
   max-width: 80em;
   min-height: 20em;

   margin: 3em auto 2em;
   padding: 1em;
}

.obsah h1 {
   margin: 1em;
}

.obsah h2 {
   font-size: 140%;
   
   margin: .3em;
}

.obsah li {
   margin: .2em 0;
}

.obsah .durazne {
   font-size: 110%;
   font-weight: bold;
}

.obsah .navigace {
   display: block;
   
   margin-bottom: 1em;
}

.obsah .navigace a {
   color: darkblue;
   
   border-right: 2px solid black;
   
   padding-right: 5px; 
}

.obsah .navigace a:last-child {
   border-right: 0 solid black;
}

.obsah table {
   border-collapse: collapse;
   
   margin: 0 0 1em 0;
}

.obsah table tr td:first-child {
   text-align: right;
   padding-right: .2em;
}

.obsah table tr td:nth-child(2) {
   text-align: center;
   padding-right: .2em;
}

.obsah table tr td:nth-child(2)[l] {
   text-align: left;
}

.obsah table tr td:nth-child(3) {
   text-align: left;
}

.obsah form {
   text-align: center;

   margin: 5em 0;
}

.obsah .uvozovky:before {
   content: "„";
}

.obsah .uvozovky:after {
   content: "“";
}

/* paticka */

.paticka {
   color: white;
   font-family: sans-serif;

   background-color: #333; 
   
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: flex-start;
   flex-wrap: wrap;
   
   
   width: 100%;
   
   box-sizing: border-box;
   padding: 2em;
}

.paticka h1 {
   font-size: 140%;
   margin: .2em;
}

.paticka p {
   margin: .1em;
}

.paticka a, .paticka a:link, .paticka a:visited {
   font-size: 110%;
   color: gold; 
}

.paticka .obecne {
   width: 100%;
   
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: flex-start;
   flex-wrap: wrap;
   
   margin-bottom: 2em;
}

.paticka a.face {
   color: #333;
   font-size: 200%;
   font-weight: bold;
   text-decoration: none;
   text-align: center;
   
   background-color: white;
   width: 1em;
   height: 1em;
   
   border: 4px solid white;
   border-radius: 50%;
   
   display: inline-block;
   
   margin-top: .5em; 
   padding-bottom: 3px;
   
   transition: color .2s, background-color .2s, border-color .2s; 
}

.paticka a.face:hover {
   color: white;
   background-color: #4267B2;
   border-color: #4267B2; 
}

.paticka a.rajce {
   color: white;
   font-size: 200%;
   font-weight: bold;
   font-family: sans-serif;
   text-decoration: none;
   text-align: center;
   
   display: inline-block;
   
   margin: .75em .6em 0;
   
   transition: color .2s; 
}

.paticka a.rajce:hover {
   color: #F30;
}
.paticka .menu a {
   display: block;

   margin: .5em .1em;
}

.paticka .zamecek {
   background-color: gold;
   
   top: 7px;
   left: 6px;
}

.paticka .zamecek::before {
   border-color: gold;
   border-bottom-color: transparent;
   
   top: -13px; 
   left: 2px;
} 

.paticka .sponzori {
   width: 100%;

   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

.paticka .sponzori img {
   /*height: 8em;*/
}

/* Mobilní zobrazení */

@media screen and (max-width: 97em) {
   .hlavicka a.rajce {
       display: none;
   }
}

@media screen and (max-width: 87em) {
   .hlavicka a.face {
      display: none;
   }
}

@media screen and (max-width: 82em) {
   .hlavicka a.logo {
      padding: 0 0 0 0;
   }
   
   .hlavicka .menu {
      margin: 0 0 0 .2em;
   }
}

@media screen and (max-width: 69em) {
     
   body {
      background-color: white;
   }
   
   /* hlavicka */
   .hlavicka {      
      text-align: center;
      
      border-right: .5em solid #333;
      border-bottom: .5em solid #333;
      border-left: .5em solid #333;
   }
   
   .hlavicka .menu {
      display: none;
   }
   
   .hlavicka a.logo {
      text-align: left;
      font-size: 200%;
      
      width: 10em;
      
      box-sizing: border-box;
      
      padding: 0 .4em;
   }
   
   .hlavicka .obr {
      width: 2em;
   }
   
   .hlavicka .dolu {
      display: inline-block;
   }
   
   /* obsah */
   .obsah {
      box-shadow: 0 0 0 white;
   
      width: 100%;
      
      box-sizing: border-box;
      
      margin: 0;
   }
   
   .obsah h1 {
      text-align: center;
   
      margin: 1em;
   }
   
   .obsah li {
      margin: .4em 0;
   }
   
   .obsah table tr {
      border-bottom: 2px solid black;
   }
   
   .obsah table tr:last-child {
      border-bottom: 0 solid black;
   }
   
   .obsah table tr td:nth-child(2)[l] {
      text-align: center;
   }
   
   /* paticka */
   .paticka .obecne {
      justify-content: flex-start;
   }
   
   .paticka .obecne div {
      margin: 2em 2em;
   }
   
   .paticka .obecne .menu {
      order: -1;
   }
   
   .paticka .sponzori {
      justify-content: center;
      flex-wrap: wrap;
   }
   
   .paticka .sponzori img {
      margin: 2em;
   }
   
}

@media screen and (max-width: 23em) {
   .hlavicka a.logo {
      font-size: 160%;
   }
   
   .paticka .sponzori img {
      margin: 1em 0;
   }
}