/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
/*@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px)  {*/
@media only screen and (max-width: 1023px)  {

	/* Force table to not be like tables anymore */
	.table-responsive table, .table-responsive thead, .table-responsive tbody, .table-responsive th, .table-responsive td, .table-responsive tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.table-responsive thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.table-responsive tr { border: 1px solid #ccc; }

	.table-responsive td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
		padding:5px !important;
	}

	.table-responsive td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		left: 2px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		text-align:left;
		font-weight:bold;
	}

	/* Label the data */
	.carrello .table-responsive tbody td:nth-of-type(3):before { content: "Prezzo"; }
	.carrello .table-responsive tbody td:nth-of-type(5):before { content: "Totale"; }
	.carrello .table-responsive tfoot tr:first-child td:nth-child(2){ display:none; }
	.carrello .table-responsive tfoot tr:first-child td:nth-child(3):before{ content: "Totale imponibile (Trasporto incluso)"; }
	.carrello .table-responsive tfoot tr:nth-child(2) td:last-child:before{ content: "I.V.A."; }
	.carrello .table-responsive tfoot tr:last-child td:last-child:before{ content: "Totale ordine"; }

}