/*  https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99 */
/*First you will need to create a list containing the main navigation items. Then add an checkbox input/label element. This will become our main navigation button using a span as the ? menu icon   */
/*We then need to add css to fix the header to the top of the page, reset list styling and hide the dropdown menu as the default state:*/
/*pocatky nastylovani rozbalovaciho menu*/
h1 {
	margin: 0px;
    font-size: 20px;
}
.header {
	top: 0px;
	background-color: #fff;
	//box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
	position: fixed;
	width: 99%;
	z-index: 3;
	height: 90px;
}
.header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
background-color: rgb(0,147,234)
/*barva pozadi menu*/
}
.header li a {
/*barva pisma menu*/
	display: block;
	padding: 10px 10px;
	border-right: 1px solid #f4f4f4;
	text-decoration: none;
	font-size: 20px;
	color: rgb(0,0,0);
}
nav ul li:hover, .aktivni {
	background: #ffffff;
	//box-shadow: 0px 0px 5px black;
	border-style: solid;
	border-width: 2px;
	border-color: rgb(0, 147, 234);
}
.header li a:hover {
/*barva pri najeti*/
	background-color: rgb(255,255,255);
	border-style: solid;
	border-width: 2px;
	border-color: rgb(0, 147, 234);
}
.header .logo {
	position: absolute;
	top: 0px;
	left: 10px;
	z-index: 2;
	background: url('obr/logo/logo4.jpg') no-repeat;
	width: 155px;
	height: 100px;
	margin-top: 15px;
}
.header .cinnost1 {
	position: absolute;
	top: 30px;
	right: 10px;
	z-index: 1;
	text-align: right;
	background-color: #fff;
	font-size: 12px;
}
.header .cinnost2 {
	position: absolute;
	padding: 1px;
	top: 55px;
	right: 10px;
	z-index: 1;
	text-align: right;
	background-color: #fff;
	font-size: 12px;
}
.cara {
	border-top: thick solid rgb(0,147,234);
	position: relative;
	top: 90px;
	right: 5px;
	//color:  rgb(0,147,234);
}
.header .menu {
	position: absolute;
	top: 120px;
	right: 60px;
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
/*rychlost rozbaleni*/
}
/*Next we need to style the menu icon for the dropdown. I’ve decided to use span elements to create the icon, rather than an svg of icons font. Using css here allows us to have a fancy animation whenever some clicks the icon:*/
.header .menu-icon {
/*zobrazeni icony*/
	cursor: pointer;
	display: inline-block;
	//float: right;
	padding: 16px 20px;
	position: absolute;
	top: 90px;
	right: 10px;
	user-select: none;
	background-color: rgb(0,147,234);
}
.header .aktualniStrana {
	position: absolute;
	font-size: 30px;
	top: 120px;
	right: 60px;
	background-color: rgb(0,147,234)
}
/*prostredni carka*/
.header .menu-icon .navicon {
	background: #333;
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 18px;
}
/* krajni dve carky*/
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {
	background: #333;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
/*rychost zmeny symbolu*/
	width: 100%;
}
.header .menu-icon .navicon:before {
	top: 5px;
}
.header .menu-icon .navicon:after {
	top: -5px;
}
/*Now we can add the icon and menu animations when the checkbox is clicked:*/
.header .menu-btn {
	display: none;
}
.header .menu-btn:checked ~ .menu {
	max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
	background: transparent;
/*nezobrazeni prostředni čarky*/
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
	transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
	transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	top: 0;
}
article {
	position: relative;
	top: 130px;
//	width: 95%;
	//right: 20px;
	//left: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
article header {
	text-align: center;
}
article section {
	text-align: justify;
	font-size: 18px;
}
/*od tohoto mista je reseno velke zobrazeniLastly we need to add responsive css to show the horizontal menu items for larger browser widths by default:*/
@media (min-width: 48em) {
.header li {
	float: left;
}
.header .menu {
	position: absolute;
	top: 123px;
	right: 0px;
}
.header li a {
	padding: 10px 30px;
	font-size: 15px;
}
.header .menu {
	clear: none;
	float: right;
	max-height: none;
}
.header .menu-icon {
	display: none;
}
article header {
	text-align: left;
}
article section {
	text-align: justify;
	font-size: 15px;
}
.header .cinnost1 {
	position: absolute;
	top: 70px;
	right: 200px;
	z-index: 1;
	text-align: right;
	background-color: #fff;
	font-size: 12px;
}
.header .cinnost2 {
	position: absolute;
	top: 70px;
	right: 3px;
	z-index: 1;
	text-align: right;
	background-color: #fff;
	font-size: 12px;
}
.cara {
	border: thick solid rgb(0,147,234);
	position: relative;
	top: 113px;
	right: 0px;
	//color:  rgb(0,147,234);
}
}