@-ms-viewport { 
  width: device-width 
}

body{
     background: #04546F;
     font-family: 'Poiret One', sans-serif;
     margin: auto;
     color: #eeeeee;
     }


     h2, h3, h4, h5, h6{
     text-align: center;
     letter-spacing: 2px;
     font-weight: normal;
     text-transform: uppercase;
     text-decoration: none;
     line-height: 3em;
     color: #888;
     }

     h1 {
    display:none;
     }
    
     h2{
     font-size: 25px;
     text-shadow: 0px 0px 20px black;
     }
    
     
    h3{
    font-weight: bold;
    line-height: 1em;
    text-align: left;
     }

     .tucny{
     font-weight: bold;
     }
     .bannertext{  
     display: none;
     } 

     .zajem{
     text-align: center;
     text-transform: uppercase;
     line-height: 1.5em;       
     }
      nav{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      width: 100%;
      height: 70px;
      background-color: rgba(4,13,53,.85);
      }  
    
      nav a{
      color: #eee;
      transition: 250ms ease-in-out;
    } 
   
      nav a:hover {
      color: #888;           }
   
      ul {
      display: none;
      width: 40%;        /* Šířka toho vysunutýho menu, souvisí s margin-left. Můžeš zkoušet měnit, pak nejlíp zjistíš, k čemu to je :) */
      margin-left: 5%;
      margin-top: 70px;
      background-color: rgba(4,13,53,.7);
    }         
    
     li {
      text-transform: uppercase;
      padding: 10px;
      letter-spacing: 2px;
      }
      
      ul li {           
      display: block;
      text-align: center;
      font-size: 17px;
    }
      
      td{
      width: auto;
      padding: 20px;

      }
      table{
      margin: 0px auto;

     }   

   

      .logo {
      position: absolute;
      top: 0;
      left: 15px;
      margin-left: 0px;
    }
    
    .odkryt, .skryt {      
      text-transform: uppercase; 
      position: absolute;
      top: 20px;
      right: 15px;
      
    }
    
    .odkryt {
      background-image: url(down-icon.png);
      display: inline-block; 
    }
    
    .skryt {
      background-image: url(up-icon.png);
    }


    #menu:target .odkryt {      
      display: none;
    }
    
    #menu:target .skryt, #menu:target ul {
      display: inline-block;
      
    }

     p{
     text-align: justify;
     font-size: 1em;
     }
      
     #banner{
     background: url("banner.jpg") no-repeat top center; 
     position: relative;
     background-size: 100%;
     background-attachment: left: 0; top: 70px;
     height: 450px;
     margin-bottom: -140px;
    }
     
     .banner-content{
     display: none;
     }

     a {
     text-decoration: none;
     color:#888;
     }
   
     .program{
         padding: 18px 20px;
         transition: 180ms ease-in-out;
         font-size: large;
     } 
     
    .program:hover {
        font-size: larger;
    }


     #onas {
     height: 100%;
     }
     
     #repertoar{
     background: #040D35;
     height: 100%;
     line-height: 30px;
     }

     #koncerty {
     height: 100%;    
     }
     
     #obsazeni {
      background: #040D35;   
     height: 100%;
     }
     
     .desktop {
         display:none;
     }
     .mobil{
         display:table;
     }
     
     #galerie {
     height: 100%;
     }
     
     #kontakt{
     text-align: center;
     background: #040D35;   
     height: 100%;
     }
    
     #kontakt table{
        text-transform: uppercase;
        font-size: 20px;
        text-align: center;
        border-radius: 20px;
        background: rgba( 4, 84, 111,0.2);
    }
     
    .tel td{
        float: bottom;
    } 
    
    #repertoar .button{
    display: block;
    background: #888;
    border-radius: 15px;
    width: 180px;
    color: #040D35;
    font-weight: bold;
    margin: auto;
    transition: all 250ms ease-in-out;
    text-align: center;
    margin-top: -10px;
    }
  
  #repertoar .button:hover{
      background: #04546F;
      color: #888;
    }
  
  
  footer{
  text-align: center;
  background: #040D35;
 }

  .aktkoncerty{
     display:none;
 }