table.bondTable tr th {

	background-color: #efefef;
	display: block;
	padding: 5px 10px;

}

@media(min-width:769px) {

	.bondTable {

		width: 700px;
		margin: 15px auto;
		border: 1px solid #dddddd;
		display: table;

	}

	table.bondTable tr {

		display: table-row;

	}

	table.bondTable tr th,
	table.bondTable tr td {

		display: table-cell;
		padding: 5px 10px;
		border-top: 1px solid #dddddd;
		border-left: 1px solid #dddddd;
		text-align: center;
		vertical-align: middle;

	}

	table.bondTable thead tr th,
	table.bondTable thead tr td {

		border-top: none;
		vertical-align: middle;
		background-color: #e3e3e3;

	}

	table.bondTable tr th {

		border-left: none;
		word-break: keep-all;
		width: 20%;

	}


}

@media(max-width:768px) {

	.bondTable {

		width: 100%;
		margin: 0.5em auto;

	}

	table.bondTable tr {

		margin-bottom: 10px;
		display: flex;
		flex-wrap: wrap;

	}

	table.bondTable tr th {

		width: 100%;
		display: block;
		text-align: left;

	}

	table.bondTable tr td {

		padding-left: 50%;
		position: relative;
		display: block;

	}

	table.bondTable tr td:after {

		content: attr(data-label);
		display: block;
		position: absolute;
		top: 0px;
		left: 15px;

	}

	table.bondTable thead {

		display: none;

	}


}