/*------->>> COLOR PALETTE <<<-------
	#008094 rgb(0,128,148) - Primary Color [Logo Teal Blue]
	#0c232f rgb(12,35,47) - Secondary Color [Dark Slate Blue]
	#173d52 rgb(23,61,82) - Tertiary Color [Medium Slate Blue]
	#62727b rgb(98,114,123) - Support Color [Slate Gray]
	#cee6ea rgb(206,230,234) - Support #2 Color [Light White Blue]
	#0d4751 rgb(13,71,81) - Support #3 Color [Dark Teal]
    #C93C38 rgb(201,60,56) - Support #4 [Orange]
	
/*------->>> FONT STACKS & TYPOGRAPHY <<<-------
	Font Family: 'Montserrat', sans-serif; [Primary Font | Google Fonts | 400 & 700]
	Font Family: 'Montserrat', sans-serif; [Secondary Font | Google Fonts | 400 & 700]
	Font Family: FontAwesome [Icon Font]
		SAMPLE CSS USAGE: fortawesome.github.io/Font-Awesome/cheatsheet/
		.myDiv {
			font-family:"FontAwesome";
			content:"\f111";
		}
		SAMPLE HTML USAGE: fortawesome.github.io/Font-Awesome/examples/
		<span class="fa-stack fa-lg">
			<i class="fa fa-square-o fa-stack-2x"></i>
			<i class="fa fa-twitter fa-stack-1x"></i>
		</span>
		 
/*------->>> FOUNDATION BREAKPOINTS <<<--------
	small: 0px,
	medium: 640px,
	large: 1024px,
	xlarge: 1200px,
	xxlarge: 1440px,
*/
@media all and (orientation:landscape) {
	/*---> Main Content <---*/
	
}
@media all and (min-width:30.000em) and (max-width:39.938em) { /* 480px to 639px */

}


@media all and (min-width:30.000em) { /* 480px and up */
	
}

@media all and (min-width:30.000em) and (max-width:63.938em) { /* 480px to 1023px */
	
}

@media all and (max-width: 39.938em) { /*639px and below | Medium and down */

}

@media all and (min-width:40em) and (max-width:47.938em) { /* 640px to 767px */
	
}

@media all and (max-width:47.938em) { /* 767px and under*/
	
}

@media all and (min-width: 40em) and (max-width:56.250em){ /* 640px to 900px | Medium to Semi-Large */
	
}

@media all and (min-width: 40em) and (max-width:63.938em){ /* 640px to 1023px | Medium to Large */
	
	
	.image-grid {
		grid-gap: 6px;
	}
	
	
	.image-box h5 {
		font-size: 1.0rem;
	}
	
	.index-applications .image-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
	.index-products .image-grid {
		grid-template-rows: repeat(3, 1fr); 
		grid-template-columns: repeat(4, 1fr); 
	}
	.index-services .image-grid {
		grid-template-columns: 1fr 1fr;	
	}
	.index-why > div {
		grid-template-columns: auto auto;
	} 
}

@media all and (min-width: 40em) { /* 640px and up | Medium and up */
	.index-applications > p, 
	.index-products > p,
	.index-services > p, 
	.index-showrooms > p, 
	.index-why > p  {
		display: block;
	}
}

@media all and (min-width:48em) { /* 768px and up */
	
	

	
}

@media all and (min-width: 48em) and (max-width:63.938em) { /* 768px to 1023px */
	
}
 
@media all and (min-width:75em) { /* 1024px to 1199px | Large to Xlarge */
	/*.page-width {
		width: 85%; 
	}*/
}

@media all and (min-width: 64em) { /* 1024px and up | Large and up */
	
	.masthead {
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
	} 
	
	.page-width {
		/*width: 95%; */
		width: 95%; 
		max-width: 1920px; 
		margin: 0 auto;  
	}
	.colophon__hours {
		margin: 0;
	}
	
	.image-grid {
		grid-gap: 8px;
	}
	.image-box h5 {
		padding: 0 17px 0 17px;
		transition: all 300ms ease-in-out;
	}
	.image-box h5::after {
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		right: 25px;
		width: 25px;
		/*font-weight: bold;*/ 
		content: '⟶';
		opacity: 0.0;
		text-align: right;
		transition: all 300ms ease-in-out;

	} 
	.image-box:hover img {
		transform: scale(1.1);
		filter: brightness(1.05);
	}
	.image-box:hover h5 {
		padding-left: 0px;
		padding-right: 34px;
	}
	.image-box:hover h5::after {
		opacity: 1.0;
		right: 0px;
	} 
	
	
	.index-applications .image-grid {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(1, 1fr);
	}
	.index-products .image-grid {
		grid-template-rows: repeat(3, 1fr); 
		grid-template-columns: repeat(4, 1fr); 
	}
	.index-services .image-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.index-why > div {
		grid-template-columns: repeat(4, auto);
	}
	
	
	
	
}

@media all and (min-width:64.063em) { /* 1025px and up */
	
}

@media all and (min-width:68.750em) { /* 1100px and up */
	
}

@media all and (min-width:75em) { /* 1200px and up | Xlarge and up*/
	/*.page-width {
		width: 95%; 
	}*/
}

@media all and (min-width:81.250em) { /* 1300px and up */
	
}

@media all and (min-width:87.50em) { /* 1400px and up */
	/*.page-width {
		width: 85%; 
	}*/
}

@media all and (min-width:112.500em) { /* 1800px and up */
	/*.page-width {
		width: 65%; 
	}*/
}

@media all and (max-height: 29.938em) {
	
}

@media all and (max-height: 43.688em) {
	
}