/* FONTS ============================== 
Raleway:
Thin 100
Extra-Light 200
Light 300
Normal 400
Medium 500
Semi-Bold 600
Bold 700
Extra-Bold 800
Ultra-Bold 900 

@font-face {
    font-family: 'ralewayregular';
    src: url('../fonts/raleway-regular-webfont.eot');
    src: url('../fonts/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('../fonts/raleway-regular-webfont.woff') format('woff'),
         url('../fonts/raleway-regular-webfont.ttf') format('truetype'),
         url('../fonts/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'ralewaycustom';
    src: url('/fonts/raleway-medium-webfont.eot');
    src: url('/fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/raleway-medium-webfont.woff2') format('woff2'),
         url('/fonts/raleway-medium-webfont.woff') format('woff'),
         url('/fonts/raleway-medium-webfont.ttf') format('truetype'),
         url('/fonts/raleway-medium-webfont.svg#ralewaymedium') format('svg');
    font-weight: 500;
    font-style: normal;

}
@font-face {
    font-family: 'ralewaycustom';
    src: url('/fonts/raleway-semibold-webfont.eot');
    src: url('/fonts/raleway-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/raleway-semibold-webfont.woff2') format('woff2'),
         url('/fonts/raleway-semibold-webfont.woff') format('woff'),
         url('/fonts/raleway-semibold-webfont.ttf') format('truetype'),
         url('/fonts/raleway-semibold-webfont.svg#ralewaysemibold') format('svg');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'ralewaycustom';
    src: url('/fonts/raleway-bold-webfont.eot');
    src: url('/fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/raleway-bold-webfont.woff2') format('woff2'),
         url('/fonts/raleway-bold-webfont.woff') format('woff'),
         url('/fonts/raleway-bold-webfont.ttf') format('truetype'),
         url('/fonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
    font-weight: 700;
    font-style: normal;
}
*/

@import url(http://fonts.googleapis.com/css?family=Raleway:500,600,700);

/* FONTS ============================== 


/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	-moz-osx-font-smoothing: grayscale; /* fix extra font weight added by FF for Mac */
	}
	.clear:before, .clear:after {content:' '; display:table;} .clear:after {clear:both;} .clear {*zoom:1;}

	a {text-decoration: none; color: #1781c4;
			-webkit-transition: all 0.2s linear; 
			   -moz-transition: all 0.2s linear; 
				 -o-transition: all 0.2s linear; 
				-ms-transition: all 0.2s linear; 
					transition: all 0.2s linear;}
	a:hover {color: #333;}
	
	sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
	sup {top: -0.5em;}
	sub {bottom: -0.25em;}

body {
	margin: 0; padding: 0; font-size: 18px; color: #333;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-weight: 500;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	} 

.content {display: block; max-width: 1240px; padding: 0 30px; margin: 0 auto; position: relative;}
	
	.content-right {float: right; width: 24%;}
		.content-right .spotlights a {width: 100%; margin-bottom: 19px;}
	
	.content-left {margin-right: 30%;} 
	
	#header {display: block; padding: 15px 0 19px 0; background: #fff;}
	
		#header .logo {height: 96px; padding-left: 80px; display: table-cell; vertical-align: middle; color: #333; background: url('../img/crest.png') no-repeat left center;}
			#header .logo .title {color: #666; font-size: 188.888888%; font-weight: 700;}
	
		#touch-nav {display: none;}
	
		#nav {z-index: 1; list-style: none; margin: 0; padding: 0; position: absolute; bottom: -19px; right: 0;}
			#nav li {display: inline-block;}
			#nav a {display: inline-block; color: #666; font-weight: 700; font-size: 77.777777%; padding: 17px 30px 13px 30px; border-bottom: 12px solid #fff;}
			#nav a:hover,
			#nav a.here {border-bottom: 12px solid #1781c4; background: #f2f2f2;}
	
			#nav li ul {display: none; position: absolute; right: 0; background: #f2f2f2; margin: 0; padding: 16px 0;}
			#nav li:hover ul {/* display: block; see functions.js */}
			#nav li ul li {display: block; padding-left: 30px; padding-right: 30px;}
			
			#nav li ul a {border-bottom: 0 none !important; padding: 15px 13px 15px 0px;}
			#nav li ul li:first-child a {border-bottom: 1px solid #ccc !important;}
			#nav li ul li:hover a,
			#nav li ul a:hover {border: 0 none; color: #333;}
	
	#banner {border-bottom: 20px solid #1781c4; display: block; width: 100%; height: 569px; background: #1781c4 url('../img/banner.jpg') no-repeat center bottom; background-size: cover;}
		#banner .content {max-width: 1300px;}
		#banner .logo-wrapper {position: absolute; right: 30px; top: 129px;}
		#banner .logo {font-size: 36.58px; background: url('../img/crest-large.png') no-repeat left center; height: 311px; padding-left: 224px; display: table-cell; vertical-align: middle; color: #fff;}
		#banner .logo .title {color: #fff; font-size: 69px; font-weight: 700;}
	
	#touch-title {display: none;}
	
	#page-title {display: block; background: #1781c4 url('../img/tower.jpg') no-repeat right top; height: 122px; border-bottom: 1px solid #1781c4;}
		#page-title h2 {color: #fff; font-size: 200%; height: 122px; display: table-cell; vertical-align: middle;}
	
	.intro-block {display: block; background: #f2f2f2; padding: 55px 0 66px 0;}
		.intro-block .content {max-width: 997px; text-align: center; line-height: 133.3333%;}
	
	.main {padding: 35px 0 40px 0; font-size: 77.77777%; line-height: 24px;}
		.home-page .main {padding: 57px 0 40px 0;}
		.intro {font-size: 18px; text-align: left;}
		
		.spotlights {text-align: justify; font-size: 18px;}
		
		.spotlights a {
			display: inline-block; 
			width: 18.5%; 
			height: 96px; 
			color: #1781c4; 
			font-weight: 700; 
			border: 1px solid #8bc0e1;
			background: #f2f2f2 url('../img/go.png') no-repeat 90% center;
			text-align: left; 
			}
			.spotlights a.download {background-image: url('../img/download.png');}
			.spotlights a:hover {color: #333; border-color: #999;}
	
			.spotlights a span {
				display: table-cell; 
				width: 100%; 
				height: 96px;
				vertical-align: middle;
				padding: 0 60px 0 26px;
				}
	
			.home-page .spotlights a {margin-top: 13px;}
	
			.stretch {display: inline-block; width: 100%;}
	
		.bios {text-align: justify;}
			.bios .intro {color: #666; margin-bottom: 53px;}
	
		.bio {/*width: 47%; display: inline-block; */ display: block; min-height: 150px; margin-bottom: 35px; text-align: left; position: relative; height: 100%; padding-left: 147px; vertical-align: top; line-height: 20px;}
			.bio h2 {color: #666; font-size: 18px; margin: 0; line-height: 24px;}
			.bio img {position: absolute; top: 0; left: 0;}
			.bio a {font-weight: 700; padding-right: 12px; background: url('../img/go-small.png') no-repeat right center;}
	
		/* Headlines with lines */
		.sub-title {color: #666; text-align: center; border-bottom: 1px solid #ccc; font-size: 18px; font-weight: 500; margin: -45px 0 55px 0;}
			.sub-title span {background: #fff; display: inline-block; padding: 0 29px; position: relative; top: 12px;} 
	
		.footnote {padding-top: 15px; border-top: 1px solid #ccc; font-size: 90%; margin-top: 45px;}
	
	#footer {display: block; background: #e5e5e5; padding: 29px 0 29px 0;}
		#footer .left {width: 30%; font-size: 66.6666666%; color: #666;}
			#footer .left a {color: #666; font-weight: 700;}
		#footer .right {float: right; text-align: right; width: 70%; font-size: 77.777777%; color: #006699; margin-top: 11px;}
			#footer .right a {color: #006699; margin: 0 4px;}
				#footer .right a:last-child {margin-right: 0;}
	
			#footer a {white-space: nowrap;}
			#footer a:hover {color: #333;}
	
	/* Cursor Selection */
		::selection {background: #1781c4; color: #fff; text-shadow: none;}
		::-webkit-selection {background: #1781c4; color: #fff; text-shadow: none;}
		::-moz-selection {background: #1781c4; color: #fff; text-shadow: none;}
	
	
	
/* Responsive */	
@media only screen and (max-width: 1160px) {
#nav a {padding: 17px 15px 13px 15px;}
}
@media only screen and (max-width: 1020px) {
#nav a {padding: 17px 12px 13px 12px;}
}
@media only screen and (min-width: 991px) {
#nav {display: block !important;}
}
@media only screen and (max-width: 1000px) {
.home-page .spotlights a {width: 31.83%;}	
.home-page .spotlights .temp-block {
		display: inline-block; 
		width: 31.83%; 
		height: 96px;
		}

}
@media only screen and (max-width: 990px) {
#touch-nav {
	display: block; 
	width: 56px; 
	height: 61px; 
	background: url('../img/touch-nav.png') no-repeat left top;
	position: absolute; 
	top: 28px; 
	right: 30px;
			-webkit-transition: none; 
			   -moz-transition: none; 
				 -o-transition: none;
				-ms-transition: none; 
					transition: none;
	}
	.touch-on {background-position: left bottom !important;}
	.sub {display: none !important;}
	.sub + ul {display: block !important;}
	
#nav {
	display: none;
	border-top: 3px solid #1781c4;
	border-bottom: 3px solid #1781c4;
	bottom: auto;
	top: 86px;
	right: 30px;
	width: 320px;
	background: #f2f2f2;
	}
	#nav li {display: block;}
	#nav a {border-bottom: 1px solid #ccc; font-size: 18px; display: block; padding: 11px; font-weight: 600;}
	#nav a:hover,
	#nav a.here,
	#nav li ul a:hover {border-bottom: 1px solid #ccc; background: #999; color: #fff !important;}
	
	#nav li ul {display: block; position: relative; background: #f2f2f2; margin: 0; padding: 0;}
	#nav li ul li {padding: 0;}
	#nav li ul a {padding: 11px;}	

	#banner {border-bottom: 10px solid #1781c4; height: 360px; background-image: url('../img/banner-med.jpg'); background-size: cover;}
		#banner .logo-wrapper {position: absolute; right: 30px; top: 79px;}
		#banner .logo {font-size: 24px; background-image: url('../img/crest-med.png'); height: 205px; padding-left: 173px;}
		#banner .logo .title {font-size: 45px;}

}
@media only screen and (max-width: 800px) {
.content-right {display: none;}
.content-left {margin-right: 0;}
}
@media only screen and (max-width: 760px) {
#footer {padding: 29px 0 29px 0;}
	#footer .left {width: 100%; display: block; text-align: center; padding-top: 30px;}
	#footer .right {padding-bottom: 30px; border-bottom: 2px solid #fff; float: none; text-align: center; width: 100%; margin-top: 0px; display: block;}
		#footer .right a {margin: 5px 4px 0 4px;}
		#footer .right a:last-child {margin-right: 4px;}
}
@media only screen and (max-width: 640px) {
.home-page .spotlights a {width: 48.5%;}
.home-page .spotlights .temp-block {display: none;}
}
@media only screen and (max-width: 600px) {
#header {height: 65px; padding: 0;}
#header .content {padding: 0 10px;}
#header .logo {height: 65px; padding-left: 36px; background-image: url('../img/crest-small.png');}
#touch-nav {top: 0; right: 0;}
#nav {top: 61px; right: 0; width: 100%;}
.tag-line {display: none;}
.content {padding: 0 10px;}
#banner {height: 266px; border: 0 none; background: #666 url('../img/banner-med.jpg') no-repeat center bottom; background-size: cover;}

#banner .logo-wrapper {position: absolute; right: 66px; top: 63px;}
#banner .logo {background: url('../img/crest-med2.png') no-repeat left center; width: 114px; height: 153px; padding-left: 0px; display: block;}
	#banner .logo .title {display: none !important;}

#touch-title {display: block; background: #1781c4; color: #fff; text-align: center; padding: 16px 10px 33px 10px; font-size: 24px;}
	#touch-title .title {font-size: 60px; font-weight: 700;}

	.intro-block {padding: 38px 0 61px 0;}
		.intro-block .content {max-width: 997px; text-align: center; line-height: 133.3333%;}

#page-title {background-image: none; height: auto; padding: 16px 0; border: 0 none;}
#page-title h2 {font-size: 155.55555%; display: block; height: auto; margin: 0;}
	
.main {padding: 9px 0 10px 0;}
.home-page .main {padding: 9px 0 10px 0;}	
	
.bios .intro {margin-bottom: 36px;}	
	
#footer .right span {display: none;}
#footer .right a {color: #006699; display: block;}
}


@media only screen and (max-width: 440px) {	
.home-page .spotlights a {width: 100%;}

#banner {background-image: url('../img/banner-small.jpg'); background-position: center top;}

.bio {width: 100%; min-height: 150px; margin-bottom: 20px; height: 100%; padding-left: 0;}
.bio img {position: relative; float: left; margin: 0 18px 10px 0; width: 90px; height: 108px;}
.bio a {font-weight: 700; padding-right: 12px; background: url('../img/go-small.png') no-repeat right center;}
	
}