/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}
/* ----------------------------------  End reset css  ----------------------------------------*/

* {
  box-sizing: border-box;
}

body {
	font-family: 'Arima Madurai', Raleway, Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0em;
	font-size: 1em;
background-color: aliceblue;
width: 100%;
}


/* -----------------------------------  grid-container --------------------------------- */
.grid-container_1 {
  display: grid;
  grid-template-areas: 
  'hamburger navigationL navigationC  navigationR navigationR navigationR';
	gap: 0.25em;/* mezera  */
 /* grid-column-gap: 0.25em;  mezera mezi column */ 
 padding: 0.15em 0.25em;
  position: fixed;
  top: 0;
  left: 0;
 width: 100%;
 z-index: 20;
  
} 

/* -----------------------------------  grid-container --------------------------------- */
.grid-container_2 {
  display: grid;
  grid-template-areas: 
  'logoL header header header header logoR'
  'motto motto motto motto  motto motto'
  'banner banner banner banner banner banner'
  'left_1  middle middle middle middle right_1'
  'left_1 middle middle middle middle  right_2'
  'left_2  middle middle middle middle right_3'
  'left_2  middle middle middle middle right_4'
   'kontaktL kontaktL kontaktC kontaktC kontaktR kontaktR';
  	gap: 0.25em;/* mezera  */
 /* grid-column-gap: 0.25em;  mezera mezi column */ 
width: 100%;margin-top: 2.5em;margin-bottom: 2.5em;
z-index: 1;
}

/* -----------------------------------  grid-container --------------------------------- */
.grid-container_3 {
  display: grid;
  grid-template-areas: 
 
 'footer footer footer footer footer footer';
	gap: 0.25em;/* mezera  */
 /* grid-column-gap: 0.25em;  mezera mezi column */ 
  position: fixed;
  bottom: 0;
  left: 0;
   width: 100%;
} 

/* ------------------sidenav ------------------ */
.hamburger {grid-area: hamburger;}

/* ---------------------------- header ------------------------------ */
.header {grid-area: header;}

/*  ---------logo------------------- */
.logoL {grid-area: logoL;}
.logoR {grid-area: logoR;}
/*-------------------------------- navigation--------------------------*/
.navigationL{grid-area: navigationL;}
.navigationC{grid-area: navigationC;}
.navigationR{grid-area: navigationR;}

/* ----------- banner -----------------------*/
.banner {grid-area: banner;}
  
/* ----------------- motto---------------*/
.motto {grid-area: motto;}
  

/* ----------------- middle  --------------- */
.middle {grid-area: middle;}

/* --------------------------------- left ---------------------      */
.left_1 {grid-area: left_1;}
.left_2 {grid-area: left_2;}

/* ----------------- middle  --------------- */
.middle {grid-area: middle;}

/* ------------------------------ right ----------------------- */
.right_1 {grid-area: right_1;}
.right_2 {grid-area: right_2;}
.right_3 {grid-area: right_3;}
.right_4 {grid-area: right_4;}

/*---------------------------- kontakt-----------------------*/
.kontaktL{grid-area: kontaktL;}
.kontaktC{grid-area: kontaktC;}
.kontaktR{grid-area: kontaktR;}
/*------------------------------- footer-----------------------------*/
.footer {grid-area: footer;}

/*----------------------------END grid----------------------------------------------*/

/* -------------------------- stylování polí ----------------------------------------*/
.logoL,.hamburger,.header,.logoR,.navigationL,.navigationC,.navigationR,.banner,.motto,.middle,.left_1,.left_2,.left_3,.left_4,.right_1,.right_2,.right_3,.right_4,.kontaktL,.kontaktC,.kontaktR,.footer{
 border: black 1px solid; background-color: rgb(217, 217, 217); 
}


/*--------------------------- motto----------------*/

.motto{
  display: flex;
    align-content: center;
    justify-content: center;
   
}

/*--------------------------- banner----------------*/

.banner{
  display: flex;
    align-content: center;
    justify-content: center;
   
}

/*----------------------- logoR---------------------*/
.logoR{
  display: flex;
  flex-direction: row-reverse;/* reverzní řazení tedy logo je zarovnáno vpravo */
}
/*------------------------- navigation--------------------------------*/
.navigationL,.navigationC{display: flex; align-content: center;justify-content: center;}
.navigationL nav a,.navigationC nav a{letter-spacing: 0.12em;}
.navigationL nav a::first-letter,.navigationC nav a::first-letter{ font-size: 1.25em;}

.navigationR{display: flex; flex-direction: row-reverse;/*reverzní řazení proto obráceně*/}
.navigationR nav.button{ display: block;padding: 0.1em 0.5em;}
.navigationR nav.button::first-letter{font-size: 1.25em;}

/* --------------------------------- middle-----------------------------------*/
.middle p{max-width: 68em; text-indent: 0.5em;letter-spacing: 0.10em; }    /* kuli čitelnosti je snížena velikost na 68em */
.middle p:first-line {text-indent:  1.25em;}   /* prvni linka v odstavci */
.middle p:first-letter {font-size: 1.25em;}       /* prvni pismeno v odstavci */  

/*--------------------------- kontakt----------------*/

.kontaktL,.kontaktC,.kontaktR{
  display: flex;
    align-content: center;
    justify-content: center;
   padding: 1.25em 0.5em;
}



/*------------------------------------------------------ style ---------------------------------*/

h1{font-size: 1.6em;}
h2{font-size: 1.4em;}
h3{font-size: 1.25em;}
h4{font-size:1.15em}
h5{font-size:1em}
h6{font-size: 0.8em;}
p{font-size: 1em;}
a{color: black; text-decoration: none;}
a:hover{text-decoration: underline;}
.left_1 a,.left_2 a{display: block; }
em {font-size: 1.15em;font-weight: bolder;letter-spacing: 0.15em; }
.centred{text-align: center;}
.red{color: red;}
.green{color: green;}
.greenyellow{color: greenyellow;}
.decorationNone{text-decoration: none;}
.black{color: black;}

/*------------------------- img----------------------------- */
.img_filter{
  filter: drop-shadow(0 4px 20px rgba(61, 182, 251, 0.86));
   margin: 0 auto;
  display: block;
  padding: 2.5em;
  
}