/* 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 {
	
	margin: 0em;
	font-size:1em;
    font-family: Raleway, Verdana, Geneva, Arial, Helvetica, sans-serif;
	/*background-image: url(../images/bg_coreldraw_04.png);
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;*/
	/*background-image: linear-gradient(to bottom right, rgb(255, 254, 192), rgb(163, 252, 163));*/
	background-image: linear-gradient(to right, rgb(203, 255, 170), rgb(78, 232, 240));
}



.CenikKurz {
  min-width: 320px;
  max-width: 1920px;
  margin: 0em ;
  padding: 0em 0em 4.5em 0em;
  color: #713500;
  
}




/* -----------------------------------  grid-container --------------------------------- */
.grid-container {
  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_2 middle middle middle middle right_2'
  'left_3 middle middle middle middle right_3'
  'left_4 middle middle middle middle right_4';

  grid-column-gap: 0em; /* mezera mezi column */ 
} 

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

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

/*  ---------logo------------------- */
.logoR {grid-area: logoR;}

/* ----------- 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;}
.left_3 {grid-area: left_3;}
.left_4 {grid-area: left_4;}

/* ----------------- 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;}



/*------------------------  style grid area -------------------------*/
/* ------------------sidenav ------------------ */
.logoL {
   text-align: left;
   padding: 0.15em 0.25em;
   
}

/* ---------------------------- header ------------------------------ */
.header {
    
    text-align: center;
}

/*  ---------logo------------------- */
.logoR {
   
    text-align: center;
}

/* ----------- banner -----------------------*/
.banner {
   
    text-align: center;
}
  
/* ----------------- motto---------------*/
.motto {
    
    text-align: center;
}
  

/* ----------------- middle  --------------- */
.middle {
    
    max-width: 80em;
    padding: 1.5em 2.5em 4.5em 2.5em ;

}

/* --------------------------------- left ---------------------      */
.left_1, .left_2, .left_3, .left_4 {
   
     padding: 1.5em 2.5em 1.5em 1.5em;
}

/* ------------------------------ right ----------------------- */
.right_1, .right_2, .right_3, .right_4 {
    
    padding: 1.5em 0.5em 1.5em 2.5em;
}

/* ----------------------------- footer ------------------------------  */
.footer {
	
	 display: block;
	width: 100%;
	margin: 0em auto;
	position: fixed;
	bottom: 0px; 
	border-top: #274F00 1px solid;
  text-align: center;
  background-color: rgb(255,255,255); 
  background-color: rgba(255,255,255, 0.8); 
	
}
.footer:hover {
	background-color: #F9F9F9;
}

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

p{font-size: 1em;margin: 0.15em;}
p span{margin-left: 0.25em; color: #575757; letter-spacing: 0.1em;}

a{font-size: 1em;color: #020202; text-decoration: none; display: block;}
a:hover{font-size: 1em; transform: none;}
/* ------------------------ decoration :HOVER for left and right column --------------------------- */
.left_1 a:hover{font-size: 1em; transform: scale(1.2) translateX(2.5em) translateY(0em);transition: all 0.3s ease-in-out;}
.left_2 a:hover{font-size: 1em; transform: scale(1.2) translateX(2.5em) translateY(0em);transition: all 0.3s ease-in-out;}
.right_1 a:hover{font-size: 1em; transform: scale(1.2) translateX(-0.8em) translateY(0em);transition: all 0.3s ease-in-out;}
.right_2 a:hover{font-size: 1em; transform: scale(1.2) translateX(-0.8em) translateY(0em);transition: all 0.3s ease-in-out;}
.right_3 a:hover{font-size: 1em; transform: scale(1.2) translateX(-0.8em) translateY(0em);transition: all 0.3s ease-in-out;}
h1{font-size:1.8em;}
h2{font-size:1.4em;}
h3{font-size:1.25em;}
h4{font-size:1.15em;}
h5{font-size:1.15em;}
h6{font-size:1em;}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.1em;
  margin: 0.1em 0.2em;
  padding: 0.1em 0.2em;
}

article {
	
	max-width: 65em;

}

aside a h3{
	font-size: 1.15em;
	letter-spacing: 0.1em;

}
aside a:hover h3{
	font-size: 1.15em;
	text-decoration: underline;

}


/* ------------------------- zakladni barvy --------------------------- */
.red{color: #fa0202;}
.green{ color: #3d7801;}
.blue{ color: #1c03fe;}

.nadpis{
	font-size:2.5em ;
	font-family: 'Thasadith';
}

/* ----------------------- prvni odstavec po h3 trochu odsadime pomoci prvniho pismene ----------------*/

h3 + p::first-letter{
 font-size: 1.5em;
 margin-left: 0.5em;
 
}

h3 ~ p {letter-spacing: 0.05em;}

/* ------------------------------------ u prvniho radku roztahneme písmenka --------------------------- */
h3 + p::first-line{	letter-spacing: 0.15em;}
/*--------------------------- použijeme em k zvýraznění písma ------------------------------- */
em{
	font-weight: bold;
	letter-spacing: 0.1em;
}
/* ------------------------------------ po h2 zvyraznim em a span -- citace -- --------------------------------------*/
h3 em { letter-spacing: 0.25em; font-style: italic;}
h3 span { letter-spacing: 0.05em; font-style: oblique;}

/* -------------------------------- code -------------------------- */ 
code{ 
	display: block;
	width: 86%;
margin: 1.5em auto;
padding: 0.5em;
background-color: #b7ff6fb0;
border: #020202 1px solid;
text-align: center;
}
code.alignLeft{ 
text-align: left;
}



/*------------------------------- místo tabulek použit seznam ------------------- */
dl {
display: block;
width: 86%;
	margin: 1.25em auto;
	padding: 0.15em 2.5em;
padding: 1.5em 0.5em;
border: #020202 1px solid;
border-radius: 0.5em;
border: Black 1px solid;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

}


dt{
	font-weight: bold;
	font-style: normal;
	padding: 0.25em 0.15em;
	letter-spacing: 0.15em;

}
/* -------------------------  podtrhneme vyraz ---------------------*/
dt::first-line {
	text-decoration: underline;
}

dd{	padding: 0.15em 0.02em 0.15em 0.5em;}
/* ------------------- zvetsime privni pismenko a trochu jej pritahneme  -------------------*/
dd::first-letter{
  font-size: 1,5em;
  padding-right: -0.2em;

}


/* .------------------------------- li ------------------ */
li{	list-style: none;}

li a{font-size: 1em; color: #be7200;}

li a:hover{
	text-decoration: underline;
}

article ol li{
list-style-type: decimal;
	margin: 0.5em 0.25em;
	



}

hr{
	border: #020202 1px solid;
	margin: 1.5em auto;
	width: 86%;
}
/*      ------------------------------------------  style---------------------------                  */

.centred{text-align: center;}
.white {color: #ffffff;}

/* -------------------------- zvyrazneni  odkaz v sekci dron neni v textu patrný a proto jej zvyraznime ------------------*/

.zvyrazneni{
	display: block;
 margin: 2.5em auto;
 padding: 0.5em;
 text-align: center;
 font-weight: bold;
 letter-spacing: 0.15em;

}
/* ---------------------------------------- mezera nad a pod v nabídce -------------------*/

.gapTop{
	margin-top: 0.5em;
	border-top: #020202 1px solid;
	
}


.gapBottom{
	margin-bottom: 0.5em;
	border-bottom: #020202 1px solid;
}

/* ------------------------   zvyrazneni PRE ---------------------- */
/*
pre{ background-color: #f7ffd44f;
padding: 0.25em 0.5em;
border: #020202 1px solid;
border-radius: 1.2em;
}*/

/* ------------------------------------- IMG ----------------------------------------*/

.img_logo{
	display: block;
	width: 36%;
	margin: 0.25em auto;
	padding: 0.2em;


}
.img_icon{
	display: block;
	margin: 0.25em 0.5em 2.5em 0.25em;
	padding: 0.25em;
	border: solid 0.12em  #020202;
	border-radius: 0.5em;
	-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
	-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	background-color:rgba(255, 255, 255, 0.781);		
	float: left;
	
}
.img_icon_2{
	display: block;
	margin: 0.25em 0.5em 2.5em 0.25em;
	padding: 0.25em;
	border: solid 0.12em  #020202;
	border-radius: 0.5em;
	-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
	-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	background-color:rgba(255, 255, 255, 0.781);		
	float: right;
	
}

.img_icon_3{
	display: block;
	margin: 0.25em;
	padding: 0.25em;
	border: solid 0.12em  #020202;
	border-radius: 0.5em;
	-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
	-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	background-color:rgba(255, 255, 255, 0.781);		
	float: none;
	
}

.img_01{
	display: block;
	width: 86%;
	margin: 0.52em auto;
	padding: 0.2em;
	border: Black 2px solid;
	border-radius: 0.5em;
	-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
	-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	background-color:rgba(255, 255, 255, 0.781);
}

.img_02{
 display: block;
	width: 86%;
	margin: 0.2em auto;
	padding: 0.2em;
		border: #848484 2px solid;
	border-radius: 0.5em;
		 -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
  -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  box-shadow: 1px 2px 4px rgba(176, 176, 176, 0.338);
	
	
}
/* -------------------------------------------- img je textem obtékáno float ----------------------*/
.img_03{
 display: block;
	width: 45%;
	margin: 0.2em 0.5em;
	padding: 0.2em;
		border: #848484 2px solid;
	border-radius: 0.5em;
		 -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
  -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  box-shadow: 1px 2px 4px rgba(176, 176, 176, 0.338);
  float: left;
	
	
}

.img_04{
 display: block;
	width: 25%;
	margin: 0.2em 0.5em;
	padding: 0.2em;
		border: #848484 2px solid;
	border-radius: 0.5em;
		 -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
  -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  box-shadow: 1px 2px 4px rgba(176, 176, 176, 0.338);
  float: right;
	
	
}

.img_error{
 display: block;
	width: 86%;
	margin: 0.2em auto;
	padding: 0.2em;
	border: none;
	 border: none;
	
}



.icon{
 display: block;
	width: 10%;
	margin: 0.2em;
	padding: 0.2em;
border: none;
box-shadow: none;
	
}
.img_trojuhelnik, .img_zarovka{
	display: block;
	width: 4em;
	height: auto;
	float: left;
	margin: 0.15em 0.25em;

}

/* ------------------------- zvýrazňuje přednastavené hodnoty ------------------------------------ */
.prednastaveny {
	   font-weight: bold;

	
}

/* ------------------------ table ---------------------------------*/

table {
	padding: 0em;
	margin: 0.5em auto;
	 width: 86%;
border: Black 1px solid;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

	
}

td {
	 padding: 0.2em 0.5em;

	
}

article table td:nth-child(odd){
font-weight: bold;
	
}
article table  td:nth-child(even){
	font-size: large;
}

/* ----------------------- zmena table pro ctyri sloupce ------------------------*/

article table.DlouhyKurz {border: #080808 2px solid;width: 96% ;}
article table.DlouhyKurz td:nth-child(odd){
font-weight: normal;
font-size: 1em
}
article table.DlouhyKurz  td:nth-child(even){
	font-size: 1em;
	font-weight: normal;
}

article  tr:nth-child(odd){
	background-color: rgba(194, 255, 156, 0.683);
}
article tr:nth-child(even){
	background-color: rgba(255, 176, 92, 0.716);
}

ul li span{
	display: block;
	text-align: right;
	float: right;
	color: #747474;
	padding: 0em 0.25em 0em 1.5em;
	
}
/* ------------------------------- table  tabulka_akordy --------------------------------- hodnoty se opakuji, aby smazaly drive zadané hodnoty 'Table' -- */

article table.tabulka_akordy {border: #080808 2px solid;}
table.tabulka_akordy th { padding: 0.2em 0.5em; text-align: center;}
table.tabulka_akordy td { padding: 0.2em 0.5em;text-align: center;}
article table.tabulka_akordy td:nth-child(odd){font-size: 1.2em;font-weight: bold; border: #020202 1px solid;}
article table.tabulka_akordy  td:nth-child(even){font-size: 1em;font-weight: bold;border: #020202 1px solid;}
article table.tabulka_akordy  tr:nth-child(odd){background-color: rgba(248, 255, 149, 0.441);}
article table.tabulka_akordy tr:nth-child(even){background-color: rgba(104, 248, 96, 0.504);font-size: 1.4em;}
/* ------------------------------- end table  tabulka_akrody --------------------------------- */
/* ---------------------------------- button back---------------------------*/

.button-back{
	display: block;
	margin: 0.2em;
	padding: 0.2em 2em;
	border: Silver 1px solid;
	position: fixed;
	top: 7.5em;
	right: 2.5em;
	text-align: center;
	border-radius: 2.5em;
	background-color: White;
	box-shadow: 5px 10px 18px #888888;
}



.button-back:hover{
	
	background-color: #B6FF6F;
	box-shadow: 5px 10px 8px #888888;
		background-image: linear-gradient(#E2FFD4,#F7FFD4);

}



/* Responsive layout zmenšení písma pro rozlišení 1920  */
@media (max-width: 1900px) {

body{
    font-size: 0.8em;
}    

}

/* Responsive layout zmenšení písma pro rozlišení 1600  */
@media (max-width: 1600px) {

body{
    font-size: 0.8em;
}    
/* -----------------------------------  grid-container --------------------------------- */
.grid-container {
  display: grid;
  grid-template-areas: 
  'logoL header header header header header'
  'middle middle middle middle middle middle';

  grid-column-gap: 0em; /* mezera mezi column */ 
} 


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

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

/*  ---------logo------------------- */
.logoR, .banner, .motto, .left_1, .left_2, .left_3, .left_4,.right_1, .right_2, .right_3, .right_4   {
   display: none; 
   visibility: hidden;
   width: 0px;
   padding: 0em;
   }

table{
    width: 98%;
    font-size: 0.8em;
    font-weight: none;
    padding: 0.02em;
    margin: 0em;
}
.img_01{
    width: 96%;
	border: Black 1px solid;
	margin: 0.02em;
	padding: 0.02em;
}

.img_02{
    display: block;
	width: 96%;
	margin: 0.02em;
	padding: 0.02em;
border: Black 1px solid;
}

/* ------------------------------------- IMG ----------------------------------------*/

.Abelton img, .Pinacle img, .Html img{
	display: block;
	width: 96%;
	margin: 0em;
	padding: 0.02em;
	border: Black 1px solid;

	
}

/* -------------------------- zvyrazneni  odkaz v sekci dron neni v textu patrný a proto jej zvyraznime ------------------*/

.zvyrazneni{
	display: inline;
 margin: 0.01em auto;
 padding: 0.05em;
 text-align: center;
 font-weight: bold;
 letter-spacing: 0.015em;

}

/*------------------------------ vratime seznam do nulové pozice a sebereme mu ramecek --------------- */
dl {margin: 0em;
padding: 0em;
border: none;
border-radius: none;
width: 100%;
	margin: 0.25em auto;
padding: 0.2em;
border: none;
border-radius: 0em;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
}