/* CSS Document */
.products .productTitle {
	border-bottom: 2px solid #4d4d4d;
}
.products .yesNo {
	color: #9e218a;	
}
.typography h1:before {
	content: '';
	display: block;	
	border: 1px solid #9e218a;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	background: url(../images/spanner-man.png) center no-repeat;
	background-size: 70px auto;
	margin: 0 auto 20px auto;
}
.retina .typography h1:before {
	background-image: url(../images/spanner-man-retina.png);
}

/* Screen size specific stuff */
/* Desktop */
@media all and (min-width: 1000px) {
	
	.contentSection.products .pageWidth {
		max-width: none;
	}
	.typography .products table {
		margin: 0;	
	}
	.products th.productTitle {
		text-align: center;	
		min-width: 180px;
		padding-top: 0;
	}
	.products td,
	.products th {
		border-bottom: 1px solid #9e218a;
		font-weight: normal;
		padding: 16px 0;	
		text-align: left;
	}
	.products .yesNo {
		text-align: center;	
	}
}
/* Tablet, large phone */
@media all and (max-width: 999px) {
	
	.typography h1:before {
		width: 90px;
		height: 90px;
		background-size: 52px auto;
		margin-bottom: 18px;
	}
	
	.products {
		margin-bottom: 36px;	
	}
	
	.products .product:first-child {
		margin-top: -11px;
	}
	.products .product:nth-child(n+2) .features {
		display: none;	
	}
	.products .productTitle {
		padding: 11px 0 9px 0;
		font-size: 17px;
		cursor: pointer;
		position: relative;
	}
	.products .productTitle * {
		font-size: inherit;	
	}
	.products .productTitle:after {
		content: '';
		display: block;
		width: 28px;
		height: 28px;
		border: 1px solid #4d4d4d;
		border-radius: 50%;
		background: url(../images/arrows2.png) center -6px no-repeat;
		background-size: 13px auto;
		
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -14px;	
	}
	.product.active .productTitle:after {
		background-position: center 10px;
	}
	.products .row {
		border-bottom: 1px solid #9e218a;
		padding: 12px 0 12px 21px;	
	}
	.products .row .featureTitle {
		float:left;	
	}
	.products .yesNo {
		float: right;
		text-align: right;	
	}
	.products .row:after {
		content:'';
		display: block;
		clear: both;	
	}
}