/* ===================================================================
   ImageCat — static recreation stylesheet
   Recreates the look of imagecatinc.com using plain HTML/CSS/JS.
=================================================================== */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

* { box-sizing: border-box; }

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li,
form, label, table, tr, td, th, blockquote, cite, hr {
	margin: 0; padding: 0; border: 0; vertical-align: baseline;
}

body {
	font: 14px/21px "Open Sans", Arial, sans-serif;
	background-color: #eeeeee;
	color: #666;
}

ul, ol { list-style: none; }

a {
	font-weight: bold;
	color: #0087c0;
	text-decoration: none;
	border-bottom: 1px dotted #bbb;
	transition: all .15s linear;
}
a:hover { color: #222; border-bottom: 1px dotted #888; }

img { max-width: 100%; display: block; }
a img { border: 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: "Open Sans", Arial, sans-serif;
	color: #202222;
	font-weight: 700;
}

.inner {
	width: 960px;
	max-width: 94%;
	margin: 0 auto;
}

.clearfix::after { content: ""; display: block; clear: both; }
.clear { clear: both; display: block; height: 0; }

/* -------------------------------------------------------------
   Header
-------------------------------------------------------------- */

#header {
	background-color: #eeeeee;
}

#header .inner {
	width: 920px;
	display: flex;
	align-items: stretch;
	padding: 0;
}

#logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 18px 0;
}
#logo a { border-bottom: 0; display: block; }
#logo img { width: 211px; height: auto; display: block; }

#tagline {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	margin-left: 20px;
	padding: 0 20px;
	border-left: 2px solid #fff;
	font-size: 13.5px;
	color: #555;
	line-height: 19px;
}

#usphone {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding-left: 20px;
	border-left: 2px solid #fff;
	font-size: 18px;
	color: #999;
	white-space: nowrap;
}
#usphone img { display: inline-block; width: 22px; margin: 0 4px 0 0; }
#usphone a { color: #999; border: 0; font-weight: normal; }

/* -------------------------------------------------------------
   Navigation
-------------------------------------------------------------- */

#primary-nav-wrap {
	background: #242626;
}

#primary-nav ul {
	display: flex;
	flex-wrap: wrap;
}

#primary-nav > ul > li {
	position: relative;
}

#primary-nav > ul > li > a {
	display: block;
	padding: 0 18px;
	height: 44px;
	line-height: 44px;
	font-size: 15px;
	font-weight: 400;
	color: #bbb;
	border: 0;
	white-space: nowrap;
}

#primary-nav > ul > li > a:hover {
	background: #f6ae00;
	color: #333;
}

#primary-nav > ul > li.active > a,
#primary-nav > ul > li.has-dropdown.active > a {
	background: #0087c0;
	color: #fff;
}

#primary-nav .sub-menu {
	display: none;
	position: absolute;
	left: 0;
	top: 44px;
	width: 200px;
	background: #202222;
	z-index: 50;
	padding: 4px 0;
}

#primary-nav li.has-dropdown:hover .sub-menu {
	display: block;
}

#primary-nav .sub-menu li a {
	display: block;
	padding: 10px 16px;
	color: #ccc;
	font-weight: 400;
	font-size: 14px;
	border: 0;
	border-bottom: 1px solid #333;
}
#primary-nav .sub-menu li:last-child a { border-bottom: 0; }
#primary-nav .sub-menu li a:hover { background: #111; color: #fc0; }

#nav-toggle {
	display: none;
}

/* -------------------------------------------------------------
   Hero / feature slider
-------------------------------------------------------------- */

#feature-wrapper {
	position: relative;
	overflow: hidden;
	height: 420px;
	max-width: 1040px;
	margin: 0 auto;
	background: #202222;
}

.feature {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease;
}
.feature.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.feature img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feature-content {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 55%, rgba(0,0,0,0) 100%);
}

.feature-inner {
	width: 1000px;
	max-width: 94%;
	margin: 0 auto;
	height: 100%;
	position: relative;
}

.featureheadline {
	position: absolute;
	bottom: 70px;
	left: 0;
	max-width: 600px;
	font-size: 36px;
	font-weight: 700;
	color: #fff;
	line-height: 1.05;
	letter-spacing: -0.5px;
}
.featureheadline span { color: #ffcc00; }

.featuretext {
	position: absolute;
	bottom: 60px;
	right: 0;
	width: 330px;
	color: #eee;
	font-size: 14.5px;
	line-height: 1.5;
}

.FOM {
	position: absolute;
	bottom: 20px;
	left: 0;
	background: #252525;
	color: #fff !important;
	font-weight: 700;
	font-size: 14px;
	padding: 9px 18px;
	border: 0;
}
.FOM:hover { background: #fff; color: #202222 !important; }

.feature-navigation {
	position: absolute;
	left: 0;
	top: 42%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	z-index: 10;
	pointer-events: none;
}
.feature-navigation a {
	pointer-events: all;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: rgba(0,0,0,.45);
	color: #fff !important;
	font-weight: 700;
	border: 0;
	font-size: 16px;
}
.feature-navigation a:hover { background: #f6ae00; color: #202222 !important; }

/* -------------------------------------------------------------
   Inner-page banner (between nav and content, all pages but home)
-------------------------------------------------------------- */

.page-hero {
	width: 1001px;
	max-width: 100%;
	height: 187px;
	overflow: hidden;
	margin: 0 auto;
	background: #eee;
}
.page-hero img {
	width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------------------------
   Content layout
-------------------------------------------------------------- */

#content {
	padding: 35px 0 50px 0;
}

#content .inner {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

#primary {
	flex: 0 1 635px;
	min-width: 0;
	background: transparent;
	padding: 0;
}

#sidebar {
	flex: 0 0 285px;
	background: #fff;
	padding: 20px 28px 26px 28px;
}

/* inline page heading (replaces the old title-bar banner) */
.page-heading {
	color: #0087c0;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 16px 0;
}

/* sidebar sub-section menu (About / Management Team / Careers, etc.) */
.sidebar-menu { margin-bottom: 30px; }
.sidebar-menu li { margin-bottom: 2px; }
.sidebar-menu li a {
	display: block;
	background: #666;
	color: #ddd;
	font-weight: 400;
	font-size: 16px;
	padding: 5px 9px;
	border: 0;
}
.sidebar-menu li a:hover { background: #444; color: #fff; }
.sidebar-menu li a.active { color: #ffcc00; }

/* home intro lead paragraph */
.homeintro { font-size: 20px; line-height: 1.5; color: #333; margin-bottom: 10px; }

.home-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0 40px;
}
.home-col { flex: 1 1 45%; min-width: 280px; }

.homecontenttitle {
	font-size: 18px;
	padding: 0 0 6px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.largep { font-size: 15px; line-height: 1.6; margin-bottom: 14px; overflow: hidden; }
.largep img.circleicon { float: left; margin: 2px 12px 6px 0; }

#primary p { margin-bottom: 16px; line-height: 1.65; }
#primary h1 { font-size: 24px; margin-bottom: 16px; }
#primary h2 { font-size: 21px; margin: 22px 0 10px 0; color: #444; clear: both; }
#primary h3 { font-size: 17px; margin: 18px 0 8px 0; color: #444; }
#primary ul { list-style: disc; margin: 0 0 16px 24px; }
#primary ul li { margin-bottom: 6px; line-height: 1.55; }

hr { border: 0; border-top: 1px solid #ddd; margin: 24px 0; }

/* testimonial */
.testimonial {
	margin-top: 10px;
	padding-top: 20px;
}
.testimonial img.testimonial-logo { margin-bottom: 14px; }
.testimonial blockquote {
	font-size: 16px;
	line-height: 1.5;
	font-weight: 700;
	text-transform: uppercase;
	color: #555;
	margin-bottom: 12px;
}
.testimonial cite { font-style: normal; font-size: 14px; color: #777; }

/* sidebar widgets */
.widget { margin-bottom: 34px; padding-bottom: 28px; border-bottom: 1px solid #eee; }
.widget:last-child { border-bottom: 0; margin-bottom: 0; }

.widget-title {
	font-size: 19px;
	color: #333;
	padding-bottom: 8px;
	margin-bottom: 14px;
	border-bottom: 1px solid #777;
}

.cpl-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid #eee;
	font-size: 13.5px;
	line-height: 1.4;
}
.cpl-list li:first-child { padding-top: 0; }
.cpl-list li img { width: 40px; height: 40px; flex: 0 0 40px; }
.cpl-list.news-list li img { width: 44px; height: auto; max-height: 40px; object-fit: contain; }
.cpl-list li a { font-weight: 400; color: #444; border: 0; }
.cpl-list li a:hover { color: #0087c0; }

.readmore-btn {
	display: inline-block;
	margin-top: 10px;
	background: #f4ac00;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px;
	border: 0;
}
.readmore-btn:hover { background: #0087c0; color: #ffcc00 !important; }

.about-box h1 {
	color: #0087c0;
	font-size: 19px;
	margin-bottom: 10px;
}
.about-box h3 { font-size: 15.5px; color: #444; font-weight: 700; margin-bottom: 10px; line-height: 1.4; }
.about-box p { font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; }

/* solutions cards */
.solutions-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.solution-card {
	flex: 1 1 45%;
	min-width: 240px;
	background: #f6f6f6;
	border: 1px solid #e5e5e5;
	padding: 20px;
}
.solution-card h3 { margin-top: 0; }
.solution-card a.learn-link { display: inline-block; margin-top: 6px; }
.solution-card img { width: 100%; max-width: 180px; height: auto; margin-bottom: 14px; }

/* WordPress-style captioned float images (About / Research / Consulting) */
.wp-caption { margin-bottom: 18px; max-width: 100%; }
.wp-caption.alignleft { float: left; margin: 4px 22px 14px 0; }
.wp-caption.alignright { float: right; margin: 4px 0 14px 22px; }
.wp-caption img { display: block; width: 100%; height: auto; border: 1px solid #ddd; }
.wp-caption-text { font-size: 12px; color: #888; margin-top: 6px; line-height: 1.4; }

.inline-photo { float: left; margin: 4px 22px 14px 0; max-width: 300px; }
.inline-photo img { display: block; width: 100%; height: auto; border: 1px solid #ddd; }
.inline-photo.alignright { float: right; margin: 4px 0 14px 22px; }

/* consulting services list */
.services-list { margin: 0 0 20px 0; }
.services-list li { margin-bottom: 8px; }

/* contact page */
.office-grid { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 20px; }
.office-card { flex: 1 1 260px; background: #f6f6f6; border: 1px solid #e5e5e5; padding: 20px 24px; }
.office-card h3 { margin-top: 0; color: #0087c0; }
.office-card p { margin-bottom: 4px; line-height: 1.5; }

/* news listing */
.news-listing-hero { margin: 0 0 20px 0; }
.news-listing-hero img { width: 100%; height: auto; display: block; }

.news-item { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid #eee; overflow: hidden; }
.news-item:last-child { border-bottom: 0; }
.news-item .post-thumb { float: left; width: 200px; margin: 0 20px 10px 0; }
.news-item .post-thumb img { width: 100%; height: auto; display: block; border: 1px solid #eee; }
.news-item .post-thumb a:hover img { opacity: 0.7; }
.news-item .news-date { color: #999; font-size: 12.5px; text-transform: uppercase; margin-bottom: 6px; }
.news-item h2 { font-size: 19px; margin: 0 0 8px 0; }
.news-item h2 a { color: #202222; border: 0; }
.news-item h2 a:hover { color: #0087c0; }
.news-item p { margin-bottom: 8px; }
.news-item .read-more { font-size: 13px; }

/* individual article pages (news/ and cat-events/) */
.article-back { margin-bottom: 14px; font-size: 13px; }
.article-back a { font-weight: 400; }
.article-meta { color: #999; font-size: 12.5px; text-transform: uppercase; margin-bottom: 14px; }
.article-icon { margin-bottom: 16px; }

/* expanding accordion sections (Management Team bios, Careers positions) */
.toggle-list { margin: 18px 0; }

.toggle-item {
	border: 1px solid #e2e2e2;
	background: #f8f8f8;
	margin-bottom: 8px;
}

.toggle-title {
	display: block;
	width: 100%;
	position: relative;
	margin: 0;
	padding: 14px 46px 14px 16px;
	background: none;
	border: 0;
	text-align: left;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #333;
	cursor: pointer;
}
.toggle-title:hover { color: #0087c0; }

.toggle-title::after {
	content: "+";
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	background: #0087c0;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}
.toggle-item.open .toggle-title::after {
	content: "\2212";
	background: #f6ae00;
	color: #333;
}

.toggle-content {
	display: none;
	padding: 0 16px 16px 16px;
}
.toggle-item.open .toggle-content { display: block; }
.toggle-content p { margin-bottom: 12px; font-size: 14.5px; line-height: 1.6; }
.toggle-content p:last-child { margin-bottom: 0; }
.toggle-content ul { list-style: disc; margin: 0 0 12px 22px; }
.toggle-content ul li { margin-bottom: 6px; line-height: 1.5; }

/* careers */
.positions-list li {
	padding: 10px 14px;
	background: #f6f6f6;
	border: 1px solid #e5e5e5;
	margin-bottom: 8px;
}

/* product pages (solutions/) */
.product-hero { margin: 0 0 20px 0; }
.product-hero img { width: 100%; height: auto; display: block; }

.product-feature-icons {
	display: block;
	list-style: none;
	margin: 0 0 21px 0;
	padding: 0;
	overflow: auto;
}
.product-feature-icons li {
	display: inline-block;
	min-width: 150px;
	margin: 9px 10px 9px 0;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	color: #0085c3;
	vertical-align: middle;
}
.product-feature-icons img { width: 36px; height: 36px; vertical-align: middle; margin: -4px 7px 0 0; }

.product-provides { list-style: disc; margin: -5px 0 22px 22px; max-width: 532px; }
.product-provides li { margin-bottom: 7px; line-height: 1.55; }
.product-provides strong { color: #0085c3; text-transform: uppercase; }

.product-img { display: block; max-width: 250px; height: auto; }
.product-img.alignleft { float: left; margin: 10px 25px 10px 0; }
.product-img.alignright { float: right; margin: 10px 0 10px 25px; }

.product-link-row { margin-bottom: 18px; }

/* -------------------------------------------------------------
   Footer
-------------------------------------------------------------- */

#footer {
	background: #0086c0;
	color: #eee;
	border-top: 9px solid #333;
	padding: 30px 0;
}

#footer .inner {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.footer-col { flex: 1 1 260px; font-size: 13px; line-height: 1.6; }
.footer-col img { margin-bottom: 10px; }
.footer-col h2 {
	font-size: 19px;
	color: #ddd;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.footer-col h2 img { margin: 0; }

#footer a { color: #ffbd1d !important; border: 0; }
#footer a:hover { color: #fff !important; }

#footer hr { border-top: 1px solid rgba(255,255,255,.3); margin: 14px 0; }

.footer-bottom-bar {
	background: #333;
	padding: 12px 0;
	text-align: center;
	font-size: 12px;
	color: #9a9a9a;
}

/* -------------------------------------------------------------
   Mobile
-------------------------------------------------------------- */

@media (max-width: 860px) {
	.page-hero { height: auto; }
	#tagline, #usphone { display: none; }
	#header .inner { display: block; padding: 14px 0; text-align: center; }
	#logo { display: inline-block; }

	#nav-toggle {
		display: block;
		width: 100%;
		text-align: left;
		background: #242626;
		color: #fff;
		border: 0;
		padding: 12px 20px;
		font-size: 15px;
		font-weight: 700;
	}
	#primary-nav-wrap { border-top: 0; }
	#primary-nav { display: none; }
	#primary-nav.open { display: block; }
	#primary-nav ul { display: block; }
	#primary-nav > ul > li { width: 100%; }
	#primary-nav > ul > li > a { height: auto; line-height: 1.4; padding: 12px 20px; }
	#primary-nav .sub-menu { position: static; width: 100%; display: none !important; }
	#primary-nav li.has-dropdown.open .sub-menu { display: block !important; }

	#feature-wrapper { height: 460px; }
	.featureheadline { font-size: 26px; bottom: 150px; max-width: 90%; }
	.featuretext { position: static; width: auto; margin: 150px 0 0 0; padding: 0 0 0 0; }
	.FOM { bottom: 20px; }

	#content .inner { flex-direction: column; }
	#primary, #sidebar { width: 100%; flex: 1 1 auto; padding: 24px 20px; }

	.home-col { flex: 1 1 100%; }
	.solution-card, .office-card { flex: 1 1 100%; }
}