@charset "utf-8";

   

.neobtekat {
    clear: both;
  
}

article#cely {
    margin-top:-50px;
}

 
.popis{
    text-decoration:none; 
    color:#000000;
        
}
/*
a{
     display:block;
     
}
*/

figure {
    border:2px solid #ffffff;
    border-radius:8px;
  /*  width:32%;*/
    height:400px;  
    float:left;  
    margin:5px;
    overflow:auto;
    padding:5px;
}

figure img {
    border:2px solid #ffffff;
    border-radius:10px;
}
   
figcaption {
    /* text-align: center;*/
    overflow: hidden;
    clear: both;
    line-height:1.4;
    font-size:0.9rem;
     
} 
      

a:hover figure {
    border:3px solid #191970;
    opacity:0.8;
    box-shadow:0px 0px 8px 3px #4169e1;
    /*color:#0000cd;*/
        
 
} 
/* 
  ##############################################################################
  ###       R E S P O N Z I V N Í   R O Z V R Ž E N Í   S T R Á N K Y        ###
  ###                         M Ř Í Ž K O V Á   M E T O D A                  ###
  ###   Zdroj: https://www.root.cz/clanky/css-grid-revoluce-ve-web-designu/  ###
  ##############################################################################
*/

@supports (grid-auto-flow:row ){ 
    
    /*
        Výchozí nastavení - pro mobily.
            
    */
    body {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas:
            "kontakt"
            "obrazek"
            "hlavicka"
            "menu"
            "postranni_panel"
            "dokument"
            "dokument2"
            "paticka";
    }
        p#uvod{ grid-area: kontakt;}

        p img { grid-area: obrazek; }

        header { grid-area:hlavicka;}

        nav { grid-area: menu; }

        article { grid-area: dokument;} 
                article a figure /*border:1px solid  #ffffff;*/
                              { width:100%;}
                              
        article#cely{grid-area:dokument2;}
              article#cely a figure {width:100%;}
               
        aside { grid-area: postranni_panel;}
            aside {display:none;}
            
        footer { grid-area: paticka; }

}
  
    /*    Nastavení pro tablety. */
        
   
    @media only screen and (min-width:600px) {
         body {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas:
            "kontakt"
            "obrazek"
            "hlavicka"
            "menu"
            "postranni_panel"
            "dokument"
            "dokument2"
            "paticka";
    }
        p#uvod { grid-area: kontakt;}

        p img { grid-area: obrazek; }

        header { grid-area:hlavicka;}

        nav { grid-area: menu; }

        article { grid-area: dokument;} 
             
             
             article a figure /*border:1px solid  #ffffff;*/
                              { width:48%;}
                              
        article#cely{grid-area:dokument2;}
               article#cely a figure {width:48%;}
               
        aside { grid-area: postranni_panel;}
            aside {display:none;}
            
        footer { grid-area: paticka; }

    }
   

    /*
        Nastavení pro PC.
        
    */
    @media only screen and (min-width:1024px) {
    body div {
            display: grid;
            grid-template-columns:  auto 18rem;
            grid-template-rows: auto ;
            grid-template-areas:
            "kontakt kontakt"
            "obrazek obrazek"
            "hlavicka hlavicka"
            "menu menu"
            "dokument postranni_panel "
            "dokument2 dokument2 "
            "paticka paticka";
        }

        p#uvod{ grid-area: kontakt;}

        p img { grid-area: obrazek; }

        header { grid-area:hlavicka;}
            header div {display:none;}
            
        nav { grid-area: menu; }

        aside { grid-area: postranni_panel;}
             aside {display:block;}
           /*  aside div h2 {display:none; } */
        
        article { grid-area: dokument;} 
             
              article a figure {width:31.6%;}
       
        article#cely{grid-area:dokument2;}
               article#cely a figure {width:24%;}
         
        footer { grid-area: paticka; }

    }