/* responsive table */
/* seo friendly tables */
.table {
	display: table;
/* Defines a Table */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	border-bottom: 2px solid #dddddd;
	color: #661f6c;
	margin: 10px 10px;
	width: 98%;
}

.table-head {
	display: table-header-group;
/* Defines a table header group */
}

.table-head .column {
/* Column inside the table-head */
	background: #585858;
	color: #ffffff;
	border-right: 1px solid #eee;
	border-bottom: none;
}


.column a:visited,.column a:link,.column a:hover {
	color: #661f6c;
	text-decoration: none;
}

.table-head .column a:visited,.table-head .column a:link,.table-head .column a:hover {
	color: white;
	text-decoration: none;
}

.table-head .column:hover {
/* Column hover inside the table-head */
	background: #661f6c;
}

.row {
	display: table-row;
		background-color: #e4dfec;
/* Defines a table row */
}

.row .column:nth-child(1) {
/* First column in a row */
	border-left: 1px solid #eeeeee;
}

.row:last-child .column {
/* column in a last row */
	border-bottom: none;
}

.column {
	display: table-cell;
/* Defines a table cell */
	padding: 10px 20px;
	border-bottom: 1px solid #eeeeee;
	border-right: 1px solid #eeeeee;
}

.column:hover {
	background: #f9f9f9;
}	

@media screen and (max-width: 680px){
	.table,
																						.row,
																						.column,
																						.column:before {
		display: block;
	/* Converts a table, table row, table column and table column:before into a block element */
	}
	
	.table,
																						.row .column:last-child {
		border-bottom: none;
	}
	
	.table-head {
		position: absolute; 
		
	/* Hides table head but not using display none */
		top: -1000em;
		left: -1000em;
	}
	
	.row {
		border: 1px solid #eeeeee;
		border-top: 2px solid #dddddd;
		border-bottom: 2px solid #dddddd;
	background-color: #e4dfec;
		margin: 20px 0;
	}
	
	.row .column:nth-child(1) {
	/* first column of the row */
		border-left: none;
		background-color: #585858;
		color: #fff;
	}
	
	
	.row .column:nth-child(1) a {
		
		color: #fff;
	}
	
	.row .column:last-child {
	/* last column of the row */
		border-right: none;
		
	}
	
	.row:last-child .column,
																						.column {
	/* Column in the last row and column */
		border-bottom: 1px solid #eeeeee;
	}
	
	.column:before {
	/* prints the value of data-label attribute before the column data */
		font-weight: bold;
		padding-right: 20px;
		font-size: 12px;
		content: " "attr(data-label)" ";
	/* call the attribute value of data-label and adds a string // */
	}
}