.color_category,
.color_guide-zoom_image,
.color_guide-material,
.color_guide-swatch,
.color_guide_h2 { display: block; }

.color_guide_filter { text-align: center; }

.color_guide_grid {
	width: 100%;
	min-height: 100px;
	position: relative;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;

	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.color_guide_grid:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #AAA;
    position: absolute;
    left: 0;
    bottom: 2.4rem;
}

.color_guide_h2 {
	text-align: center;
	margin-bottom: 2.4rem;
	width: 100%;

	-webkit-box-flex: 1;
	-webkit-flex: 1 1 100%;
	    -ms-flex: 1 1 100%;
	        flex: 1 1 100%;
}

.color_category {
	float: left;
	width: 20%;
	color: #000;
	margin-bottom: 2.4rem;
	padding: 0 1rem 2rem 1rem;
	text-align: center;
	text-decoration: none;
	border-bottom: 1px solid #AAA;
	min-height: 27.5rem;
	
	-webkit-box-flex: 1;
	-webkit-flex: 0 1 auto;
	    -ms-flex: 0 1 auto;
	        flex: 0 1 auto;
}

.color_category:hover,
.color_category:focus {
	color: #007DC4;
}

.color_guide-zoom_image {
	max-width: 100%;
	margin: 0 auto 1rem auto;
}

.color_guide-material,
.color_guide-swatch {
	font-size: 1.4rem;
	margin: 0.3px 0;
}

.color_guide-sub {
	font-size: 1.2rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.8rem;
	display: block;
}

 /* ==========================================================================
 Mobile view (less than 800 pixels)
 ========================================================================== */
 @media all and (max-width: 800px) {
	.color_category { width: 25%; }

 /* ==========================================================================
 Mobile view (less than 620 pixels)
 ========================================================================== */
 @media all and (max-width: 620px) {
 	.color_category { width: 33.3333%; }
 }

 /* ==========================================================================
 Mobile view (less than 520 pixels)
 ========================================================================== */
@media all and (max-width: 520px) {
	.color_category { width: 50%; }
}