/* RESPONSIVE STYLES
   Loaded after the theme styles. Desktop (1044px and up) is unchanged;
   below that the fixed 1024px grid becomes fluid, the nav compacts,
   and on phones everything stacks into one column. */

/* Fluid layout below the fixed container width */
@media only screen and (max-width: 1043px) {
	body{
		min-width: 0;
	}

	.container_12{
		width: auto;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* match 960.css specificity (.container_12 .grid_N) so these win */
	.container_12 .grid_3{ width: calc(25% - 20px); }
	.container_12 .grid_5{ width: calc(41.666% - 20px); }
	.container_12 .grid_6{ width: calc(50% - 20px); }
	.container_12 .grid_7{ width: calc(58.333% - 20px); }
	.container_12 .grid_12{ width: calc(100% - 20px); }

	.site-description{
		width: auto;
	}

	img, iframe{
		max-width: 100%;
	}

	.employees .large-width{
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	.employee_bio, .tech_bio{
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}
}

/* Compact nav once the logo and menu no longer fit on one line */
@media only screen and (max-width: 900px) {
	.nav-container, .nav-bar{
		height: auto;
	}

	/* the sticky nav script sets position inline; keep the nav in the flow here */
	.nav-bar{
		position: relative !important;
	}

	.logo_big{
		float: none;
		display: block;
		margin: 0 auto;
		padding-top: 12px;
		padding-bottom: 4px;
		max-height: 56px;
	}

	#menu-primary{
		margin: 0;
		padding: 0 0 14px;
		list-style: none;
		text-align: center;
	}

	#menu-primary li{
		display: inline-block;
	}

	.menu-item a, .menu-item a:hover, .current-menu-item a, .current-menu-item a:hover{
		float: none;
		display: inline-block;
		margin: 6px 2px 0;
		padding: 10px 10px;
		font-size: 13px;
		letter-spacing: 1px;
	}
}

/* Phones: single column, smaller type, shorter splash areas */
@media only screen and (max-width: 700px) {
	.container_12 .grid_3, .container_12 .grid_5, .container_12 .grid_6,
	.container_12 .grid_7, .container_12 .grid_12{
		display: block;
		float: none;
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}

	p{
		font-size: 17px;
	}

	.large{
		font-size: 22px;
		margin: 14px 0;
	}

	h2{
		font-size: 26px;
	}

	h1, h1.main, h1.alt{
		font-size: 17px;
		padding: 14px 12px;
	}

	/* Home banner */
	.banner-container{
		height: auto;
		padding-bottom: 28px;
	}

	#home-logo{
		margin-top: 32px;
		max-width: 80%;
	}

	.target{
		font-size: 22px;
		letter-spacing: 1px;
	}

	#home-intro-circle{
		display: none;
	}

	/* Home and Careers splash images */
	.splash-bar, .splash-circle{
		height: 340px;
		background-size: cover;
	}

	.splash-circle{
		background-size: 300px 300px;
	}

	.splash-bar table, .splash-bar tr, .splash-bar td{
		height: 340px !important;
	}

	.splash-bar td.splash-text, .splash-bar td.career-splash-text{
		width: 220px;
	}

	.splash-text{
		font-size: 28px;
	}

	.career-splash-text{
		font-size: 24px;
	}

	.career-content .entry-content{
		padding-top: 40px;
	}

	.career-content{
		margin-bottom: 40px;
	}

	/* About and Technologies grids */
	.tech_container{
		width: calc(100% - 24px);
	}

	.employee_container{
		width: calc(100% - 24px);
	}

	.employee_left, .employee_right, .tech_left, .tech_right{
		display: block;
		width: auto;
	}

	.employee_right p{
		padding-left: 12px;
	}

	.employee_right ul, .tech_right ul{
		padding-left: 12px;
	}

	.tech_biotext ul, .employee_biotext ul{
		padding-left: 20px;
	}

	/* Technologies products */
	.products-inner{
		padding: 0 16px;
	}

	.product-grid{
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.product-card-tall{
		grid-row: auto;
	}

	/* Partnerships */
	.partnership-text, .partnership-quote{
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.partnership-text h3{
		margin-top: 28px;
	}

	/* Contact */
	.location_text{
		display: block;
		padding: 10px 0 0 5px;
		line-height: 1.8;
	}

	.location_text_piece{
		margin-left: 4px;
		margin-right: 4px;
	}

	#map-div, #map-div iframe{
		height: 320px;
	}

	.frontpage-content{
		padding-bottom: 30px;
	}
}