/*-----------------------------------------------------------------------------------*/
/*	Responsive Grid (foundation)
/*-----------------------------------------------------------------------------------*/

.row .column, .row .columns{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.container { margin: 0px auto; padding: 0px 15px; max-width: 1008px; }

.row { width: 1045px; max-width: 100%; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; }

.column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; margin-bottom: 30px; }
.column.wrapper, .columns.wrapper{ padding: 0px; }

.row .one { width: 8.333%; }
.row .two { width: 16.667%; }
.row .three { width: 25%; }
.row .four { width: 33.333%; }
.row .five { width: 41.667%; }
.row .six { width: 50%; }
.row .seven { width: 58.333%; }
.row .eight { width: 66.667%; }
.row .nine { width: 75%; }
.row .ten { width: 83.333%; }
.row .eleven { width: 91.667%; }
.row .twelve { width: 100%; }

.row .nopadding { padding: 0px; }
.row .smallpadding { padding: 0 6px; }
.row .paddingleft { padding: 0 0 0 12px; }
.row .paddingright { padding: 0 12px 0 0; }


img{ max-width: 100%; height: auto; }
img { -ms-interpolation-mode: bicubic; }
object, embed { max-width: 100%; }

/*-----------------------------------------------------------------------------------*/
/*	Responsive Grid For Mobile
/*-----------------------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
	body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none;
		width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

	.container{ margin: 0px auto; max-width: 420px; }

	.row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }

	.row .column, .row .columns { width: 100%; float: none; }

	.column:last-child, .columns:last-child { float: none; }
	[class*="column"] + [class*="column"]:last-child { float: none; }

	.column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
	.column:after, .columns:after { clear: both; }

}

/*-----------------------------------------------------------------------------------*/
/*	Media Queries
/*-----------------------------------------------------------------------------------*/

	@media only screen and (max-width: 1044px) {
		.slicknav_menu { display: none; }
		.desktop-hide { display: none; }

	}

	@media only screen and (min-width: 980px) {
		.slicknav_menu { display: none; }
		.desktop-hide { display: none; }

	}

	/* Smaller than standard 960 (devices and browsers) (ALL) */
	@media only screen and (max-width: 979px) {
		header .header-wrapper { width: 96%; height: auto; margin: 0px 2%; }
		footer .footer-wrapper { width: 96%; height: auto; margin: 0px 2%; }
		footer .bottom-wrapper { width: 96%; height: auto; margin: 0px 2%; }
		nav.primary ul li { font-size: 14px; }
		nav.secondary ul { min-width: 48%!important; }
		.image-wrapper { width: 96%; height: auto; margin: 0px 2%; }
		.page-wrapper { width: 96%; height: auto; margin: 0px 2%; }
		.flexCaption-wrapper { width: 96%; height: 306px; margin: 0px 2%; }
		.slideBottom-wrapper { width: 96%; height: auto; margin: 0px 2%; }
		.slicknav_menu { display: block; }
		.tablet-hide { display: none!important; }

		.lightGrey p { margin-right: 18px; }

		/* Metro Grid */
		.metroGrid { width: 100%; position: relative; height: 618px; }
		.metroGrid .item1 { position: relative!important; width: 96%; height: auto; padding: 2%; margin: 0px 0px 0px 0px; margin-bottom: 2%; top: 0px; background: #F0F0F0; font-size: 14px; }
		.metroGrid .item3 { position: relative!important; width: 96%; height: auto; padding: 2%; margin: 15px 0px 0px 0px; margin-bottom: 2%; top: 0px; background: #03426A; color: #fff; }
		.metroGrid .item5 { position: relative!important; width: 96%; height: 36px; padding: 2%; margin: 15px 0px 0px 0px; margin-bottom: 2%; top: 0px; left: 0px; }
		.metroGrid .item5 img { padding-top: 1%; padding-right: 2%; }
		.metroGrid .item6 { position: relative!important; width: 96%; height: auto; margin: 15px 0px 0px 0px; margin-bottom: 2%; top: 0px; left: 0px; padding: 2%; background: #0A67A3; }
		.metroGrid .item6 h1 { font-size: 25px; color: #fff; }
		
		.material-information .three { width: 33.333333%!important; font-size: 16px; }
		.the-process .three { width: 50%!important; }

	}

	@media only screen and (min-width: 768px) {
		nav.primary { display: block; }
		.slicknav_menu { display: none; }

	}

	/* Tablet Portrait size to standard 960 (devices and browsers) (4)*/
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		nav.primary ul { margin-left: 10px; margin-right: 0px; }
		nav.primary ul li { margin-right: 3px; font-size: 12px; }
		nav.secondary ul { min-width: 50%!important; }
		.blueBox { font-size: 11px; margin-top: 20px; }
		.contact-wrapper { margin-right: 0; }
		.contact { font-size: 12px; padding-top: 2px; }
		.orangeTop { margin-left: 46%; }
		.sidebarSocial { font-size: 20px!important; height: 28px; }
		.sidebarSocial img { padding-right: 4px; }

	}

	/* All Mobile Sizes( (devices and browser)(1,2,3) */

	@media only screen and (max-width: 767px) {
		.mobile { display: block; width: 100%; height: auto; margin: -15px 0 15px; left: 0px; top: 0px; }
		.social-wrapper { float: left; }
		.contact-wrapper { margin-right: 0%!important; }
		.mobileLogo { max-width: 100%; display: block; text-align: center; float: none; }
		.mobile-hide { display: none!important; }
		.tablet-hide { display: none!important; }

		.blueBox-wrapper { width: 100%; height: auto; margin: 0; }
		.blueBox { width: 30%; margin: 0px; font-size: 11px; }
		.dark { margin-right: 1%!important; margin-bottom: 2%; }
		.light { margin-right: 1%!important; margin-bottom: 2%; }
		.grey { margin-right: 1%!important; }
		.electric { margin-right: 1%!important; margin-bottom: 2%!important; }
		.electricLast { margin-right: 0%!important; }
		.col-left { width: 100%!important; display: block; float: left; }
		.col-right { width: 100%!important; display: block; float: left; }
		.contactAddress { text-align: center; }
		.featured { width: 100%; margin: auto; text-align: center; margin-bottom: 12px; }
		.attachment-thumbnail { height: auto; }

		.lightGrey { width: auto; }

		/* Metro Grid */
		.metroGrid { width: 100%; position: relative; height: 528px; }
		.metroGrid .item1 { position: relative!important; width: 96%; height: auto; padding: 2%; margin: 0 0 2%; margin-bottom: 2%; top: 0px; background: #F0F0F0; font-size: 14px; }
		.metroGrid .item3 { position: relative!important; display: block; float: left; width: 44%; height: 195px; padding: 2%; margin: 15px 2% 2% 0%; margin-bottom: 2%; top: 0px; background: #03426A; color: #fff; }
		.metroGrid .item3 blockquote { font-size: 15px!important; }
		.metroGrid .item6 { position: relative!important; display: block; float: right; width: 44%; height: 195px; margin: 15px 0% 2% 0%; margin-bottom: 2%; top: 0px; left: 0px; padding: 2%; background: #0A67A3; }
		.metroGrid .item6 h1 { font-size: 25px; color: #fff; }
		.metroGrid .item6 ul li { font-size: 14px; }
		.metroGrid .item9 { position: relative!important; display: block; float: left; width: 100%; height: 100px; top: 0px; left: 0px; background: url(../../assets/images/metroGrid4mobile.jpg) no-repeat; }
		
		.material-information .three { width: 100%!important; font-size: 16px; }
		.the-process .three { width: 100%!important; }

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) (3) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.Green { margin-right: 20px!important; }
		.social-wrapper { padding-top: 2%!important; }
		.contact-wrapper { padding-top: 2%!important; }

	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) (1, 2) */
	@media only screen and (max-width: 479px) {
		.social-wrapper { padding-top: 3%!important; }
		.contact-wrapper { padding-top: 3%!important; }
		.lightGrey { padding: 0%; background: #fff!important; }
		.Green { width: 98%; margin: 20px 0px!important; }
		.Orange { width: 98%; }
		.metroGrid .item3 blockquote { font-size: 13px!important; }
		.metroGrid .item6 h1 { font-size: 22px; color: #fff; }
		.metroGrid .item6 ul li { padding: 0px; font-size: 10px!important; color: #fff; }
		footer .link { float: none; }

	}

	/* Mobile Portrait Size to Mobile Landscape Size SMALL phone (devices and browsers) (1) */
	@media only screen and (min-width: 240px) and (max-width: 320px) {
		.blueBox { font-size: 10px; }
		.social-wrapper { padding-top: 3%!important; }
		.contact-wrapper { padding-top: 3%!important; }

	}