/** style: Abc98!@aPADm615816584 **/

body {
	background-color: #fff;
	font-family: 'Roboto', sans-serif;
}

@font-face {
  font-family: 'Roboto';
  font-variation-settings: 'wght' 400;
  src: url('fonts/Roboto.ttf') format('truetype');
  font-display: swap;
}

* {padding: 0; margin: 0; font-size: 14px;}

header 	{
		float: left;
		background-image: url('img/header.webp');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
		background-color: #1b1e20;
		padding: 25px 0;
		color: #fff;
		width: 100%;
	}
main 	{float: left; width: 100%;}
footer 	{float: left; padding: 25px 0; width: 100%;}

	a 	{text-decoration: none; cursor: pointer; color: unset;}
	p 	{font-size: 14px;}
	
	h1 	{font-size: 26px; font-weight: 800;}
	h2 	{font-size: 21px;}
	h3 	{font-size: 18px;}

.container {margin: auto; max-width: 1366px;}

/************* header *************/
	
	#logo * {display: block;}
		#logo {margin: 30px auto; max-width: max-content; text-align: center;}
			#logo a {color: #fff;}
			#logo p {font-stretch: condensed; font-weight: 300; color: #fff;}
			#logo h1 {text-transform: uppercase;}
				#logo h1 p {text-transform: none; font-stretch: normal; font-weight: 400;color: #fff; text-align: left;}
	
	#h-status * {display: block;}
		#h-status {margin: 30px auto; max-width: max-content; text-align: center;}
		
			#stav {
				text-transform: uppercase;
				font-weight: 600;
				line-height: 20px;
				padding: 8px 16px;
				border-radius: 5px;
			}
			
			.stav-green {color: #27d16a; border: solid 1px #1da755;}
			.stav-orange {color: #d1af27; border: solid 1px #a7981d;}
			.stav-red {color: #e03c2a; border: solid 1px #e52813;}
	
	#h-info {display: block; margin: 30px auto; padding: 4px 12px; font-weight: 300; max-width: max-content; line-height: 28px; border-radius: 5px;}
		#h-info img {float: left; padding: 4px 10px 0 0;}
			#h-info b {padding: 0 2px;}
			
			.info-green {background: #16783d;}
			.info-orange {background: #ac6c11;}

/************* navigation *************/	

	nav {display: block; margin: 25px auto;}
	nav	ul {display: flex; flex-wrap: wrap; align-content: center; justify-content: center;}
	nav li {display: block; margin: 8px; line-height: 20px; width: 130px; text-align: center;}
	nav li a {display: block; padding: 8px 12px; background: #e0e4e6; color: #556167; font-weight: 600; border-radius: 5px;}
	
	nav li a:hover {background: #cd301f; color: #fff;}
	#nav-active {background: #cd301f; color: #fff;}
	
/************* info bar *************/		

	.i-bar {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		max-width: max-content;
		margin: 15px auto;
		border: solid 1px #c0cacf;
		border-radius: 5px;
	}
		.i-bar div {width: 120px; text-align: right; padding: 0 10px;}
		.i-bar div p {color: #717679;}
		.i-bar div b {color: #5c6265;}
		
	.i-bar-main {width: 30px; margin: 8px; padding: 5px; background: #d5dcdf; border-radius: 5px;}
	.i-bar-action {display: block; width: 20px; margin: 0 10px 0 10px; padding: 10px;}
	.i-bar-cursor {cursor: pointer;} /* pre kliknutie */
	
	#i-mail {display: block; margin: auto; width: max-content;}
	#i-mail a {display: block; padding: 5px 10px; font-weight: 500; color: #5c6265;}
	
/************* show i-hours *************/		

	#i-hours table {width: 257px; margin: 0 auto 25px auto; border-spacing: 0;}
		#i-hours thead {text-align: left; background: #ced5d8; border-radius: 5px;}
		#i-hours thead tr {}
		#i-hours thead th {padding: 12px 8px; color: #424749;}
			#i-hours tbody {text-align: left; background: #eff2f3; color: #556167; border-radius: 5px;}
				#i-hours tbody tr {}
				#i-hours tbody td {padding: 8px 12px;}
	//*#i-hours table {}
	
/************* footer *************/		

	#f-info * {display: block;}
	#f-info {
		max-width: 300px;
		padding: 25px 0;
		margin: auto;
		border-top: solid 1px #c0cacf;
		text-align: center;
	}
		#f-info p {font-size: 13px; color: #5c6265;}
		#f-info-title {margin: 8px 0; font-weight: 500;}
	
@media screen and (max-width: 1366px) {
	.container{max-width: 1366px;}
}

@media screen and (max-width: 1024px) {
	.container{max-width: 1024px;}

}

@media screen and (max-width: 960px) {
	.container{max-width: 960px;}
}

@media screen and (max-width: 768px) {
	.container{max-width: 768px;}
	header {background-size: cover;}
}

@media screen and (max-width: 480px) {
	.container{max-width: 480px;}
	nav ul {flex-direction: column;}
}