/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* SET GLOBAL VALUES - Required_field is in main_top.css */

* { __transition: 0.4s; }
html, body { font: normal normal 300 18px/24px "Source Sans Pro", Arial, Helvetica, sans-serif; color: #2c2e2e; } /* Padding/margin resets and width/height 100% are in main_top.css */
.main_wrapper { background-color: transparent; } /* Everything but footer. Put background here if need full-height background. Min-height and position in main_top.css */
.content_wrapper { background: #EEE url("/css/images/bkg_content.jpg") repeat center top; }

strong { font-weight: 700; }

a:link { font-weight: 700; color: #01b2bc; text-decoration: underline; }
a:link:hover, a:visited { text-decoration: none; color: #ff8e41; }
a:link, a:hover, a:active, a:visited { __text-decoration: none !important; }

.errmsg { color: #F00; font-size: 11px; line-height: 11px; font-style: italic; font-weight: bold; padding-top: .6em; } /* "IS REQUIRED" type of form messages */
.invalid { outline: 2px solid #F00; font-weight: bold; } /* Regex fail form messages */

p { padding: 0px; margin-top: 1em; }
h1,h2,h3,h4,h5,h6 { font-family: "Source Sans Pro", Arial, Helvetica, sans-serif; font-weight: 900; margin: 0px; padding: 0px; font-feature-settings: "kern"; text-rendering: optimizelegibility; }
h1 { font-size: 2.625em; line-height: .95em; }
h2 { font-size: 2.0625em; line-height: 1em; }
h3 { font-size: 1.5em; line-height: 1.25em; }
h4 { font-size: 1.333em; line-height: 1.1em; }
h5 { font-size: 1em; line-height: 1.3em; }

img { max-width: 100%; }

/* NOTE - CONTENT and CONTENT_WRAPPER below are simply for microdata and adding a pad for sticky footer. SECTION will be used for most segments/areas */
.masthead, .banner, .content, .section, .footer { width: 100%; margin: 0px auto; position: relative; }
.masthead_wrapper, .banner_wrapper, .content_wrapper, .section_wrapper, .footer_wrapper { position: relative; clear: both; }

/* MASTHEAD */

.masthead_wrapper, .masthead { overflow: visible; height: 56px; }
.masthead_wrapper { 
	background-color: #FFF;  
	z-index: 9998; /* Not necessary, but makes certain modifications easier */
	/* INSET BANNER WITH DROP SHADOW */
	/*
	-moz-box-shadow: 0px 2px 8px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0px 2px 8px rgba(0,0,0,0.6);
	box-shadow: 0px 2px 8px rgba(0,0,0,0.6);
	*/
	}
.masthead {  }

.masthead_logo {
	width: 100px;
	height: 40px;
	position: absolute;
	top: 8px;
	left: 10px;
	background: transparent url("/css/images/masthead_logo.svg") no-repeat left top;
	background-size: contain;
	}
.masthead_logo h2 { display: none; }

/* MAKE MASTHEAD STICKY/FIXED */
/*
.main_wrapper { padding-top: 75px; transition: 0.4s; }
.masthead_wrapper { position: absolute; top: 0px; left: 0px; width: 100%; transition: 0.4s; }
*/

/* INSET BANNER WITH DROP SHADOW */

.nobanner {
	-moz-box-shadow: 0px 0px 0px transparent !important;
	-webkit-box-shadow: 0px 0px 0px transparent !important;
	box-shadow: 0px 0px 0px transparent !important;
	}

/* MENU */

.mobile_icon { 
	position: absolute; 
	top: 0px; 
	right: 20px; 
	width: 60px; 
	height: 56px; 
	background: transparent url("/css/images/mobile_menu.svg") no-repeat center center; 
	cursor: pointer;
	z-index: 9999; /* Not necessary, but makes certain modifications easier */
	}
.mobile_menu_icon {  }

.sitenav { display: none; }

	/* DROP-DOWN */
	
	.sitelinks {
		margin: 0px;
		padding: 0px 0px 0px 0px;
		list-style: none;
		position: absolute; 
		left: 0px; 
		top: 56px;
		width: 100%;
		z-index: 9000;
		}
	.sitelinks li { 
		display: block; 
		margin: 0px;
		padding: 0px; 
		position: relative;
		}
	.sitelinks li a { 
		background-color: #8e8e8e; /* Sets the color for the entire menu when it first drops down */
		border-bottom: 1px solid rgba(255,255,255,0.3);
		font-weight: 300;
		font-size: 28px;
		line-height: 28px;
		color: #FFF;
		text-align: center;
		text-decoration: none; 
		display: block;  /* This (and the two below it) makes the whole thing clickable ... who knew?!? */ 
		padding: 28px 0px 27px 0px;
		width: 100%; 
		text-transform: uppercase;
		}
	.sitelinks li a:hover { color: #FFF; background-color: #01b2bc; } /* Sets the highlight color for the menu items */
	.sitelinks li.menu_last a { border-bottom: none; }
	
	/* DROP-DOWN SUB-MENUS */
		
		.m_expand { 
			position: absolute; 
			top: 5px; 
			right: 0px; 
			cursor: pointer; 
			width: 52px; 
			height: 45px; 
			background: transparent url("/css/images/sprites.png") no-repeat 0px -240px; 
			}
		.services_subnav, .sitelinks .divider { display: none; }
		.sitesublinks {
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
			}
		.sitesublinks li {
			margin: 0px;
			}
		.sitesublinks li a { 
			background-color: #FFF; /* Sets the color for the entire SUB-menu when it first drops down */
			border-bottom: 1px solid rgba(255,255,255,0.3);
			font-weight: 300;
			font-size: 18px;
			line-height: 18px;
			text-decoration: none; 
			__color: #FFF; /* Sets the font color for the sub-menu items. Inherit to use base font color for the site. */
			display: block;  /* This (and the two below it) makes the whole thing clickable ... who knew?!? */ 
			padding: 12px 0px 13px 0px;
			width: 100%; 
			}
		.sitesublinks li a:hover { background-color: #7a7c80; }
		.sitesublinks li.first { __border-top: 1px solid rgba(255,255,255,0.3); }
		.sitesublinks li.last a { border-bottom: none; }

/* BANNER */
/*
The VW unit of measurement is a percentage of the width of the viewing window. 1vw = 1% of the width of the viewing window.
16:9 aspect ratio = 56.25vw
2:1 aspect ratio = 50vw
2.35:1 aspect ratio (anamorphic/Cinemascope) = 42.55vw
2.77:1 aspect ratio (Cinerama) = 36.1vw
*/

.banner_wrapper, .banner { overflow: visible; background-size: cover; background-position: center center; height: 100vw; }
.banner_wrapper { background-image: url("/css/images/banner.jpg"); }
.banner_wrapper.min, .banner_wrapper.min .banner { height: 50vw; }

.banner { display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: rgba(0,0,0,0.25); }
.banner a { text-decoration: none !important; color: inherit !important; }
.banner_logo { width: 75%; }
.banner_title { color: #FFF; text-transform: uppercase; font: normal normal bold 34px/34px "Source Sans Pro", Arial, Helvetica, sans-serif; text-align: center; padding: 0px 1em; }
.banner_text { font: normal normal 700 24px/24px "Source Sans Pro", Arial, Helvetica, sans-serif; color: #FFF; padding: 1em; text-align: center; }
.banner_button {
	font-size: 24px;
	line-height: 24px;
	margin: 0px auto 0px auto;
	text-align: center;
	background-color: #01b2bc;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFF;
	padding: 10px 12px 8px 12px;
	}
.banner_button:hover {
	background-color: #ff8e41;
	}

.section_first {
	border-top: 6px solid #FFF;
	}

.section { background-color: #FFF; }

/* NARRATIVE */

.narrative { 
	padding: 30px 50px 0px 50px;
	text-align: center;
	}
.narrative_head {
	font: normal normal 900 48px/48px "Source Sans Pro", Arial, Helvetica, sans-serif;
	}
.narrative_subhead { padding-top: .25em; color: #01b2bc; }
.narrative_text {
	padding-top: 0px;
	text-align: justify;
	text-align: left;
	}
.overview_pic {
	width: 100%; 
	padding: 0px 0px 20px 0px; 
	}

.video { width: 100%; }
.portfolio_pic { display: none !important; }
.morepics { display: block; position: relative; margin: 0px; padding: 0px; width: 100%; }

/* FEATURED 4UP */

.dot_divider {
	width: 65%; 
	margin: 43px auto 0px auto; 
	border-top: 5px dotted #666666;
	clear: both;
	}
.dot_divider.bottom {
	padding-top: 15px;
	margin-bottom: 43px;
	border-top: 0px dotted #666666;
	border-bottom: 5px dotted #666666;
	}
.feat4up a {
	text-decoration: none !important;
	color: inherit !important;
	border: 0px none transparent !important;
	}
.f4box {
	width: 100%;
	position: relative;
	padding: 20px;
	text-align: justify;
	text-align: center;
	background-color: rgba(237,237,237,0);
	cursor: pointer;
	}
.f4icon {
	width: 100%;
	height: 0px;
	padding-bottom: 100%;
	background: transparent url() no-repeat center center;
	background-size: 100%;
	}
.f4butt {
	width: 80%;
	margin: 30px auto 0px auto;
	text-align: center;
	background-color: #01b2bc;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFF;
	padding: 7px 0px 5px 0px;
	}
.f4title {
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
	}

.f4box:hover { __background-color: rgba(237,237,237,1); }
.f4box:hover .f4icon { background-size: 110%; }
.f4box:hover .f4butt { background-color: #ff8e41; }

/* CALL TO ACTION */

.cta { padding-top: 50px; }
.cta_bar {
	height: 314px;
	background: #b2e8eb url("/css/images/bkg_whiteangle.svg") no-repeat center -30px;
	position: relative;
	}
.capabilities {
	width: 38%;
	-moz-box-shadow: 5px 5px 0px rgba(0,0,0,0.15);
	-webkit-box-shadow: 5px 5px 0px rgba(0,0,0,0.15);
	box-shadow: 5px 5px 0px rgba(0,0,0,0.15);
	position: absolute;
	right: 30px;
	bottom: 30px;
	}
.partnering {
	width: calc(100% - 60px);
	position: absolute;
	left: 30px;
	top: 0px;
	}
.cta_text {
	padding: 0px 20px 30px 30px;
	position: absolute;
	left: 0px;
	bottom: 0px;
	text-align: right;
	width: calc(62% - 30px);
	color: #01b2bc;
	font-weight: 700;
	font-size: 1.2em;
	}
.cta_or {
	display: block;
	font-weight: 400;
	}
.cta_text a {
	text-decoration: none !important;
	color: inherit !important;
	}
	

/* TESTIMONIAL */

.hpquote_wrapper, .hpquote {
	height: 336px;
	}
.hpquote {
	background: #01b2bc url("/css/images/bkg_testimonial.png") no-repeat left bottom;
	color: #FFF;
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-direction: column;
	}
.hpquote_text {
	color: #FFF;
	font-size: 20px;
	line-height: 26px;
	font-size: 14px;
	line-height: 18px;
	text-align: justify;
	text-align: left;
	width: 80%;
	width: 90%;
	position: relative;
	__padding-left: 60px;
	}
.hpquote_attr {
	color: #FFF;
	font-size: 20px;
	line-height: 26px;
	font-size: 14px;
	line-height: 18px;
	width: 80%;
	width: 90%;
	text-align: right;
	padding-top: .25em;
	font-style: italic;
	}
.quote {
	background: transparent url("/css/images/quote.svg") no-repeat left top;
	position: absolute;
	left: 0px;
	top: -11px;
	width: 45px;
	height: 38px;
	background-size: contain;
	display: none;
	}

/* CLIENT STORIES */

.story_wrapper { display: none; }
.story { padding-top: 70px !important; padding-bottom: 25px !important; position: relative; }
.story_top, .story_bottom { position: absolute; top: 0px; left: 0px; background: #41c5cd url("/css/images/story_arrow.svg") no-repeat 80px 0px; width: 100%; height: 50px; }
.story_bottom { height: 25px; top: auto; bottom: 0px; background-image: none; }
.toggler, .closeSlider { cursor: pointer; }
.slider { display: none; }
.collapseSlider { display: none; }
.sliderExpanded .collapseSlider { display: block; }
.sliderExpanded .expandSlider { display: none; }
.story_toggler { font-size: 1.2em; font-weight: 900; text-align: left; }
.ticon { padding-right: .5em; }
.expandSlider { color: #01b2bc; }
.collapseSlider { color: #ff8e41; }
.story_title { color: #41c5cd; }
.story blockquote { background-color: #41c5cd; margin: 0px 0px 30px 0px; padding: 30px 35px; font-weight: 700; font-style: italic; color: #FFF; line-height: 1.5em; }

/* CONTENT */

.col { display: block; margin: 0px 10px; __background-color: #EEE; }
.nomargin { margin: 0px; }
.col_full, .col_half, .col_third, .col_twothirds, .col_quarter, .col_threequarters {  }
.col_full.nomargin, .col_half.nomargin, .col_third.nomargin, .col_twothirds.nomargin, .col_quarter.nomargin, .col_threequarters.nomargin {  }
.content, .sidebar { padding-bottom: 30px; }

/* OVERVIEW */

.overview {  } /* in case we need to clear something or add a margin */
.title { font-size: 3.157em; line-height: .9em; margin-top: 19px; font-weight: 700; }
.subtitle { font-size: 1.777em; font-size: 1.333em; line-height: 1.1em; margin-top: .4em; }
.description {  }
.description h1, .description h2, .description h3, .description h4, .description h5, .description h6 { margin-top: .85em; }
.pic_full, .pic_half { display: block; width: 100%; clear: both; }
.pic_full { margin: 10px 0px; }

.description ul { text-align: left; }

/* OVERVIEW PICS */

.pic_box {
	width: 300px;
	display: block;
	margin: 10px 0px 0px 0px;
	overflow: hidden;
	position: relative;
	}

.pic {
	max-width: 100%;
	}
.caption {
	text-align: center;
	padding: 8px 0px 4px 0px;
	font-style: italic;
	color: #a0a0a0;
	}
	
.pic_multi_box {  }
.pic_multi {
	float: left;
	width: 145px;
	height: 97px;
	background-color: #CCC;
	margin: 10px 10px 0px 0px;
	background-size: cover; 
	background-position: center center;
	position: relative;
	overflow: hidden;
	}
.pic_multi:nth-child(2n) { margin-right: 0px; }
.pic_multi_spacer { width: 145px; height: 97px; position: absolute; top: 0px; left: 0px; overflow: hidden; }
.pic_multi_spacer img { display: none; }

/* SERVICE PICS */

.service_pic, .story_pic {
	width: 100%;
	margin: 10px 0px 10px 0px;
	}
.service_pic { margin-top: 25px; }
.story_pic { margin: 20px 0px 20px 0px; }

/* OVERVIEW MULTI-PIC GALLERY */

.gallery {
	margin: 15px 15px 15px 15px;
	overflow: auto;
	}
.gallery_main {
	width: 100%;
	height: 100vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	background-color: transparent;
	}
.gallery_thumb {
	width: 135px;
	height: 90px;
	background-size: cover;
	background-position: center center;
	float: left;
	background-color: #EEE;
	position: relative;
	}
.gallery_main img, .gallery_thumb img { display: none; }
.gallery_count {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: rgba(35,144,159,0.75);
	font: normal normal 700 28px/28px "Roboto Slab", "Courier New", Courier, monospace;
	color: #FFF;
	padding-top: 30px;
	}

/* DOWNLOADS */

.downloads { /* container */
	width: 300px;
	display: block;
	margin: 10px 0px 0px 0px;
	}
.downloads_header {
	box-sizing: border-box;
	border: 1px solid #a0a0a0;
	}
.downloads_header_text {
	font-weight: 700;
	text-transform: uppercase;
	color: #a0a0a0;
	padding: 12px 15px 11px 15px;
	float: left;
	line-height: 28px;
	}
.downloads_header_icon {
	width: 51px;
	height: 51px;
	background: #cfcfcf url("/css/images/bkg_downloads_icon.png") no-repeat center center;
	border-right: 1px solid #a0a0a0;
	float: left;
	}
.downloads ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	}
.downloads ul li {
	margin: 1em 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	}
.downloads a { text-decoration: none !important; color: inherit !important; }
.dl_item {  
	font-size: 16px;
	line-height: 18px;
	font-weight: 700; 
	padding: 3px 0px 5px 53px;
	padding-left: 35px;
	background: transparent url("/css/images/icon_pdf.png") no-repeat 13px 0px;
	background-position: 0px 0px;
	}
.dl_item.pdf { background-image: url("/css/images/icon_pdf.png"); }
.dl_item.doc, .dl_item.docx { background-image: url("/css/images/icon_doc.png"); }
.dl_item.xls, .dl_item.xlsx { background-image: url("/css/images/icon_xls.png"); }
.dl_item.ppt, .dl_item.pptx { background-image: url("/css/images/icon_ppt.png"); }
.dl_item.txt { background-image: url("/css/images/icon_txt.png"); }
.dl_item.jpg, .dl_item.jpeg, .dl_item.png, .dl_item.tif, .dl_item.gif { background-image: url("/css/images/icon_jpg.png"); }
.dl_item.web { background-image: url("/css/images/icon_web.png"); }

/* BROWSE */

.browse {  } /* in case we need to clear something or add a margin */
.browse_records a {
	text-decoration: none !important;
	color: inherit !important;
	}
.browse_record {
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 30px 0px;
	border-bottom: 2px dotted rgba(0,0,0,0.2);
	}
.browse_record.last { padding-bottom: 0px; border-bottom: 0px none transparent; }
.browse_pic { 
	width: 150px; 
	height: 150px; 
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin: 0px auto 20px auto;
	background: transparent url() no-repeat center center;
	background-size: cover;
	}
.browse_title { margin-top: 0px; font-size: 1.5em; line-height: 1.25em; font-weight: 700; }
.browse_subtitle { font-size: 1em; line-height: 1.1em; margin-top: .4em; }
.browse_description { margin-top: .5em; text-align: justify; text-align: left; }
.browse_more {
	margin-top: .85em;
	}
.browse_more a {
	display: block;
	padding: 10px 5px;
	text-align: center;
	font-size: 1.4em;
	font-weight: 700;
	background-color: rgba(0,0,0,0);
	border: 1px solid rgba(0,0,0,0.1);
	color: #999 !important;
	text-decoration: none !important;
	}
.browse_more a:hover {
	color: #000 !important;
	background-color: rgba(0,0,0,0.1);
	}

.browse_button {
	font-size: 24px;
	line-height: 24px;
	margin: 20px auto 0px auto;
	text-align: center;
	background-color: #01b2bc;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFF;
	padding: 10px 12px 8px 12px;
	}
.browse_button:hover {
	background-color: #ff8e41;
	}

/* STAFF */

.staff_head { text-align: center; margin: 50px 0px 20px 0px; color: #f68d48; }
.browse_records { padding: 0px 50px; }
.browse_title { color: #01b2bc; text-align: center; }
.jobtitle { color: #999; text-align: center; }

/* RECORD */

.segment_wrapper {  }
.segment { 
	padding: 15px 50px 15px 50px;
	text-align: justify;
	text-align: left;
	}
.segment_title { text-align: center; font-size: 1.75em; }

/* FORMS */

.form {
	width: 100%;
	background-color: #01b2bc;
	padding: 40px;
	}
.label { color: #FFF; }
.input input, .input select, textarea { width: 100% !important; padding: .5em; margin-bottom: 5px; }
textarea { min-height: 5em; }
.submit input { padding: 1em; background-color: #f68d48; border: 0px none transparent; color: #FFF; }
.submit { margin: 20px auto 0px auto; text-align: center; } 

/* FOOTER */

.content_wrapper { padding-bottom: 190px; } /* Padding matches footer height. This container JUST makes room for footer. Add about 20px to footer height to ensure bottom content pad */
.footer_wrapper, .footer { height: 190px; } 
.footer_wrapper { margin-top: -190px; background: #1a1919 url() repeat center top; z-index: 9999; }
.footer {  }
.footer .divider {
	color: rgba(255,255,255,0.25);
	padding: 0px 10px;
	}

.footer_text { 
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	padding-top: 20px;
	color: #FFF; 
	}
.footer_companylogo {
	width: 100px;
	height: 40px;
	position: absolute;
	top: 8px;
	left: 10px;
	background: transparent url("/css/images/footer_logo.svg") no-repeat left top;
	background-size: contain;
	}
.footer_companylogo:hover { background-position: -140px -344px; }
.company_name { padding-top: 5px; }
.company { 
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif; 
	font-size: 20px;
	line-height: 26px; 
	font-weight: 700;
	}
.tagline { 
	display: block; 
	font-size: 14px;
	line-height: 14px;
	font-weight: 300;
	font-style: italic;
	padding: 0px 40px;
	}
.address {
	padding-top: 9px;
	}
.contact_numbers { display: block; }
.fineprint {
	font: normal normal 300 9px/14px Roboto, Arial, Helvetica, sans-serif;
	padding-top: 8px;
	text-align: center;
	color: #FFF;
	}
.fineprint a, .credits a, .footer_text a { color: #FFF !important; }
.fineprint a:hover, .credits a:hover, .footer_text a:hover { text-decoration: underline !important; }

.footer_logos { width: 142px; height: 24px; position: absolute; bottom: 20px; left: 50%; margin-left: -71px; }
.footer_logo { height: 24px; background: transparent url("/css/images/sprites.png") no-repeat 0px 0px; float: left; }
	.beansprout { width: 67px; background-position: 0px 0px; } .beansprout:hover { background-position: 0px -25px; }
	.coloredbean { width: 63px; background-position: -68px 0px; margin-left: 12px; } .coloredbean:hover { background-position: -68px -25px; }

/* GLOBAL OVERRIDES */

.nobreak { white-space: nowrap; }
.hideme { visibility: hidden; display: none; }
.tp { padding-top: 10px; }
.tm { margin-top: 10px; }

/* HIDE ON MOBILE @ 719px OR LESS */

@media only screen and (max-width: 719px) { 
	.m_hide { display: none !important; visibility: hidden !important; } 
	.m20 .mb3up { width: calc(100% - 40px) !important; padding-bottom: calc((100% - 40px) * .5625) !important; }
	.m20 .mb2up { width: calc((100% - 15px) / 2) !important; padding-bottom: calc(((100% - 15px) / 2) * .5625) !important; margin: 10px 0px 0px 5px !important; }
}