body {
	background-color: #111;
	background-image: url('img/background.webp');
	background-position: center top;
	background-repeat: no-repeat;
	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; width: 100%;}
main 	{float: left; width: 100%;}
footer 	{float: left; width: 100%;}

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

.container {margin: auto; max-width: 1366px;}
	
/*** header - logo, telefón, otváracie hodiny ***/
	
	#logo * {display: block;}
		#logo {margin: 50px auto 0 auto; max-width: max-content; text-align: center;}
			#logo p {line-height: 20px; text-transform: none; font-stretch: condensed; font-weight: 300; color: #fffffff0;}
			
			#logo h1 {text-transform: uppercase;}
			#logo h1 p {font-stretch: normal; font-weight: 400; color: #fff; text-align: left;}

	#info {display: flex; flex-direction: column; max-width: max-content; margin: auto;}
	
	#openinfo {
		max-width: max-content;
		margin: 35px auto;
		padding: 10px 15px;
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
		color: #19bd57;
		border: solid 1px;
		border-radius: 5px;
		}
	
	.info_btn * {display: inline-block; line-height: 35px;}
	.info_btn {display: block; margin-bottom: 10px; padding: 5px; text-align: center; border: solid 1px #414141; border-radius: 20px;}
		
		.info_btn a {float: left; min-width: 100px; border-radius: 20px;}
			.info_btn a i {float: left; display: inline-block; line-height: 35px; font-size: 15px; padding: 0 10px;}
				.info_btn a p {margin: 0; padding: 0 15px 0 0; font-weight: 400;}
	
		.info_btn p {margin: 0 15px;}
		
			.info_grey  {background: #3f3f3f;} .info_grey:hover {background: #2f2f2f;}
			.info_green {background: #117c39;} .info_green:hover {background: #1e452c;}
			.info_red {background: #b11a2a;} .info_red:hover {background: #5b1825;}

	
		#openhours table {max-width: max-content; margin: 25px auto; border-spacing: 0;}
			#openhours th {background: #414141; color: #fff; padding: 10px 15px;}
			#openhours td {border: 1px solid #414141; padding: 10px 15px; text-align: left;}
		.openhours_closed {color: #ff4747;}
		
/*** main - denné menu ***/
	
	#menu {max-width: max-content; margin: 25px auto;}
		#menu h2 {display: block; padding: 25px 15px 5px 15px; text-align: center;}
		#menu h2 p {display: block; margin-top: 3px; font-stretch: condensed; font-weight: 300; color: #fffffff0;}
			#menu a {display: block; width: max-content; text-decoration: underline; padding: 5px 15px; margin: 0 auto 25px auto;;}
			#menu a:hover {color: #19bd57;}
			
	.menuNieje {display: none; max-width: max-content; margin: 0 auto 25px auto; color: #ffbe47; text-align: center;}
	
	.tabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: center; 
		margin: 0 auto 25px auto;
	}
		.tab_btn {
			font-size: 13px;
			display: block;
			min-width: 63px;
			padding: 10px 0;
			margin: 3px;
			cursor: pointer;
			background: #414141;
			color: #fff;
			border: 0;
			border-radius: 5px;
		} .tab_btn:hover {background: #117c39;}

		.tab_div {display: none; max-width: max-content; margin: 15px auto 0 auto; border: solid 3px #414141;}
			.tab_div h3 {display: block; margin: 25px 0; text-align: center;}
			.tab_div div {margin: 15px;}
			
		#soups {border-top: solid 1px #414141; padding-top: 15px;}
		#soups table {min-width: 330px; border-spacing: 0px 5px;}
		
		#meals {border-top: solid 1px #414141; padding-top: 15px;}
		#meals table {min-width: 330px; border-spacing: 0px 5px;}
			
			#menu th, td {text-align: left; padding: 8px 8px 2px 2px;}
			#menu td {color: #aaa;}
			
				.jedlo {min-width: 400px;}
	
/*** footer - copyright, reklama, informácie o prevádzke ***/
		
	#copyright {margin: 25px auto 50px auto; max-width: max-content; color: #999;}



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

@media screen and (max-width: 1024px) {
	.container{max-width: 1024px;}
	
		/* reset farieb pre hover na default */
		.info_grey:hover {background: #3f3f3f;}
		.info_green:hover {background: #117c39;}
		.info_red:hover {background: #b11a2a;}
}

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

@media screen and (max-width: 768px) {
	.container{max-width: 768px;}
	* {font-size: 13px;}
	p {font-size: 13px;}
	
		/* v tabuľke nastaví na jedlo určitý rozmer aby sa prelomil riadok */
		.jedlo {max-width: 135px;}
		#menu td {min-width: 45px;}
}

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