@charset "utf-8";

*{
   box-sizing:border-box;
   -moz-sizing:border-box;
   -webkit-box-sizing:border-box;
   margin:0px;
   padding: 0px;
   line-height:1.4;
  /* font-family: Palatino, Garamond, Times, serif; */                          
   font-family: Verdana, Palatino, Garamond, Times, serif; 
}
html {
    font-size: 1rem;
}




body {
 
   margin:50px auto;
   min-width: 300px;
   max-width: 1200px;
   background-color: #4682b4;
}

div#podklad {
   width:100%;  
   background-color: #fffafa;   /*snih*/
   padding:1rem;
   border:2px solid #4682b4;
   border-radius:30px;
   
}
p {
 /*  border: 2px solid blue;*/
    text-align: justify;
    padding-left:10px;
    padding-right:20px;
    
}


 
article {
   margin-top:20px; 
    
}


article#sluzby {

 width:100%;
/* font-size:0.8rem;*/
  
}


h1 {
  font-size:3rem;
  font-weight: bold;
 /* margin-bottom: 10px;*/
  color: #008000;
  
}
h2 {
    font-size:1.2rem;
    color:#00008b;
  /*  border: 2px solid red;*/
    margin-top: 30px;
    margin-left:0.7rem;
    
}

h3{
   font-size: 1.4rem;
   color: #008000;
   margin-top: 30px;
 /*  margin-bottom: 10px;*/
 /* border: 2px solid green;*/
    margin-left:0.7rem;
}
h4{
    margin-left:2rem;
}

h5{
   margin-left:0.7rem; 
}
p#pismeno:first-letter {
    float:left;
    line-height: 0.9;
    font-size: 330%;
    color:  #00008b;  /*#808080;*/
    
}



/*
################################################################################
###                     ZAHLAVI                                         #######
###############################################################################
*/

.motto {
   
   width:100% ;
   text-align: center; 
   font-size:1.1rem;
   margin-top:40px;
} 

figure img{                     /*Obrazky na FOTO*/
    width:100%; 
    height: 260px;
   
}
img#kamen{                        /*Kamen*/
    
    border-radius:15px;
    margin-top:70px;
    border:4px solid #ffffff;
    margin-bottom:40px;
   width: 100%;
    height: auto;
}

 
header {
  /* font-weight: bold;*/
   color:#00008b;
   font-size: 0.8rem;
   text-align: center;
   line-height:1;
}
header p {              /*Jmeno*/
    font-size: 1.7rem;
    text-align: center;
    font-weight: bold;
}

aside {
   width:16rem;
   height:700px;
   font-size: 1rem;
   color:#00008b ; 
   font-style:normal;
   text-align: center;
   margin:75px auto;
   border: 2px solid  #008000;
   border-radius:8px;
   box-shadow:0px 0px 8px 3px #008000;
   padding-top: 45px;
   float: right;
   margin-left:1rem;
   
}
aside div {
    margin: 0px auto; 
    width:8rem;
    /* border: 2px solid green;*/
    
}

 .kapka{
   list-style-image: url(../obr/favicon1.png);
   margin-left:5rem;
   padding-right:20px;
 }
 .tecka {
    list-style-type:circle;
    margin-left:5rem;
    font-size:0.8rem;
 }
 .pismo {
    font-size:0.8rem; 
     
 }
     
/* 
  ##############################################################################
  ###                        H O R I Z O N T A L N I   M E N U                    ###
  ##############################################################################
*/

 nav.horizontalni_menu ul {
    list-style-type: none;
    width:16rem;
    overflow:hidden;
    display:block;
    margin:0 auto;
    border: 2px solid   #000080;
    border-radius:6px;
 }
 
 nav.horizontalni_menu ul li {
 
    float:left;
    text-align: center;
    border-left:1px solid #00008b;  
    border-top:1px solid #00008b;
    border-bottom:1px solid #00008b;
    font-size: 1.1rem;
    font-weight: bold;
    width:50%;
 }
     
 
 nav.horizontalni_menu ul li:last-child { 
    border-right:1px solid #00008b;
    
 }
 
 nav.horizontalni_menu ul li a  {
     display: block;    
     padding: 5px ;
     text-decoration:none;
     color:#00008b;
 }

 nav.horizontalni_menu ul li a.vybrana_polozka_menu  {
     background-color:#008000; 
     color:#ffffff;
     text-align: center;
 }

 nav.horizontalni_menu ul li a:hover:not(.vybrana_polozka_menu)  {
     background-color:#d3d3d3;
     color:#ffffff;
 } 
 
 /* 
  ##############################################################################
  ###                        F O O T E R                                    ###
  ##############################################################################
*/

.paticka {
 /* border: 1px solid greenyellow;*/
   text-align: left; 
   font-family: 'Times New Roman', cursive;
   font-size: 1em;
   margin-top: 1rem;
   margin-left:0.7rem;
}

 
/* 
  ##############################################################################
  ###       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"
            "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
                              { 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"
            "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 
                              { 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:30%;}*/
       
        article#sluzby{grid-area:dokument2;}
        
       
        footer { grid-area: paticka; }

    }