/*table*/

.tresci table	{	position: relative;
			width: 100%;
			height: auto;
			float: left;
			margin-top: 2%;
			background: none;
			border: none;
			
			}
			
			
.tresci table tr {	width: 100%;
			height: auto;
			float: left; 
			
			}	
			
.tresci table tr td	{	position: relative;
				float: left;
				padding: 2%;
				margin: 1px;
				width: calc((80% - 10px) / 5);
				height: 12vh !important;
				background-color: #0c3e53;
				color: white;
				text-align: left;
				font-weight: 500;
				font-size: 0.8rem;	
				font-family: 'lato';
				line-height: 110%;
				
				}		

.tresci table tr td:hover	{	background: white;
									color: #0c3e53;
						}	

			

.tresci table th	{	position: relative;
				float: left;
				padding: 10% 2% 2% 2%;
				margin: 1px;
				width: calc((80% - 10px) / 5);
				background-color: #c43d3d;
				background-image: url(gfx/logo2.png);
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center top;
				background-position: center;
				background-repeat: no-repeat;
				text-align: center;
				font-weight: 100;
				text-transform: uppercase;
				color: 	white;
				font-size: 2rem;	
				font-family: 'Amatic sc';
				font-weight: bold;
				letter-spacing: 2px;}	

.tresci table th:hover	{	background-color: #fafafa;
					color: #E31E24;	}	
					

.grupa	{	position: relative;
			float: left;
			width: calc(68% / 4);
			height: 15%;
			margin: 1% 2%;
			padding: 15% 2% 2% 2%;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: top center;
			text-align: center;
			font-family: sanchez;
			line-height: 550%;
			font-weight: thin;
			text-transform: uppercase;
			opacity: 1;
   transition: all .50s ease-in-out;
   -moz-transition: all .50s ease-in-out;
   -webkit-transition: all .50s ease-in-out;		}		

.grupa:hover	{	opacity: 0.5;
transition: all .50s ease-in-out;
   -moz-transition: all .50s ease-in-out;
   -webkit-transition: all .50s ease-in-out;
background-size: 50%;
background-position: center; }			
					
					
.grupa1	{	position: relative;
			clear: both;
			width: 20%;
			height: 25vh;
			margin: 0 auto;
			padding: 0;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: top center;
			text-align: center;
					}					
				
										
			

@media all and (max-width: 1000px) and (min-width: 120px) {		

.agenda table th	{	width: calc((92% - 20px) / 2);
						font-size: 1.1rem;	
						letter-spacing: 0px;
						text-shadow: 1px 1px 1px black; }

.tresci table 	{	width: 95%;
					font-size: 0.8 rem;
					padding: 0;
					margin: 2.5%;	}
						
.tresci table, thead, tbody, th, td, tr { 
		display: block; 
	}						
		

.tresci table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
.tresci table	tr { border: none;
					 }
	
.tresci table tr td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 40%; 
		padding-top: 5%;
		width: 60%;
	}
	
.tresci table	tr td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 2%;
		left: 2%;
		width: 30%;
		height: 100%;	
		padding-right: 10px; 
		padding-top: 5%;
		white-space: nowrap;
		border-right: 1px dotted white;
		
	}
	
.tresci table tr td:first-of-type	{ background-color: #3d5a70; }	
	
	/*
	Label the data
	*/
	

.tresci table tr td:nth-of-type(1):before { 	content: "Data";	}
.tresci table tr td:nth-of-type(2):before { content: "Śniadanie"; }
.tresci table	tr td:nth-of-type(3):before { content: "Obiad"; }
.tresci table	tr td:nth-of-type(4):before { content: "Podwieczorek"; }
.tresci table	tr td:nth-of-type(5):before { content: "Alergeny"; }


.grupa	{	width: calc(84% / 2);
			height: 20%;
			padding: 30% 2% 2% 2%;		}	
	
}
		 
}