@media only screen and (max-width: 770px){ /* tablet resolution */
	.tabelResp ,.tabelResp thead , .tabelResp tbody , .tabelResp th , .tabelResp td , .tabelResp tr{
		display: block;
	}
	.tabelResp thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.tabelResp td{
		-webkit-box-shadow: 0 0 0 0 #cdcdcd;
		box-shadow: 0 0 0 0 #cdcdcd;
		margin-bottom: 1px;
		font-size: 1.3em;
	}
	.tabelResp tr td:last-child{
		-webkit-box-shadow: 0 1px 0 0 #CD0808;
		box-shadow: 0 1px 0 0 #CD0808;
		margin-bottom: 1px;
		font-size: 1.3em;
	}
	.tabelResp td  { 
	    padding-top: 1em !important;
	     padding-bottom: 1em !important;
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative !important;
		padding-left: 50.2% !important; 
	}
	.tabelResp td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 50%;
    	left:0;
		width: 50%; 
	    height: 100%;
	    justify-content: center;
	    display: flex;
	    align-items: center;
	    background-color: #f8f4f4;
		white-space: nowrap;
		transform: translate(0,-50%);
	    -ms-transform: translate(0 ,-50%);
	    -webkit-transform: translate(0 ,-50%);
	    -moz-transform: translate(-0 ,-50%);
	    -o-transform: translate(0 ,-50%);
	    background-color: #f8f4f4;
	}
	.tabelResp tbody tr:hover, .tabelResp tbody tr:hover td, .tabelResp tbody tr td:hover{
		    color: initial !important;
    background-color: initial !important;
	}
	.tabelResp td:before{
		content: attr(title);
	}
	.tabelResp td{
		text-align: center;
	}
	.tabelResp th{
		background-color: #f8f4f4;
	}
}