.compare-table {
	table-layout: fixed;

	width: 100%;

	th {
		vertical-align: bottom;
	}

	td {
		border-bottom: 1px solid map-get($grey, 200);
		padding: 16px 30px;
	}

	tr {
		td {
			&:last-child {
				border-right: 0;
			}
		}

		&:last-child {
			td {
				border-bottom: 0 !important;
			}
		}

		th:last-child {
			.compare-table-title {
				border-right: 0;
			}
		}
	}
}

.compare-table-col {
	background-color: #fff;
	border-right: 1px solid map-get($grey, 200);
	color: map-get($grey, 700); 
	text-align: center;

	&.first {
		border-left: 1px solid red;
	}

	.yes {
		color: map-get($green, 400);
	}

	.no {
		color: map-get($red, 400);
	}
}

.compare-table-image {
	a {
		display: block;
		position: relative;
	}

	img {
		height: auto;
		width: 100%;
	}
}

.compare-table-title {
	background-color: map-get($color-primary, 400);
	border-right: 1px solid rgba(white, .2);
	padding: 16px 30px;
	position: relative;	

	h2, h3 {
		line-height: 1;
		margin: 0;
		padding: 0;
	}

	h2 {
		color: #fff;
		font-size: 18px;
		font-weight: normal;
		transition: color .15s linear;		
		
		a {
			color: #fff;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			transition: color .15s linear;
			white-space: nowrap;
		}
	}

	h3 {
		color: map-get($color-primary, 50);
		font-size: 15px;
		font-weight: normal;
		overflow: hidden;
		margin-top: 10px;
		transition: color .15s linear;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.compare-table-label {
	background-color: map-get($grey, 100);
	color: map-get($grey, 700);
	font-weight: 600; 
	min-width: 231px;
	padding-left: 0;
}