.table_section{
    justify-content: center;
    align-items: center;
    background: rgb(0,69,119);
    background: linear-gradient(331deg, rgb(191, 118, 80) 0%, rgb(255, 218, 161) 51%, rgb(219, 184, 130) 100%);
    padding: 30px;
    color: white;
    position: relative;
    z-index: -99;
}

.print{
	font-size: 0.9em;
	color: black;
}

.digital{
	font-size: 0.9em;
	color: black;
}

.digitalwhite{
	font-size: 0.9em;
}

.column{
	font-size: 0.9em;
	background: #bf7650;;
}


.table_section div h1{
    text-align: center;
}

.table_section h1{
    margin: 0;
    padding-bottom: 15px;
}

.table_section h2{
    text-align: center;
	font-size: 1em;
}

.table_section p{
    position: relative;
    z-index: 2;
    margin: 0;
    font-weight: 300;
    color: #002038;
    padding: 30px;
	font-size: 0.8em;
}

.table_section p p{
    font-weight: 600;

}

.table_section p:before{
    content: "";
    background-color: white;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: -15;
    border-radius: 20px;
   box-shadow:  10px 10px 27px -21px rgba(0,0,0,0.55);

}

table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: transparent; 
}
th { 
  background: #transparent; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ffffff; 
  text-align: left; 
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ffffff; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ffffff; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	


	
	.digital:nth-of-type(1) { color: white; background: #bf7650;}
	.digital:nth-of-type(2) { color: black; }
	.digital:nth-of-type(3) { color: black;}
	.digital:nth-of-type(4) { color: black; }
	.digital:nth-of-type(5) { color: black; }
	.digital:nth-of-type(6) { color: white; }
	.digital:nth-of-type(7) { color: white; }
	

	.digital:nth-of-type(1):before {color:white; content: "Wymiar"; }
	.digital:nth-of-type(2):before { content: "1 osoba"; }
	.digital:nth-of-type(3):before { content: "2 osoby"; }
	.digital:nth-of-type(4):before { content: "3 osoby"; }
	.digital:nth-of-type(5):before { content: "4 osoby"; }
	.digital:nth-of-type(6):before { color: white; content: "Pupil lub osoba"; }
	
	.print:nth-of-type(1):before { content: "<= 30x40 cm"; }
	.print:nth-of-type(2):before {color: white; content: "Większe formaty"; }
	
	.print:nth-of-type(1){color:black; }
	.print:nth-of-type(2){color:white;}
	.print:nth-of-type(3){color:black;}
}