a {text-decoration: underline;}
      #obal, .paticka {border-radius: 0px 0px 15px 15px;}
      
      .paticka a, .paticka a:visited {color: white;}
      
      a:hover {text-decoration: underline}
       
      hr { margin-top: 7px; margin-bottom: 7px;} 
      .anotace {font-size: 100%; padding-left: 0px; margin-top: 7px; line-height: 1.5em; }
      .nazev {font-size: 150%;}
      .ikona {width: 40px; padding: 3px;}
      .ikona:hover {width: 46px; padding: 0;}
      .ikona-soubor {padding-right: 0.8em; width: 20px;}
      
      
      .miniatura {max-height: 100px; max-width: 40%; margin-right: 2em;}
      
      h1 {font-size: 400%; font-weight: normal; margin: 0; margin-top: 10px; padding: 0; padding-top: 10px; color: white; text-align: left;}
      h2 {font-size: 130%; font-weight: normal; margin: 0; margin-top: 20px; padding: 0; color: white; text-align: left; margin-top: 0;}
      
      h3 {font-size: 120%; margin: 0; font-weight: normal; margin-bottom: 10px;}
      #fl_o, #fl_s, #fl_sw {width: 250px; margin-bottom: 10px; border-radius: 5px; border-style: hidden; padding: 2px; background-image: linear-gradient(white, gray);}
      
      a.excel {background-image: url('obr/excel-icon.gif'); background-repeat: no-repeat; padding-left: 20px; font-size:150%; padding-bottom: 20px;}
      a.ppt {background-image: url('obr/ppt-ikona.png'); background-repeat: no-repeat; padding-left: 20px; font-size:150%; padding-bottom: 20px;}
      
      #zahlavicko {background-color: RGB(0,116,158); background-repeat: no-repeat; width: 100%; height: auto; display: grid; grid-gap: 0px;}
      
      #zahlavicko div {border: 0px solid black;}
      #nadpis {grid-area: nadpis;}
      #zkumavka {grid-area: zkumavka; width: 98px; padding-left: 30px; padding-right: 20px;}
      #zk-long {display: none;}
      #podnadpis {grid-area: podnadpis;}
      #filtry {grid-area: filtry; padding-right: 20px;}
      #logovernier {grid-area: logovernier; text-align: left;}
      #logovernier img {width: 130px;}
      
      #stazeni {text-align: left; grid-area: stazeni; padding-top: 30px;}
      .stazenibr {display: none;}
      
      .obory-ico {float: right; margin-left: 5px;}
      

    #zahlavicko {
        grid-template-areas:
    'zkumavka nadpis stazeni'
    'zkumavka podnadpis filtry'
    'zkumavka podnadpis filtry'
    'zkumavka logovernier filtry';
   }

      #stazeni-ga img, #stazeni-ll img {float: left; padding-top: 0px; width: 20px;}
      #stazeni-ga div, #stazeni-ll div {padding-left: 30px;}
      #stazeni-ga, #stazeni-ll {height: 30px;}
      #stazeni-ga div {margin-top: 30px;}
      
      #sestavit-balicek-ga, #sestavit-balicek-ll { color: white; }
      
      
      
      .linksikonou {line-height: 200%;}
      
      #sestavit-balicek-ll:hover #stazeni-ll-ico {
      animation: animate_background 0.5s ease-out;            
      }

      #sestavit-balicek-ga:hover #stazeni-ga-ico {
      animation: animate_background 0.5s ease-out;            
      }

     
      @keyframes animate_background { 
        0% {transform: scale(1.0);} 
        50% {transform: scale(1.2);}
        100% {transform: scale(1.0);}        
      }

      .linksikonou:hover .ikona-soubor {
      animation: animate_background2 0.5s ease-out;            
      }

      @keyframes animate_background2 { 
        0% {transform: scale(1.0);} 
        50% {transform: scale(1.3);}
        100% {transform: scale(1.0);}        
      }
      
      #filtry {color: white; text-align: left; font-size: 90%;}
      #filtry p {margin-bottom: 10px;}
      
      hr {background-color: #DDD; height: 1px; border: 0;}
      
      select.classic {
        background-image: linear-gradient(45deg, transparent 50%, blue 50%), linear-gradient(135deg, blue 50%, transparent 50%), linear-gradient(to right, skyblue, skyblue);
        background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
        background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
        background-repeat: no-repeat;
      }
      
      select.classic:focus {
        background-image: linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(to right, gray, gray);
        background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
        background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
        background-repeat: no-repeat;
        border-color: grey;
        outline: 0;
       }

        #obal {width: 960px;}



.experiment-ga, .experiment-ll {border: 1px solid #EEE; border-color: #AAA; qwidth: 99%; height: auto; margin-top: 3em;}
.experiment-ll.hacknic {border: 0px solid #EEE; border-color: #AAA; qwidth: 99%; height: auto; margin-top: 0em;}

.experiment-grid {padding-left: 0.5em; position: relative; top: -2.9em; margin: 0; display: grid; height: auto;}


.accordion-nadpis {border: 0px solid #DDD; background-color: white; padding: 2px; font-size: 110%; position: relative; top: -1.9em; left: 0.5em; padding-left: 10px; padding-right: 10px; display: inline-block;}
.experiment-odkazy {grid-area: odkazy; }
.experiment-cidla {grid-area: cidla;}
.miniatura {float: right; margin-right: 10px;}
.mini2 {margin-right: 20px;}


.experiment-odkazy p:first-of-type {padding-top: 0; margin-top: 0;}

.experiment-grid {margin-bottom: -2em;}


    .experiment-grid {
        grid-template-areas:
    'odkazy cidla';
   }

/* mobil 360px × 640px */

@media only screen and (max-width: 999px) {

  #obal {
    margin: 0px;
    width: 100%;
    }
    
    
}


@media only screen and (max-width: 940px) {
    

  #obal {
    margin: 0px;
    width: 100%;
    }
    
       
    #logovernier {margin-top: 10px;}

    #zahlavicko {
      grid-template-columns: 150px 400px auto;
      grid-template-areas:
      'zkumavka nadpis  stazeni'
      'zkumavka  podnadpis filtry'
      'zkumavka logovernier  filtry';
      
   }
   
   
   
}




@media only screen and (max-width: 900px) {
    
  #obal {
    margin: 0px;
    width: 100%;
    }
    
    #zk {display: none;}
    #zk-long {display: block;}
    
    #zahlavicko {
      grid-template-columns: 150px auto;
      grid-template-areas:
      'zkumavka nadpis'
      'zkumavka podnadpis'
      'zkumavka logovernier'
      'zkumavka stazeni'
      'zkumavka filtry';
   }
   
   .miniatura {float: none;}

    .experiment-grid {
    
        grid-template-areas:
    'cidla'
    'odkazy';
   }
   
   
}

@media only screen and (max-width: 550px) {
     .obory-ico {display: none;}
}

@media only screen and (max-width: 560px) {
   
    h1 {font-size: 300%;}
    h2 {font-size: 100%}
    #stazeni {font-size: 90%; padding-top: 20px;}

     
        
    #stazeni-ga div, #stazeni-ll div {padding-left: 30px;}
    
    #zahlavicko {
      grid-template-columns: 150px auto;
      grid-template-areas:
      'zkumavka nadpis'
      'zkumavka podnadpis'
      'zkumavka logovernier'
      'zkumavka stazeni'
      'zkumavka filtry';
   }
   
   
     .miniatura {max-width: 40%; margin-right: 10px;}
}


@media only screen and (max-width: 480px) {
#zkumavka {padding: 0;}
    #zahlavicko {
      grid-template-columns: 100px auto;
    }

    h1 {font-size: 200%; }
    h2 {font-size: 80%;}
    #stazeni {font-size: 90%; line-height: 130%; padding-top: 10px;}
    #stazeni-ga {padding-bottom: 20px;}
    #fl_o, #fl_s, #fl_sw {font-size: 85%; width: 200px;}
    .stazenibr{display: block;}
    
}




.hid {visibility: hidden;}


.paticka {height: auto; font-size: 20px; padding-top: 7px; padding-bottom: 7px; 100%; text-align: center; background-color: rgb(18,120,160); color: white;}