/* CSS Document */
.productsMenu {
	background: #e0e0e0;
	text-align: center;
}
.productsMenu .pageWidth {
	margin: 0 auto;
	position: relative;
}

.productsMenu h1 {
	color: inherit;
}

.productsMenu ul {
	font-size: 0;
	text-align: center;
	margin: 0 auto;
	padding-top: 17px;
	padding-bottom: 4px;
}

.productsMenu li {
	vertical-align: top;
	display: inline-block;
	width: 25% !important;
}

.productsMenu a {
	color: inherit;	
	display: block;
}
.productsMenu a:hover {
	font-weight: bold;
	text-decoration: none;
}

.productsMenu a.current {
	color: #9e218a;
	font-weight: bold
}

.productsMenu a:before,
.productsMenu a:after {
	content: "";
	display: block;
	border-radius: 50%;
	border: 1px solid #666666;
	margin: 0 auto;	
}

.productsMenu a:before {
	background: url(../images/spanners.png) center -55px no-repeat;
	background-size: 50px auto;
}
.retina .productsMenu a:before {
	background-image: url(../images/spanners-retina.png);
}
.productsMenu a:after {
	background: url(../images/arrows1.png) center -25px no-repeat;
	background-size: 20px auto;
}
.retina .productsMenu a:after {
	background-image: url(../images/arrows1-retina.png);
}

.productsMenu a.current:before,
.productsMenu a.current:after {
	border-color: #9e218a;
}

/* Screen size specific stuff */
/* Desktop */
@media all and (min-width: 1000px) {
	.productsMenu {
		font-size: 20px;
	}
	.productsMenu .pageWidth {
		padding: 50px 20px 55px 20px;
		/*margin: 0 30px;*/
		margin: 0 auto;
		max-width: 1100px;
	}
	
	.productsMenu h1 {
		font-size: 25px;
	}
	.productsMenu h1:after {
		height: 21px;
	}
	
	.productsMenu ul {
		max-width: 1040px;	
	}
	
	.productsMenu li {
		font-size: 20px;
	}
	
	.productsMenu a:before {
		width: 80px;
		height: 80px;
		margin-bottom: 10px;	
	}
	.productsMenu a:after {
		width: 40px;
		height: 40px;
		margin-top: 25px;		
	}
	
	.productsMenu a.current:before {
		background-position: center 15px;
	}
	.productsMenu a.current:after {
		background-position: center 12px;
	}
}
/* step to fix contetn section width */
@media all and (min-width: 1000px) and (max-width: 1200px) {
	.productsMenu .pageWidth {
		margin: 0 30px;
	}
}
/* Tablet, large phone */
@media all and (max-width: 999px) {
	.productsMenu {
		font-size: 15px;
	}
	.productsMenu .pageWidth {
		padding: 30px 0 32px 0;
		/*margin: 0 20px;*/
		margin: 0 auto;
		max-width: 746px;
	}
	
	.productsMenu h1 {
		font-size: 17px;
	}
	
	.productsMenu ul {
		max-width: 832px;	
		margin-bottom: -34px;
	}
	
	.productsMenu li {
		font-size: 15px;
		margin-bottom: 34px;
	}
	
	.productsMenu a:before {
		width: 58px;
		height: 58px;
		margin-bottom: 7px;	
		background-size: 36px auto;
		background-position: center -40px	
	}
	.productsMenu a:after {
		width: 30px;
		height: 30px;
		margin-top: 18px;	
		background-position: center -30px;	
	}
	
	.productsMenu a.current:before {
		background-position: center 10px;
	}
	.productsMenu a.current:after {
		background-position: center 7px;
	}
}
/* step to fix contetn section width */
@media all and (max-width: 796px) {
	.productsMenu .pageWidth {
		margin: 0 20px;
	}
}
@media all and (max-width: 767px) {
	.productsMenu li {
		width: 50% !important;
	}
}