/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Eric's custom styles
   ========================================================================== */

@font-face {
  font-family: 'ncc';
  src:  url('../fonts/ncc.eot?q6ledq');
  src:  url('../fonts/ncc.eot?q6ledq#iefix') format('embedded-opentype'),
    url('../fonts/ncc.ttf?q6ledq') format('truetype'),
    url('../fonts/ncc.woff?q6ledq') format('woff'),
    url('../fonts/ncc.svg?q6ledq#ncc') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ncc' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arts:before {
  content: "\e900";
  color: #c11f4c;
}
.icon-business:before {
  content: "\e901";
  color: #f79130;
}
.icon-health:before {
  content: "\e902";
  color: #f0c419;
}
.icon-hospitality:before {
  content: "\e903";
  color: #8fc641;
}
.icon-industry:before {
  content: "\e904";
  color: #b9d871;
}
.icon-social:before {
  content: "\e905";
  color: #47c1c2;
}
.icon-stem:before {
  content: "\e906";
  color: #075481;
}
.icon-search:before {
  content: "\f002";
}
.icon-plus:before {
  content: "\f067";
}
.icon-minus:before {
  content: "\f068";
}
.icon-twitter:before {
  content: "\f099";
}
.icon-facebook:before {
  content: "\f09a";
}
.icon-linkedin:before {
  content: "\f0e1";
}
.icon-angle-left:before {
  content: "\f104";
}
.icon-angle-right:before {
  content: "\f105";
}
.icon-angle-up:before {
  content: "\f106";
}
.icon-angle-down:before {
  content: "\f107";
}
.icon-mobile:before {
  content: "\f10b";
}
.icon-instagram:before {
  content: "\f16d";
}
.icon-long-arrow-left:before {
  content: "\f177";
}
.icon-long-arrow-right:before {
  content: "\f178";
}





/*

02448b - blue (topBar) (buttons) (some headings) (links?)
023b78 - blue (slightly darker) (visit campus button on hp)
022d5c - blue (darkest) (view coarse schedule button on hp)
f0b50f - yellow (buttons)
f0b50f - green (little lines)

5b5b5b - gray (main menu text color)
484848 - gray (darker) (headings)
707070 - gray (light) (text? -too light?)
383838 - gray (darkest) (career coach area bg on hp)
edf0f5 - gray (lightest) (news & events area bg on hp)

*/
/*

font-family: 'Ubuntu', sans-serif;
	-topbar (semibold - 500), 
	-main menu (bold - 700)
	
font-family: 'Open Sans', sans-serif;
	-text, (regular - 400),
	-headings, buttons (bold - 700),
	
font-family: 'Lato', sans-serif;
	-ghost buttons (bold - 700),
	-random (like inside h1 on homepage) (reg - 400)

*/

/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*,
*:before,
*:after {
	
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
	background: #fefefe;
	color: #707070;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 1.5;
}


h1, .h1 {
	line-height: 1.2;
	font-weight: 700;	
}
h1 span,
.h1 span {
	font-weight: normal;	
}

h2, h3, h4, h5 {
	color: #484848;
	text-transform: uppercase;
	font-size: 1.25em;
}

/* some h2s are styled like h1s */
.h1 {
	font-size: 2em;
    margin: 0.67em 0;
	line-height: 1.2;	
}



.withLine:after {
	content: '';
	display: block;
	width: 200px;
	height: 4px;
	background-color: #f0b50f;
	margin-top: 0.5em;
}

.menu,
.nav,
.nav-child {
	list-style: none;
	margin: 0;
	padding: 0;	
}

dl.article-info {
	margin-top: 0;	
}
.article-info dd {
	margin-left: 0;	
}

hr {
	margin: 3em 0;	
}

/* some columns end with a nav list */
.col .nav {
	margin: 1em 0;
}


/* temp */
.imagePlaceholder {
	display: block;
	height: 0;
	padding-top: 56%;
	background-color: #828282;	
	margin: 1em 0;
}

/* column blocks should always contain child margins */
.col:before,
.col:after {
	content: '';
	display: table;	
}
/* 9-15 removed this (it used to apply to financial aid page...) 
.col h3 {
	margin-top: 1rem;
	margin-bottom: 0;	
}
.col .nav {
	font-weight: 700;	
}
*/
a {
	color: inherit;
	text-decoration: none;
}

.button, .btn {
	display: inline-block;
	padding: 0.75em 1.5em;
	background-color: #02448b; 
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.875em;
	border: 1px solid #02448b;
	color: #fff !important;
}
.ghostButton {
	display: inline-block;
	padding: 0.75em 1.5em;
	text-transform: uppercase;
	text-decoration: none;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 0.875em;
	border: 1px solid;
}

.button:focus, .btn:focus {
	outline: 1px dotted #02448b;	
}

/* some headings are links */
h2 a,
h3 a,
h4 a {
	color: inherit !important;
}

.jOutput img {
	max-width: 100%;
	height: auto;	
}

/* links in the content are blue (and are bold?) */
.jContent a:not(.ghostButton),
.jContent a:not(.button) {
	color: #02448b;
	font-weight: 600;
}

.mainContent a[href$=".pdf"]:after {
	content: ' (PDF)';
}


.mainContent {
	padding: 20px;
	width: 100%;
	/*overflow: hidden;*/
}

/* some paragraphs look like titles */
.title {
	font-size: 1.5em;
	font-weight: bold;	
}

/* articles may have full-width .callout divs */
.callout {
	background-color: #f4f4f4;
	padding: 20px;
	margin: 3em -20px;
	position: relative;
}
.callout:after {
	content: '';
	display: block;
	clear: both;	
}
/* eventually the screen will get too big for this to actually be full-width */
/*
.callout:before {
	content: '';
	display: block;
	position: absolute;
	height: 100%;
	width: 200%;
	top: 0;
	left: 100%;
	background-color: #f4f4f4;
}
*/
/* NOTE: above would require an overflow:hidden on the mainContent or some other div. That sucks because some pages have tables where the user will need to be able to scroll sideways. Doing this with js now... (the width) */
.calloutBg {
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
	height: 100%;
	background-color: #f4f4f4;
}


.callout .max1200 {
	margin: 0;	
}


/* some articles have course tables */
.ClassDetails {
	width: 100%;
	font-size: 0.875em;
}
/* we don't show this */
.ProfileTitle {
	display: none;	
}
/* Year is bigger text */
.ClassDetails th.Year {
	font-size: 18px;
	border-bottom: 1px solid #dcdcdc;
	padding: 16px 0;
}
.ClassDetails th.Semester,
.ClassDetails th.Credits {
	padding-top: 1em;
}
.ClassDetails th {
	text-align: left;	
}
.ClassDetails th.Credits {
	text-align: right;
	padding-left: 0.25em;	
}
.ClassDetails td {
	text-align: right;
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 0.25em;
	border-bottom: 1px solid #dcdcdc;
}
.ClassDetails tr td:first-child {
	padding-right: 0.25em;	
}
.ClassDetails tr td:first-child,
.ClassDetails tr td:first-child + td {
	text-align: left;
	padding-left: 0;
}
.ClassDetails tr td:first-child[colspan="2"] + td,
.ClassDetails tr td:first-child[colspan="4"] + td {
	text-align: right;
	padding-right: 0;
}


/* some articles have accordions */
.eAccordion {
	border-bottom: 1px solid #dcdcdc;
	margin: 1em 0;
}
.eAccordion .accordionTitle {
	border-top: 1px solid #dcdcdc;
}
.eAccordion .accordionTitle:first-child {
	border-top: 0;
}

.accordionTitle {
	padding: 0.75em 1.5em 0.75em 0;
	cursor: pointer;
	position: relative;
}
.accordionTitle h2,
.accordionTitle h3,
.accordionTitle h4,
.accordionTitle h5 {
	font-size: 1em;
	margin: 0;
}
.accordionTitle:after {
	content: "\f105";
	font-family: 'ncc' !important;
  	speak: none;
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	text-transform: none;
  	line-height: 1;
	font-size: 2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	display: block;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);	
}
.accordionTitle.expanded:after {
	content: "\f107";	
}
/* seems hacky... */
.accordionContent *:first-child {
	margin-top: 0;	
}




.jContent {
	max-width: 1200px;	
}
.noSidebar .jContent {
	margin: 0 auto;	
}
/* category pages are wider (I think the only category page we'll have will be the I Am NCC page) */
.category .jContent {
	max-width: 1400px;	
}

/* these get styled like h2s, but bigger */
.articleTitle {
	font-size: 1.5em;
	font-weight: 700;
	color: #484848;
	text-transform: uppercase;
	margin: 0.75em 0;	
}



.max1200 {
	max-width: 1200px;
	margin: 0 auto;	
}

.max1400 {
	max-width: 1400px;
	margin: 0 auto;	
}


.item-page {
	max-width: 1300px;
}

.item-page img {
	max-width: 100%;
	height: auto;	
}



/* iframed videos */
.iframeWrapper {
	background-color: #999;
}
.iframeWrapper:before {
	content: '';
	display: block;
	height: 90px;
	width: 90px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -45px;
	margin-left: -45px;
	border: 16px solid #edf0f5; /* light grey */
    border-top: 16px solid #02448b; /* blue */
	border-radius: 50%;
	animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* joomla modal popups need this (wtf, right?) */
#sbox-overlay {
	width: 100% !important;	
}
.sbox-content-iframe iframe {
	max-width: 100%;	
}


/* dpcalendar event popups need this */
#dpc-event-view {
	max-width: 100%;	
}


/* basic rsform styles */

.formFieldset legend {
	font-size: 1.25em;
	font-weight: bold;	
}
.formRequired {
	font-size: 0.875em;
	font-weight: normal;
	color: red;	
}
.formRequired:before {
	content: ' ';	
}
.formNoError {
	display: none;
}
ol.formContainer {
	list-style: none;
	padding: 0;
	margin: 0;
}
.rsform-block {
	margin: 1em 0;	
}
.rsform-error {
	border: 1px solid red;
}
.formError {
	font-size: 0.875em;
	color: red;	
}
.formRed {
	font-weight: bold;
	color: red;	
}
input[type="text"],
select,
textarea {
	width: 100%;
	max-width: 420px;
}
.rsform-radio + label,
.rsform-checkbox + label {
	padding: 0 1em 0 0.25em;
	font-size: 13px;
}

input[type="submit"] {
	padding: 0.75em 1.5em;
	background-color: #02448b; 
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.875em;
	border: 1px solid #02448b;
	color: #fff !important;
}


.formClr {
	display: block;	
}




/* added a special module chrome style 'grayBackground' for the upcoming events mopdule on pay-for-college page */
.moduletable.grayBackground {
	padding: 0 20px 20px;
	background-color: #edf0f5;
}
.moduletable.grayBackground:before {
	content: '';
	display: table;
}
.moduletable.grayBackground h2,
.moduletable.grayBackground h3 {
	text-align: center;
}
/* this module chrome adds a couple extra fields for a button link through the faculty fields plugin */
.grayBGbutton {
	margin-top: 20px;
	text-align: center;	
}


/* different styles for events if they're in this module chrome */
.grayBackground .eventList {
	background-color: transparent;	
}
.grayBackground .eventList > li {
	border-top: 0;
	background-color: #02448b;
	padding: 1em;
	margin: 1em 0;
}




#----------320-header{}


.aboveHeader {
	background-color: #022d5c;
	color: white;
	
	/* 7-28-20 Change requested by Barry */
	background-color: #f0b50f;
	color: #022d5c;
}
.aboveHeaderInner {
	max-width: 50em;
	margin: 0 auto;
	
	/* 7-28-20 Change requested by Barry */
	max-width: 64em;
}
.aboveHeader .moduleContent {
	padding: 1rem 20px;	
}
.aboveHeader a {
	color: inherit;
	text-decoration: underline;
}
/*
.siteHeaderTop {
	display: none;	
}

.siteHeaderBottom {
	padding: 15px 20px;	
	position: relative;
	box-shadow: 0 -1px 0 #dcdcdc inset;
}
.siteHeaderBottom:after {
	content: '';
	display: block;
	clear: both;	
}
*/

.siteHeader {
	padding: 15px 20px;	
	position: relative;
	box-shadow: 0 -1px 0 #dcdcdc inset;
}
.siteHeader:after {
	content: '';
	display: block;
	clear: both;	
}


.siteLogo {
	width: 180px;
	float: left;
}
.siteLogo img {
	max-width: 100%;
	height: auto;	
}


.navicon {
	float: right;
	height: 41px;
	width: 40px;
	border: 0;
	background: none;
	padding: 0;
}

.navBar {
	display: block;
	width: 20px;
	height: 3.5px;
	border-radius: 1px;
	background-color: #02448b;
	margin: 3px auto; 	
}


.siteHeaderContent {
	background-color: #fff;	
	box-shadow: 2px 2px 3px -3px #666;
	padding: 20px;
	position: absolute;
	left: -9999px;
	top: 100%;
	z-index: 3;
	opacity: 0;
	transition: opacity .3s ease-in-out;
	
	font-family: 'Ubuntu', sans-serif;
	font-weight: 700;
	color: #5b5b5b;
}
.siteHeaderContent.active {
	left: 0;
	opacity: 1;
}

.siteHeader .nav {
    border-left: 1px solid #efefef;
    border-right: 1px solid #efefef;
}

.siteHeader li {
    border-bottom: 1px solid #efefef;
    padding: 0.5em;
}
.siteHeader li.active ul li:last-child {
	border-bottom: 0;
	padding-bottom: 0;	
}
.siteHeader ul li:first-child {
	border-top: 1px solid #efefef;
}
.siteHeader .nav-child {
    height: 0;
    opacity: 0;
    overflow: hidden;
	width: 100%;
    transform: scale(0);
    transform-origin: left top 0;
    transition: all 0.2s ease-out 0s;
}
.siteHeader .expanded > .nav-child {
    height: auto;
	padding-top: 0.5em;
    opacity: 1;
    transform: scale(1);
}


.siteHeader a,
.siteHeader span.nav-header,
.nextSemesterStarts {
	font-size: 0.875em;
	text-decoration: none;
	text-transform: uppercase;	
}


.childicon {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid;
    color: #005397;
    float: right;
    line-height: inherit;
    margin-left: 1em;
    padding: 0;
    width: 32px;
	/* override for dpcalendar lame styles */
	margin-top: 0;
}
.childicon.expanded {
    /*color: #19a1db;*/
}


.nextSemesterStarts p {
	margin: 0;	
}
.headerTopNav {
	margin: 1em 0;	
}






.hero {
	background-color: #02448b;
	background-image: url(../images/hero.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 480px;
	padding: 20px;
	position: relative;
}

.homepage .hero {
	height: 570px;	
}



.eSlideBackground:before,
.hero:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(13,13,13,0.33);
	z-index: 1;	
}

/* some kind of pattern over the video background? */
/*
.eSlideBackground:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVQImWNgQAX/yeAAAIHCA/0RE2WAAAAAAElFTkSuQmCC) repeat;	
}
*/

.heroInner {
	position: absolute;
	top: 50%;
	left: 20px;
	right: 20px;
	transform: translateY(-50%);
	color: #fff;
	z-index: 2;	
}

.heroContent {
		
}
.heroContent h1 span {
	display: block;	
}

.heroContent p {
	font-family: 'Lato', sans-serif;
	font-size: 1.125em;
	max-width: 560px;
}

.heroLinks li {
	display: inline-block;
	margin: 1em 1em 0 0;	
}


/* displaying category in the hero? */
.heroContent .courseCat {
	font-size: 0.875em;	
}



#----------320-homepage{}

/* EDIT: made the hero a new slider module - needs to be styled like other heros */
.heroModule .eSlider {
	background-image: url(../images/hero.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;	
}
.eSlides {
	clear: both;	
}
.heroModule .eSlide {
	position: relative;
	height: 540px;
}
.homepage .heroModule .eSlide {
	height: 570px;	
}
.heroModule .eSlideBackground {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
	
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}
/* the background might be a video */
.eSlideBackground video {
	position: absolute;
	min-height: 100%;
	min-width: 100%;
	top: 50%;
	left: 50%;
	z-index: 0;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
	/* can't show this until bigger than 1024 :( */
	display: none;	
}



.heroModule .eSlideContent {
	position: absolute;
	width: 100%;
	z-index: 2;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 0 20px;
	color: #fff;
}
.heroModule .eSlideContentInner {
	max-width: 1400px;
	margin: 0 auto;	
}
.heroModule .h1 span {
	display: block;	
}
.eSlideText {
	margin: 1em 0;	
}
.eSlideLink {
	margin: 1em 0;
}



.eSlider-control-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	text-align: center;
	z-index: 4;
}
.eSlider-control-nav li {
	display: inline-block;
	margin: 0 0.25em;
}
.eSlider-control-nav a {
	display: block;
	height: 1em;
	width: 1em;
	overflow: hidden;
	border-radius: 50%;
	background-color: #fff;
	color: #fff;
	opacity: 0.5;
}
.eSlider-control-nav a.eSlider-active {
	opacity: 1;	
}


.eSlider-direction-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	top: 50%;
	z-index: 4;
}
.eSlider-nav-prev {
	position: absolute;
	left: 0;
}
.eSlider-nav-next {
	position: absolute;
	right: 0;	
}

.eSliderBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* this can't show until 890px */
	display: none;
}




.heroNav {
	color: #fff;	
}
.heroNav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.heroNav ul li {
	text-align: center;	
}
.heroNav ul li:nth-child(1) {
	background-color: #f0b50f;
}
.heroNav ul li:nth-child(2) {
	background-color: #02448b;
}
.heroNav ul li:nth-child(3) {
	background-color: #023b78;
}
.heroNav ul li:nth-child(4) {
	background-color: #022d5c;
}
.heroNav a {
	display: block;
	padding: 1.5em 20px;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;	
}









.sectionHeader {
	text-align: center;
	max-width: 540px;
	margin: 3em auto;
}
.sectionHeader h2 {
	margin: 0;	
	line-height: 1.15;
}
.sectionHeader p {
	font-size: 0.875em;	
}



.lilGreen {
	width: 100px;
	margin: 1em auto;
	border-top: 4px solid #f0b50f;
}




.programPath {
	padding: 0 20px;
	position: relative;
	overflow: hidden;	
}

.homePrograms,
.homePaths {
	list-style: none;
	margin: 0;
	padding: 0;
	/* these don't show on mobile? */
	border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
	
	transition: opacity 0.5s ease-out;
	opacity: 0;
}

.homePrograms.active,
.homePaths.active {
	height: auto;
	width: auto;
	margin: 0;
	overflow: inherit;
	position: relative;
	opacity: 1;
}


.homePrograms li,
.homePaths li {
	position: static;
	left: 0;
	opacity: 1;
	transition: opacity .25s ease-in-out;
}

.homePrograms > li.inactive,
.homePaths > li.inactive {
	transition: none;
	position: absolute;
	left: 100%;
	opacity: 0;
}

.homePrograms > li > ul,
.homePaths > li > ul {
	transition: opacity .25s ease-in-out;
	position: absolute;
	width: 100%;
	left: -100%;
	opacity: 0;
}

.homePrograms > li.active > ul,
.homePaths > li.active > ul {
	position: relative;
	left: 0;
	opacity: 1;
}

.programPath > hr {
	margin: 0;	
}

.programPath li {
	margin-top: 20px;
	padding-bottom: 20px;	
}

.programPath a {
	display: inline-block;
	text-decoration: none;	
}

.hpListImage {
	display: block;
	width: 46px;	
}
.hpListImage img {
	max-width: 100%;
	height: auto;	
}

.hpListTitle {
	color: #02448b;
	font-weight: bold;
}
.hpListText {
	display: block;
}

/* different color when active */
.programPath li.active > a > .hpListTitle {
	color: inherit;
}

/* the text goes away once clicked, gets replaced by little green line */
.programPath li.active > a > .hpListTitle:after {
	content: '';
	display: block;
	width: 100px;
	height: 4px;
	background-color: #f0b50f;
	margin-top: 0.25em;
}
.programPath li.active > a > .hpListText {
	display: none;	
}

/* hpListBack gets added by js when these are clicked */
.hpListBack {
	display: block;
	margin: 1em 0;	
}
.hpListBackArrow {
	display: inline-block;
	font-size: 1.4em;
	vertical-align: text-bottom;
	margin-right: 10px;
	color: #f0b50f;	
}


.programButton,
.pathsButton {
	height: 40px;
	line-height: 40px;
	width: 40px;
	border: 0;
	padding: 0;
	font-size: 2em;
	border-radius: 40px;
	background: #f0b50f;
	color: #fff;
}
.programButton span,
.pathsButton span {
	display: block;
	/*transition: all 0.2s ease-in-out;*/
}
.programButton.active span,
.pathsButton.active span {
	transform: rotate(45deg);
}









/*
.hpCareerCoach {
	background-color: #383838;	
}
.hpccImage {
	height: 230px;
	background: url(../images/career-coach.jpg) no-repeat center center transparent;
	background-size: cover;	
}
.hpccContent {
	padding: 20px;
	background-color: #fff;	
}

*/






.hpNewsEvents {
	background-color: #edf0f5;	
}
.hpNewsEvents:before {
	content: '';
	display: table;	
}
.hpNewsEvents h2 {
	margin: 0;
	padding: 2em 0;
	text-align: center;
}

.hpEvents {
	
}
.hpNews {
	
}

.eventList {
	background-color: #02448b;
	color: #fff;	
}
.newsList {
	background-color: #fff;	
}
.eventList,
.newsList {
	list-style: none;
	margin: 0;
	padding: 0;	
}
.hpEvents .eventList,
.newsList {
	padding: 1em;
}
.hpEvents .eventList > li,
.newsList > li {
	display: none;
	padding: 1em 0;	
}

/* we only show 1 item at mobile? */
.hpEvents .eventList > li:first-child,
.newsList > li:first-child {
	display: block;	
}



.hpNewsEventsLabel {
	display: block;
	font-size: 0.75em;
	text-transform: uppercase;
}

.eventTitle {
	display: block;
	text-transform: uppercase;
	font-weight: 700;
	margin: 1em 0;
}
.newsTitle {
	display: block;
	font-weight: 700;
	margin: 1em 0;
}
.eventDate {
	display: block;
	font-size: 0.875em;
}

.eventTime {
	display: block;
	font-size: 0.875em;
}

.hpNewsEventsLink {
	text-decoration: none;
	font-size: 0.875em;
	font-weight: 700;
	display: inline-block;
	margin-top: 20px;
	text-transform: uppercase;
	color: #02448b;
}





.hpSpotlightImage {
	height: 230px;
	/* this image is smaller than the career coach one? */
	height: 220px;
	background: url(../images/heather-anderson.jpg) no-repeat center center transparent;
	background-size: cover;	
}


.hpSpotlightContent {
	padding: 20px;
	background-color: #fff;
}



/* new styles for eNewsflash modules (replaces above styles) */
.hpNews .eNewsflashItem.item-2 {
	display: none;	
}
.hpNews .eNewsflash {
	padding: 1em;
	background-color: #fff;
}
.hpNews .eNewsflashItem {
	padding: 1em 0;	
}
.eNewsflashCatLink {
	color: #02448b;
	font-size: 0.75em;
    text-transform: uppercase;	
}
.hpNews .eNewsflashTitle {
	font-size: 1em;
	font-weight: 700;
    margin: 1em 0;
	text-transform: none;
}
.eNewsflashDate {
	font-size: 0.875em;
}
.eNewsflashReadmore {
	color: #02448b;
    display: inline-block;
    font-size: 0.875em;
    font-weight: 700;
    margin-top: 20px;
    text-decoration: none;
    text-transform: uppercase;	
}
.eNewsflashReadmore p {
	margin: 0;	
}

.hpSpotlight {
	
}
.eNewsflashImage img {
	max-width: 100%;
	height: auto;	
}
.hpSpotlight .eNewsflashContent {
	display: block;
	padding: 20px;
	background-color: #fff;	
}
.hpSpotlight .eNewsflashTitle {
	font-size: 19px;
	text-transform: none;	
}



.hpConnect {
	background-color: #edf0f5;	
}
.hpConnect h2 {
	margin: 0;
	padding: 2em 0;
	text-align: center;
}

.eTweetImage {
	padding-top: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;	
}
.eTweetContent {
	padding: 40px 20px;
	background-color: #fff;	
}



#----------320-footer{}


/* 11-27-17 added chat now above footer */
.nccChatNow {
	background-color: #3c9ee5;
	color: #fff;
	text-align: center;	
	
}
.nccChatNowButton {
	display: inline-block;
	position: relative;
	z-index: 8;
	cursor: pointer;
	padding: 13px;
	padding-right: 52px;
}
.nccChatNowText {
	display: inline-block;
	font-weight: bold;
}
.nccChatNowText:before {
	content: '';
	display: block;
	height: 22px;
	width: 26px;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	top: 50%;
	margin-top: -13px;
	right: 13px;
	
}
.nccChatNowText:after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: 23px;
	height: 0;
	width: 0;
	border: 6px solid transparent;
	border-left: 6px solid #fff; 
}
.nccChatNow a {
	position: absolute;
	display: inline-block;
	z-index: 9;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.nccChatNow img {
	opacity: 0;	
	max-width: 100%;
	max-height: 100%;
}
/* 8-29-17 added form above footer */
.newsletterSignup {
	background-color: #f0b50f;
}

.nsContent {
	padding: 1em 20px;
	color: #fff;	
}

.nsText h3 {
	margin: 10px 0 0;
	color: inherit;	
}

.hideLabels .formCaption2 {
	position: absolute;
	left: -9999em;	
}


.nsForm fieldset.formFieldset ol.formContainer li {
	padding: 0;
	margin: 10px 0;
}
.nsForm div.formBody {
	float: none;	
}

.newsletterSignup input {
	background-color: transparent;
	border: 2px solid;
	padding: 10px 20px;	
	font-size: 14px;
	line-height: 1.75
}

.newsletterSignup .rsform-submit-button {
	display: inline-block;
	height: 48px;
	width: 100%;
	max-width: 420px;
	background-color: #02448b;
	text-transform: uppercase;
	font-size: 0.875em;
	font-weight: bold;
	border: 1px solid #02448b;
	color: #fff !important;	
}

/* this form uses placeholders as labels (yuck) */
.nsForm 
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  opacity: 0.9;
}
.nsForm 
::-moz-placeholder { /* Firefox 19+ */
  opacity: 0.9;
}
.nsForm 
:-ms-input-placeholder { /* IE 10+ */
  opacity: 0.9;
}
.nsForm 
:-moz-placeholder { /* Firefox 18- */
  opacity: 0.9;
}






.getStarted {
	background-color: #f4f4f4;
	padding: 0 20px;
}
.getStarted:before,
.getStarted:after {
	content: '';
	display: table;	
}


.lookingFor {
	padding: 2em 20px;
	background-color: #02448b;
	color: #fff;
	text-align: center;
}

.lookingFor select {
	background: none;
	border: 2px solid;
	padding: 0.25em 0.5em;
	text-transform: uppercase;	
}
.lookingFor select option {
	background-color: #02448b;
	color: #fff;
}


.footer {
	padding: 20px;
	background-color: #fff;	
	font-size: 0.875em;
}

.footerLogo {
	width: 180px;
	padding: 1em 0;	
}
.footerLogo img {
	max-width: 100%;
	height: auto;	
}


.footerAddress {
	padding: 1em 0;	
}
.footerAddress address {
	font-style: normal;	
}
.footerAddress span {
	display: block;	
	white-space: nowrap;
}


.footerMenu {
	padding: 1em 0;	
}
.footerNav {
	font-weight: 700;
}
.footer a {
	color: #02448b;
	text-decoration: none;
}


.footerSocial {
	padding: 1em 0;	
}
.footerSocial h4 {
	margin: 0;	
}
.socialNav li {
	display: inline-block;
	font-size: 20px;
	margin-right: 10px;	
}




#----------320-interior{}


/* available programs blocks on program pages */
.availableProgram {
	padding: 1em 0;	
}
.apImage {
	height: 230px;
	background-color: #828282;
}
.availableProgram h3 {
	margin: 0.5em 0;	
}



/* temp */
.articleVideo {
	margin: 1em 0;
	background: #ccc;
	position: relative;
	height: 0;
	padding-top: 62.5%;	
}
.articleVideo p {
	position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	margin-top: -0.75em;
	text-align: center;	
}


/* career coach sections */
.ccRows {
	
}
.ccRows .ccRow {
	border-top: 1px solid #dcdcdc;
	padding: 1em 0;
}
.ccRows .ccRow:first-child {
	border-top: 0;
}
.ccRow .col {
	padding: 0.25em 0;	
}
.ccRowTitle {
	font-size: 1.125em;
	font-weight: 700;
	text-transform: uppercase;	
}

.ccRowColTitle {
	font-weight: 700;	
}
.ccRowColValue {
	font-size: 0.875em;	
}



/* some pages have a sidebar */
.asideContent {
	background-color: #484848; /* gray (comps) */
	background-color: #02448b; /* blue */
	/*padding: 20px 0;*/
	color: #fff;
}
/*
.asideContent .module {
	padding: 1em 0;	
}
*/

.asideContent .nav {
	padding: 10px 0 0;
}

/* main sub-menus only show current tree */
.mainSub > li {
	display: none;	
}
.mainSub > li.active {
	display: list-item;	
}
.mainSub .active .deeper li {
	display: none;	
}
.mainSub .active.deeper > ul > li {
	display: list-item;	
}


.asideContent .nav {
	padding: 10px 0;	
}
.asideContent li {
	padding: 10px 20px;
	line-height: 1;	
}
.asideContent .active.deeper > .nav-child {
	padding-top: 10px;	
}
/* they're also really small (12px) */
.asideContent a,
.asideContent .separator {
	font-size: 0.75em;	
}

/* sub items need more space though */
.asideContent li li {
	padding-right: 0;	
}

.asideContent li li.deeper.active {
	padding-bottom: 0;	
}

/* active links are yellow */
.asideContent li.current > a {
	color: #f0b50f;	
}

/* (except for the one in the action nav) */
.asideContent .actionNav li.current > a {
	color: #fff;	
}

/* the I am NCC category articles get a "back to category" link */
.backToMyNcc {
	padding: 20px;	
	line-height: 1;
}
.backToMyNccIcon {
	font-size: 1.125em;
	vertical-align: middle;
	padding-right: 0.5em;
}
.backToMyNccText {
	font-size: 0.875em;
	line-height: 1;
	text-transform: uppercase;
	vertical-align: middle;
}

/* special styles for this navigation module */
.asideContent .actionNav {
	background-color: #5e5e5e; /* gray (comps) */
	background-color: #f0b50f; /* yellow */
	font-family: 'Ubuntu', sans-serif;
	font-weight: 500; 	
	text-transform: uppercase;
	padding: 10px 0;
	
	/* 8-29-17 added form above footer - it's yellow :( */
	margin-bottom: 20px;
	
	/* 11-27-17 added chat now above footer */
	margin-bottom: 0;
}
.asideContent .actionNav li {
	padding: 10px 20px;
	line-height: 1;
}
.asideContent .actionNav a {
	font-size: 0.75em;
	text-decoration: none;	
}






/* subnavblocks module layout on withsubnav pages */
.subnav {
	padding: 20px 0;
}
.subnav.gray {
	background-color: #f4f4f4;
	color: #484848;
}

.subnav > .sectionHeader {
	margin-top: 28px;	
}

.subnavBlocks {
	margin: -20px auto 0;
}

.subnavBlocks li {
	padding: 20px;
}
.subnavBlocks a {
	text-decoration: none;
}
.subnavImage {
	display: block;
	margin-bottom: 1em;
}
.subnavImage img {
	display: block;
	max-width: 100%;
	height: auto;
}
.subnavTitle {
	font-size: 1.125em;
	font-weight: 700;
	text-transform: uppercase;
}

.subnavText {
	display: block;
	margin: 0.5em 0 1em 0;
}


/* eColumns modules */

/* these sectionheader titles are not all-caps */
.eColumns .sectionHeader h2 {
	text-transform: none;	
}

.eColumns {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px 0;
}
/* some colimn sections have a border on top */
.eColumns.borderTop {
	border-top: 1px solid #dcdcdc;	
}
/* some column sections are full width with a background color */
.eColumns.fullWidth {
	max-width: 100%;
}
.eColumns.dark {
	background-color: #383838;
	color: #fff;	
}
.eColumns.dark h2,
.eColumns.dark h3 {
	color: inherit;	
}
.eColumnsContent {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px 20px;	
}

.eColumnsRows {
	max-width: 1240px;
	margin: 0 auto;	
}

.eColumnItem {
	padding: 20px;	
}
.eColumnItem > h3 {
	margin: 0;	
}


/* eAltsections modules */
.eAltsection {
	margin: 1em 0;	
}
.eAltsectionTop,
.eAltsectionBottom {
	padding: 0 20px;	
}

.eAltsectionImage img {
	max-width: 100%;
	height: auto;
}

.eAltsectionImage,
.eAltsectionContent {
	padding: 20px 0;	
}
.eAltsectionContent h3 {
	margin: 0;	
}



/* eCallout sections */
.eCallout {
	padding: 20px;
	background-color: #f4f4f4;	
}
.eCallout.withImage {
	padding: 20px 0;
	background-color: #fff;	
}
.eCalloutImage {
	height: 230px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;	
}
.eCalloutContent {
	background-color: #fff;
	padding: 20px;	
}
.eCalloutContent h3 {
	margin: 0;	
}
.eCalloutContentButton {
	margin-top: 1.5em;
}
.eCalloutContentButton p {
	margin: 0;	
}



/* custom wysiwyg modules after content */
.belowContent .custom {
	padding: 20px;
}

.belowContent .custom .moduleContent {
	margin: 0 auto;
    max-width: 1200px;
}









#----------320-staff-directory{}

.staffDirectoryFilters {
	margin: 1em 0;	
}

.staffDirectoryFilters fieldset {
	border: 1px solid #dcdcdc;
	padding: 0 1em;
}

.staffDirectoryFilters legend {
	font-weight: 600;
}

.staffSelect {
	margin: 1em 0;	
}

.staffSelect label {
	display: block;	
}
/* the select box is too big for 320px */
.staffSelect select {
	width: 100%;	
}


.staffDirectory {
	padding-top: 1em;
}
/* no margins on these headings */
.staffDirectory h4,
.staffDirectory h5 {
	margin: 0;	
}
.staffSubSection {
	padding: 1em 0;
}

.staffTitle {
	display: block;	
}

.staffArticles {
	
}
.staffArticle {
	margin: 1em 0;	
}


#----------320-program-blogs{}
.programsCat {
	line-height: 1.2;
	padding: 1em 0;
}
.programsCat h3 {
	font-size: 1.125em;
	margin-top: 0;
	margin-bottom: 1em;
}
.programsCat h4 {
	font-size: 1em;
	margin: 0.75em 0;
	text-transform: none;
}

#----------320-category-blogs{}

.item-image {
	margin: 1em 0;	
}
/* these images should always be responsive */
.item-image img {
	max-width: 100%;
	height: auto;	
}


.blog .item {
	padding-bottom: 1em;	
}
/* titles on category blog pages are smaller */
.blog .item h2 {
	font-size: 1.125em;
	margin: 0;	
}

.blog .item p.readmore {
	font-size: 0.875em;
	text-transform: uppercase;
	margin-top: 2em;
}


/* pagination */
.pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;	
}
.pagination li.disabled {
	display: none;
}
.pagination li.pagination-next {
	display: block;
	float: left;	
}
.pagination span {
	display: none;	
}
.pagination a {
	border: 1px solid;
    display: inline-block;
    font-family: "Lato",sans-serif;
    font-size: 0.875em;
    font-weight: 700;
    padding: 0.75em 1.5em;
    text-decoration: none;
    text-transform: uppercase;	
}

#----------320-single-articles{}

/* published on date is small and has weird spacing */
.published {
	font-size: 0.875em;
	margin-top: 2em;
	margin-bottom: -0.5em;	
}



#----------320-cc-widget{}
.ccWidget {
	padding: 20px 0;
	margin: 20px 0;
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
	
	/* 12-21-16 new styles */
	border: 0;
}
.ccWidget .cc-card {
	position: relative;
	padding-bottom: 120px;
	padding-bottom: 64px;
	
	/* 12-21-16 new styles */
	padding: 20px 20px 84px;
	border: 20px solid #383838;
}

/* 12-21-16 new styles */
.ccWidget .cc-card:before {
	content: '';
	display: block;
	height: 220px;
	background: url(../images/career-coach-guy.png) no-repeat center center transparent;	
}

/* "In your area, people working as" */
.ccWidget p:first-child {
	
}
/* job title */
.ccWidget h1 {
	font-size: inherit;
	color: inherit;
	/*font-weight: normal;*/
	margin: 0;
	display: inline;
}
/* "typically make" */
.ccWidget p {
	display: inline;
	margin: 0;
}
/* "$xx.xx/hr" */
.ccWidget h2 {
	font-size: inherit;
	color: inherit;
	font-weight: bold;
	margin: 0;
	display: inline;
	text-transform: none;
}
/* "Learn More" button */
.cc-link {
	display: inline-block;
	padding: 0.75em 1.5em;
	background-color: #02448b; 
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.875em;
	border: 1px solid #02448b;
	color: #fff !important;
	position: absolute;
	left: 0;
	bottom: 60px;
	bottom: 5px;
	
	/* 12-21-16 new styles */
	left: 20px;
	bottom: 20px;
}
/* "Powered by EMSI" */
.ccWidget footer {
	display: none;
	
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100px;
	font-size: 0.75em;	
}
.ccWidget footer img {
	max-width: 100%;
	height: auto;	
}



#----------320-search{}
.word label {
	display: block;
	margin-bottom: 8px;	
}
.word input[type="text"] {
	display: block;
	margin-bottom: 8px;	
}
.search-results {
	list-style: none;
	padding: 0;	
}
.result-title {
	margin-bottom: 0;	
}



#----------320-dpcalendar{}

/* keep the loader from pushing the calendar around */
.dp-container {
	position: relative;	
}
.dp-container #dpcalendar_component_loading {
	position: absolute;
	top: -50px;
	left: 0;
	width: 100%;
}

/* we don't show the datepicker and print buttons */
#dpcalendar_component .fc-button-datepicker,
#dpcalendar_component .fc-button-print {
	display: none;	
}




#----------320-landing-pages{}
.lpFormInner {
	padding: 10px 20px;
	background-color: #d1d1d1;	
}




#----------320-focus-areas{}
.focusArea {
	padding: 20px;
	color: #fff;	
}
.focusIcon {
	font-size: 60px;
	line-height: 60px;	
}
/* the colors are part of the icon- css rules - need to override that */
.focusIcon span:before {
	color: inherit;	
}
.focusTitle {
	font-size: 1.25em;
	font-weight: bold;
	text-transform: uppercase;	
}



@media only screen and (min-width: 30em) {
	#----------480-homepage{}
	/* heroNav starts to have columns */
	.heroNav::after {
		content: '';
		display: block;
		clear: both;	
	}
	
	.heroNav li {
		float: left;
		width: 50%;
		height: 70px;
		display: table;
	}
	.heroNav a {
		display: table-cell;
		vertical-align: middle;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	
	
	.eTweets:after {
		content: '';
		display: table;
		clear: both;	
	}
	.eTweetInner {
		display: table;
		margin: 0 20px 20px;
	}
	.eTweetImage,
	.eTweetContent {
		display: table-cell;
		width: 50%;
		vertical-align: middle;		
	}
	.eTweetImage {
		padding-top: 0;	
	}
	
	
	
	
	#----------480-category-blogs{}
	/* image starts to float left */
	.iAmNccImage {
		float: left;
		max-width: 50%;
		margin: 0 1em 1em 0;
	}

	
	
	#----------480-focus-areas{}
	/* start to have "tails" on banners */
	.focusArea {
		padding: 40px;
		position: relative;
		overflow: hidden;
		padding-right: 60px;
	}
	.focusAreaTails {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 40px;	
	}
	.focusAreaTailsTop {
		position: absolute;
		width: 100%;
		height: 50%;
		top: 0;
		right: 0;
	}
	.focusAreaTailsBottom {
		position: absolute;
		width: 100%;
		height: 50%;
		bottom: 0;
		right: 0;
	}
	.focusAreaTailsTop::before,
	.focusAreaTailsTop::after,
	.focusAreaTailsBottom::before,
	.focusAreaTailsBottom::after {
		content: '';
		display: block;
		position: absolute;
	}
	
	
	
	/* 1 tail */
	.focusAreaTails-1 .focusAreaTailsTop {
		background: -moz-linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: -webkit-linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
	}
	.focusAreaTails-1 .focusAreaTailsBottom {
		background: -moz-linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
	}
	
	
	/* 2 tails */
	.focusAreaTails-2 .focusAreaTailsTop {
		background: -moz-linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
	}
	.focusAreaTails-2 .focusAreaTailsBottom {
		background: -moz-linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: -webkit-linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
	}
	
	
	/* 3 tails */
	.focusAreaTails-3 .focusAreaTailsTop::before,
	.focusAreaTails-3 .focusAreaTailsTop::after {
		width: 100%;
		height: 50%;
	}
	.focusAreaTails-3 .focusAreaTailsTop::before {
		top: 0;
		background: -moz-linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
	}
	.focusAreaTails-3 .focusAreaTailsTop::after {
		bottom: 0;
		background: -moz-linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: -webkit-linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
	}
	.focusAreaTails-3 .focusAreaTailsBottom::before,
	.focusAreaTails-3 .focusAreaTailsBottom::after {
		width: 100%;
		height: 50%;
	}
	.focusAreaTails-3 .focusAreaTailsBottom::before {
		top: 0;
		background: -moz-linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
	}
	.focusAreaTails-3 .focusAreaTailsBottom::after {
		bottom: 0;
		background: -moz-linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: -webkit-linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
		background: linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%);
	}
	
	
	
	#----------480-footer{}
	/* 8-29-17 added form above footer */
	.nsForm fieldset.formFieldset ol.formContainer {
		margin: 0 -10px;	
	}
	.nsForm fieldset.formFieldset ol.formContainer li {
		float: left;
		width: 50%;
		padding: 0 10px;
		clear: none;	
	}
	
	/* 1-12-18 added new field to form - the submit button needs extra styling now */
	.nsForm fieldset.formFieldset ol.formContainer li.rsform-block-submit {
		float: none;
		clear: both;
		width: 200px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px; 
	}
	

} /* end 480 */

@media only screen and (min-width: 48em) {
	
	#----------768-universal{}
	
	/* top blue bar starts to exist */
	/* magic number (15px on top/bottom of logo + 39px for topBar) */
	.siteHeader {
		padding-top: 54px;	
	}
	.siteHeaderTop {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #02448b;
		color: #fff;
		padding: 0 20px 0 0;
		font-family: "Ubuntu",sans-serif;
    	font-weight: 500;
		/*font-size: 0.815em;*/
		font-size: 0.9285em;
		text-transform: uppercase;
	}
	.siteHeaderTop::before,
	.siteHeaderTop::after {
		content: '';
		display: table;
		clear: both;
	}
	
	.nextSemesterStarts,
	.headerTopNav {
		float: right;	
	}
	
	.nextSemesterStarts {
		margin-left: 1em;
	}
	.nextSemesterStarts p {
		line-height: 1;
		margin: 1em 0;
	}
	.headerTopNav {
		
	}
	
	.headerTopNav .nav > li {
		float: left;
		line-height: 1;
		padding: 0.85em 1em;
		
		padding: 0.85em;	
	}
	
	.headerTopNav li.applyToday {
		background-color: #f0b50f;
	}
	
	.headerTopNav li.parent {
		position: relative;
	}
	
	.headerTopNav .nav-child {
		position: absolute;
		left: -9999px;
		top: 100%;
		background-color: #02448b;
		z-index: 6;
		padding-bottom: 0.5em;
	}
	.headerTopNav .nav-child > li {
		padding: 0.5em 1em;
		
		padding: 0.5em 0.85em;
	}
	.headerTopNav li:hover > .nav-child,
	.headerTopNav li:focus > .nav-child  {
		left: 0;	
	}
	
	.headerTopNav a {
		text-decoration: none;
		white-space: nowrap;
	}
	
	/* need to cancel some earlier styles */
	/*.siteHeader {
		box-shadow: none;	
	}*/
	.headerTopNav {
		margin: 0;	
	}
	.siteHeader .headerTopNav ul li:first-child {
		border-top: 0;
	}
	.siteHeader .headerTopNav li {
    	border-bottom: 0;
	}
	.headerTopNav .childicon {
		display: none;	
	}
	.siteHeader .headerTopNav .nav-child {
		height: auto;
		opacity: 1;
		transform: none;
		transition: none;
		width: auto;
	}
	
	/* dropdown styles transfer from siteHeaderContent to siteNav */
	.siteHeaderContent {
		box-shadow: none;	
		opacity: 1;	
		padding: 0;
		position: static;
		transition: none;	
	}
	.siteNav {
		background-color: #fff;
		box-shadow: 2px 2px 3px -3px #666;
		color: #5b5b5b;
		font-family: "Ubuntu",sans-serif;
		font-weight: 700;
		left: -9999px;
		opacity: 0;
		padding: 20px;
		position: absolute;
		top: 100%;
		transition: opacity 0.3s ease-in-out 0s;
		z-index: 5;
	}
	.siteNav.active {
		left: 0;
		opacity: 1;
	}
	
	
	/* compensate for really short pages */
	main {
		min-height: 650px;	
	}
	
	
	
	
	.ccWidget .cc-card::before {
		float: right;
		height: 130px;
		width: 50%;
		background-size: auto 100%;
	}
	.ccWidget .cc-card {
		min-height: 215px;	
	}
	
	
	#----------768-homepage{}
	
	/* hero nav starts to be inline and on top of hero image */
	.heroNav {
		max-width: 1400px;
		margin: -70px auto 0;
		position: relative;
		z-index: 4;
	}
	.heroNav li {
		width: 25%;
	}
	
	
	/*
	.hpCareerCoach {
		padding: 20px;	
	}

	.hpCareerCoachInner {
		position: relative;	
	}
	
	.hpccImage {
		position: absolute;
		width: 50%;
		height: 100%;
		top: 0;
		right: 0;	
	}
	
	.hpccContent {
		width: 50%;
		padding: 6.666%;	
	}
	*/
	
	
	/* news and events start to have columns */
	.hpNewsEvents {
		padding: 0 20px;	
	}
	
	.colWrap {
		margin: 0 -10px;	
	}
	.colWrap::after {
		content: '';
		display: block;
		clear: both;	
	}
	
	.hpEvents,
	.hpNews,
	.hpSpotlight {
		float: left;
		width: 33.3333%;
		padding: 0 10px;	
	}
	
	.hpEvents .eventList > li {
		display: block;	
	}
	
	
	/* these blocks are always the same height */
	.hpNewsEvents .colWrap {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-justify-content: flex-start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-webkit-align-content: stretch;
		-ms-flex-line-pack: stretch;
		align-content: stretch;
		-webkit-align-items: flex-start;
		-ms-flex-align: start;
		align-items: flex-start;
	}
	
	.hpEvents,
	.hpNews,
	.hpSpotlight {
		-webkit-order: 0;
		-ms-flex-order: 0;
		order: 0;
		-webkit-flex: 0 1 auto;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		-webkit-align-self: stretch;
		-ms-flex-item-align: stretch;
		align-self: stretch;
		
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	}
	
	.hpEvents .moduletable,
	.hpEvents .eventList {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		width: 100%;
		height: 100%;	
	}
	
	.hpEvents .eventList {
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;	
	}
	
	.hpEvents .eventList li {
		-webkit-flex: 0 1 50%;
		-ms-flex: 0 1 50%;
		flex: 0 1 50%;
		
		/* needs to be like this for IE10 */
		-webkit-flex: 1 0 auto;
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
		
		position: relative;
		
		
	}
	
	.hpNews .moduletable,
	.hpNews .eNewsflash {
    	display: -ms-flexbox;
    	display: -webkit-flex;
    	display: flex;
		width: 100%;	
	}
	
	.hpNews .eNewsflashItems {
		/*
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;	
		*/
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-direction: normal;
		-moz-box-direction: normal;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		/*
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-align-content: center;
		-ms-flex-line-pack: center;
		align-content: center;
		-webkit-box-align: center;
		-moz-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		*/
	}
	
	.hpNews .eNewsflashItem {
		/*
		-webkit-box-ordinal-group: 1;
    	-moz-box-ordinal-group: 1;
    	-webkit-order: 0;
    	-ms-flex-order: 0;
    	order: 0;
    	*/
		
	-webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
		/*
		-webkit-flex: 0 1 50%;
		-ms-flex: 0 1 50%;
		flex: 0 1 50%;
		*/
	}
	
	.eNewsflashContent {
		position: relative;
		height: 100%;
	}
	
	.flexbox .hpNews .eNewsflashItem .readmore {
		position: absolute;
		left: 1em;
		bottom: 1em;
		
		left: 0;
		bottom: 0;
	}
	
	
	/* all items now show */
	.eventList > li,
	.newsList > li {
		display: block;
		padding: 1em;
		border-top: 1px solid;	
	}
	
	.eventList > li:first-child,
	.newsList > li:first-child {
		border-top: 0;
	}
	
	
	.hpNews .eNewsflashItem.item-2 {
		display: block;	
	}
	.hpNews .eNewsflashItem {
		padding: 1em;	
	}
	.hpNews .eNewsflashItem + .eNewsflashItem {
		border-top: 1px solid;	
	}
	
	.hpSpotlight .moduletable {
		background-color: #fff;
		/* need this for IE11 */
		width: 100%;
	}
	
	
	/* program/path lists start to heve columns */
	.programPath ul > li {
		float: left;
		width: 50%;
		padding: 20px;
		margin-top: -20px;
		margin-bottom: 20px;
	}
	.programPath ul::after {
		content: '';
		display: block;
		clear: both;	
	}
	.programPath ul > li:nth-child(odd) {
		clear: left;
	}
	.programPath ul > li.active {
		width: 100%;
		position: relative;
		z-index: 1;
	}
	
	/* path list needs extra spacing on bottom */
	.homePaths.active {
		margin-bottom: 3em;	
	}
	
	
	.hpConnect {
		padding: 0 20px 20px;	
	}
	
	/* tweets now side by side */
	.eTweet {
		float: left;
		width: 50%;	
	}
	.eTweetInner {
		margin: 0;	
	}
	
	
	
	/*
	.eTweets::after {
		content: '';
		display: block;
		clear: both;	
	}
	.eTweets {
		background-color: #fff;	
		position: relative;
	}
	.eTweet {
		float: left;
		width: 50%;
		position: relative;	
	}
	.eTweetImage {
		float: left;
		width: 50%;
		padding-top: 50%;
	}
	.eTweetContent {
		float: right;
		width: 50%;	
	}
	*/
	
	
	
	
	
	
	
	
	
	
	#----------768-footer{}
	
	/* 8-29-17 added form above footer */
	.nsContent::after {
		content: '';
		display: block;
		clear: both;	
	}
	.nsText {
		float: left;
		width: 33%;
		padding-right: 20px;	
	}
	.nsForm {
		float: left;
		width: 67%;	
	}
	.nsForm fieldset.formFieldset {
		margin: 5px 0;	
	}
	
	
	/* footer starts to have columns */
	.footerLogo,
	.footerAddress,
	.footerMenu,
	.footerSocial {
		float: left;
		width: 25%;
		padding: 0 10px;	
	}
	.footerLogo a {
		display: block;
		max-width: 200px;	
	}
	
	
	
	
	
	#----------768-interior{}
	
	/* career coach rows start to have columns */
	/*.ccRow .col {
		float: left;
		width: 25%;
		padding: 0.25em 10px;
	}*/
	
	/* all cols > col are now in effect */
	.cols::after,
	.cols-3::after,
	.cols-4::after {
		content: '';
		display: block;
		clear: both;	
	}
	.cols,
	.cols-3,
	.cols-4 {
		margin: 0 -10px;	
	}
	.col {
		float: left;
		width: 50%;
		padding: 0 10px;
	}
	.cols-3 .col {
		width: 33.3333%;	
	}
	
	.cols .col:nth-child(odd) {
		clear: left;	
	}
	.cols-3 .col:nth-child(3n+1) {
		clear: left;	
	}
	.cols-4 .col:nth-child(4n+1) {
		clear: left;	
	}
	
	/* lists might just have the .cols class on them */
	ul.cols,
	ul.cols-3,
	ul.cols-4 {
		margin: 0.5em -10px;
		list-style: none;
		padding: 0;	
	}
	ul.cols > li {
		float: left;
		width: 50%;
		padding: 0.5em 10px;	
	}
	ul.cols-3 > li {
		float: left;
		width: 33.3333%;
		padding: 0.5em 10px;	
	}
	ul.cols-4 > li {
		float: left;
		width: 25%;
		padding: 0.5em 10px;	
	}
	ul.cols > li:nth-child(odd){
		clear: left;	
	}
	ul.cols-3 > li:nth-child(3n+1){
		clear: left;	
	}
	ul.cols-4 > li:nth-child(4n+1){
		clear: left;	
	}
	
	
	/* subnavBlocks now in columns */
	.subnavBlocks::after {
		content: '';
		display: block;
		clear: both;
	}
	.subnavBlocks li {
		float: left;
		width: 50%;
	}
	.subnavBlocks li:nth-child(odd) {
		clear: left;	
	}
	
	
	/* eColumns now in columns */
	.eColumnRow::after {
		content: '';
		display: block;
		clear: both;
	}
	.eColumnItem {
		float: left;
		width: 50%;
	}
	.eColumnItems .eColumnItem:nth-child(odd) {
		clear: left;	
	}
	
	
	/* aAltsections start to have alternating content columns */
	.eAltsection {
		display: table;
		width: 100%;
		max-width: 1480px;
		margin: 1em auto;	
	}
	.eAltsection.alt {
		direction: rtl;	
	}
	.eAltsectionTop,
	.eAltsectionBottom {
		display: table-cell;
		width: 50%;
		vertical-align: middle;
		direction: ltr;
	}
	
	
	/* eCallout sections start to have columns  */
	.eCalloutInner {
		position: relative;	
	}
	.eCalloutInner::after {
		content: '';
		display: block;
		clear: both;	
	}
	.eCallout.withImage {
		padding: 50px 20px;
	}
	.eCallout.light {
		background-color: #edf0f5;	
	}
	.eCallout.dark {
		background-color: #383838;	
	}
	.eCalloutContent {
		padding: 6.666% 7.2%;
		width: 50%;
	}
	.eCalloutImage {
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		width: 50%;
	}
	.eCallout.withImage.left .eCalloutContent {
		float: right
	}
	.eCallout.withImage.left .eCalloutImage{
		right: auto;
		left: 0;
	}
	
	/* cols in .eCallout blocks with no images act like tables */
	.eCallout .cols,
	.callout .cols {
		margin: 0;
		display: table;	
	}
	.eCallout .col,
	.callout .col {
		float: none;
		display: table-cell;
		vertical-align: middle;	
	}
	
	
	
	/* event blocks in gray backgrounds start to be in columns (pay-for-college page) */
	.grayBackground > .wrapper {
		max-width: 1400px;
		margin: 0 auto;	
	}
	.grayBackground .eventList::after {
		content: '';
		display: block;
		clear: both;	
	}
	.grayBackground .eventList {
		margin: 0 -0.5em;	
	}
	.grayBackground .eventList > li {
		margin: 0;
		float: left;
		width: 33.3333%;
		border-left: 0.5em solid #edf0f5;
		border-right: 0.5em solid #edf0f5;
	}
	
	.grayBackground .eventList > li:first-child {
			
	}
	
	
	
	#----------768-landing-pages{}
	.lp {
		margin: 0 -10px;	
	}
	.lp::after {
		content: '';
		display: block;
		clear: both;	
	}
	.lpContent {
		float: left;
		width: 66.6666%;
		padding: 0 20px 0 10px;	
	}
	.lpForm {
		float: left;
		width: 33.3333%;
		padding: 0 10px 0 20px;
		margin-top: -90px;
		position: relative;
		z-index: 9;
	}
	
	/* 1-12-18 Added another test landing page with form on left side */
	.apply3 .lpContent {
		float: right;
	}
	.apply3 .lpForm {
		float: left;
	}
	
	
	
	
} /* end 768 */



@media only screen and (min-width: 55.625em) {

/* homepage hero video starts to exist */
.eSliderBg {
	display: block;	
}

} /* end 890 */



@media only screen and (min-width: 64em) {

	
	#----------1024-universal{}
	
	
	/* headings get bigger */
	h1, .h1 {
		font-size: 2.8125em;	
	}
	
	
	#----------1024-footer{}
	/* 8-29-17 added form above footer */
	.nsContent {
		padding: 1em 40px;
		max-width: 1200px;
		margin: 0 auto;	
	}
	
	.withSidebar + .siteFooter .newsletterSignup {
		padding-left: 20%;
	}
	
	
	/* 1-12-18 added new field to form - squeeze the submit button in next to the new field */ 
	.nsForm fieldset.formFieldset ol.formContainer li.rsform-block-student-type {
		width: 30%
	}
	.nsForm fieldset.formFieldset ol.formContainer li.rsform-block-submit {
		float: left;
		clear: none;
		width: 20%;
		margin-left: 0;
		margin-right: 0;
		padding-top: 0; 
	}
	
	
	
	
	#----------1024-homepage{}
	
	/* these always show now */
	.homePrograms,
	.homePaths {
		height: auto;
		width: auto;
		margin: 0;
		overflow: inherit;
		position: relative;
		opacity: 1;
	}
	
	/* so there's no need for these buttons anymore.. */
	.programButton,
	.pathsButton {
		display: none;	
	}
	
	
	/* program/path lists go to 4 columns */
	.programPath ul > li {
		width: 25%;	
	}
	.programPath ul > li:nth-child(odd) {
		clear: none;
	}
	.programPath ul > li:nth-child(4n + 1) {
		clear: left;
	}
	
	
	/* more padding on left/right (from 0) */
	.hpEvents .eventList > li, 
	.newsList > li,
	.eventList > li {
		padding: 1em;	
	}
	/* from 1em */
	.hpSpotlight .eNewsflashContent {
		padding: 2em;	
	}
	
	
	/* more padding on left/right (from 20px) */
	.eTweetContent {
		padding: 40px 30px;
	}
	/* twitter images go back to being square */
	.eTweetImage {
		padding-top: 50%;	
	}


	#----------1024-interior{}
	
	.mainContent {
		padding: 20px 40px;	
	}
	/* need to increase width of "full-width" sections inside article content */
	/* from 3em -20px */
	.callout {
		margin: 3em -40px;
		/*padding: 40px;*/
	}
	
	/* sidebar starts to be on side */
	main.withSidebar > .mainContent {
		float: right;
		width: 80%;	
	}
	main.withSidebar > .asideContent {
		float: left;
		width: 20%;	
	}
	main.withSidebar::after {
		content: '';
		display: block;
		clear: both;	
	}
	
	.belowContent {
		clear: both;	
	}
	
	/* make the sidebar look like it's full-height */
	main.withSidebar {
		position: relative;	
	}
	main.withSidebar::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 20%;
		height: 100%;
		z-index: 0;
		background-color: #484848; /* gray (comps) */
		background-color: #02448b; /* blue */
	}
	main > aside {
		position: relative;
		z-index: 1;	
	}
	
	
	/* esubmenus go to three columns */
	.subnavBlocks {
		padding: 0 20px;
		max-width: 1480px;
	}
	.subnavBlocks li {
		width: 33.3333%;
	}
	.subnavBlocks li:nth-child(odd) {
		clear: none;	
	}
	.subnavBlocks li:nth-child(3n+1) {
		clear: left;	
	}
	
	
	
	.eColumns {
		padding: 20px;	
	}
	
	
	/* normal columns now have 40px space between */
	.cols {
		margin: 0 -20px;	
	}
	.col {
		padding: 0 20px;
	}
	
	ul.cols {
		margin: 1em -20px;
	}
	ul.cols > li {
		padding: 0 20px;	
	}
	
	
	/* alternating sections get more padding on left/right (from 20px) and top/bottom (from 0) */
	.eAltsectionTop, 
	.eAltsectionBottom {
		padding: 1em 40px;
	}
	
	
	
	/* accordion titles get more padding on top/bottom (from 0.75em) */
	.accordionTitle {
    	padding: 1.25em 1.5em 1.25em 0;
	}
	
	
	
	/* ccwidget now center-aligned */
	/*
	.ccWidget .cc-card {
		text-align: center;	
	}
	.cc-link {
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);	
	}
	*/
	
	.moduletable.grayBackground {
		padding: 20px 20px 40px;	
	}
	/* more spacing on top/bottom (from 0) */
	.grayBackground .eventList {
		margin: 40px -0.5em;	
	}
	/* from 1em */
	.grayBackground .eventList > li {
		padding: 2em;	
	}
	
	
	
	
	#----------1024-focus-areas{}
	/* add spacing on top/bottom */
	.focusArea {
		margin: 20px 0;	
	}
	
	
	
	
} /* end 1024 */


@media only screen and (min-width: 64.0625em) {
	
	/* safe to show the auto-playing hero videos now */
	.eSlideBackground video {
		display: block;	
	}
	
	

} /* end 1025 */



@media only screen and (min-width: 70.625em) {
	#----------1130-universal{}
	/* menu goes to regular */
	.navicon {
		display: none;	
	}
	
	.siteNav {
		padding: 0;
		box-shadow: none;
		position: relative;
		left: 0;
		opacity: 1;
		transition: none;
	}
	
	.siteNav .nav {
		border: 0;
		float: right;
	}
	
	.siteNav ul li:first-child {
		border: 0;
	}
	.siteNav li {
		border: 0;
	}
	.siteNav .nav > li {
		float: left;
		padding: 0.5em 1em;	
	}
	.siteNav .nav > li:last-child {
		padding-right: 0;	
	}
	.siteNav li.parent {
		position: relative;	
	}
	.siteNav .nav-child {
		position: absolute;
		left: 0;
		top: 100%;
		width: auto;
		background-color: #fff;
		white-space: nowrap;
		padding-bottom: 0.5em;
		border: 1px solid #dcdcdc;
	}
	.siteNav .nav-child li {
		padding-left: 1em;
		padding-right: 1em;	
	}
	.siteNav li.active ul li:last-child {
		padding-bottom: 0.5em;
	}
	
	.childicon {
		margin-left: 0;
		border: 0;
		text-align: right;
		width: 20px;	
	}

} /* end 1130 */




@media only screen and (min-width: 75em) {

	
	#----------1200-interior{}

	



} /* end 1200 */




@media only screen and (min-width: 82.5em) {

	
	#----------1320-interior{}
	
	/* from 20px 40px */
	.mainContent {
		padding: 40px 80px;	
	}
	
	.callout {
		margin: 3em -80px;
		padding: 20px 40px;
	}
	
	
	/* normal columns now have 76px space between */
	.cols {
		margin: 0 -38px;	
	}
	.col {
		padding: 0 38px;
	}
	
	ul.cols {
		margin: 1em -38px;
	}
	ul.cols > li {
		padding: 0 38px;	
	}
	
	
	#----------1320-landing-pages{}
	.lpForm {
		margin-top: -120px;	
	}
	
	
	#----------1320-focus-areas{}
	/* more spacing on top */
	.focusArea {
		margin-top: 30px;	
	}
	
	
	#----------1320-footer{}
	/* 8-29-17 added form above footer */
	.withSidebar + .siteFooter .nsContent {
		padding: 1em 80px;
		max-width: 1160px;
		margin: 0;
	}
	
	

} /* end 1320 */



@media only screen and (min-width: 88.75em) {
	#----------1420-universal{}
	/* main menu gets taller */
	.siteHeader {
		padding-top: 60px;
		padding-bottom: 20px;	
	}
	
	
	/* header starts to be fixed */
	/* 7-24-20 Disabled this for new module position above site header */
	/*
	.siteHeader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 11;
		background-color: #fff;
		
		-webkit-transition: all .25s ease-out;
		transition: all .25s ease-out;
	}
	*/
	
	.siteHeader.headerUp {
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		transform: translateY(-100%);	
	}
	.siteHeader.headerDown {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);	
	}
	
	
	/* what if the submenu is open? */
	.siteHeader.headerUp .nav-child {
		display: none;	
	}
	
	
	/* hover states for drop downs */
	.siteHeader .parent:hover > .nav-child {
		left: 0;
		height: auto;
		opacity: 1;
		padding-top: 0.5em;
		transform: scale(1);
	}
	
	
	
	
	.eCallout.withImage {
		padding: 80px 20px;
	}
	
	
	.hpNewsEvents h2 {
		padding: 2.5em 0;	
	}
	
	.hpConnect {
		padding-bottom: 60px;	
	}
	.hpConnect h2 {
		padding: 2.5em 0;	
	}
	
	
	/* from 40px 80px */
	.mainContent {
		padding: 50px 80px;
	}
	
	
	
	/* from 20px */
	.eColumns {
		padding: 40px 20px;
	}
	
	
	/* from 20px */
	.subnav {
		padding: 40px 0;
	}
	
	/* less padding (from 20px) */
	.subnavBlocks {
		padding: 0 15px;	
	}
	
	/* more padding (from 20px) */
	.subnavBlocks li {
		padding: 25px;
	}
	
	
	
	
	
	/* 11-27-17 added chat now above footer */
	/* it becomes fixed at this point */
	.nccChatNowButton {
		position: fixed;
		bottom: 46px;
		right: 40px;
		background-color: #3c9ee5;
		border-radius: 5px;
		box-shadow: 0 2px 4px -2px #ccc;	
	}
	
	
	.lookingFor {
		padding: 2.5em 20px;	
	}
	.footer {
		padding: 40px 20px	
	}
	

} /* end 1420 */



@media only screen and (min-width: 100em) {
	
	
	#----------1600-interior{}
	
	/* more padding on top/bottom (from 50px) */
	.eCallout.withImage {
		padding: 80px 20px;
	}
	
	
} /* end 1600 */


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */
.hide,
.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.skip-to-main.visuallyhidden.focusable:active,
.skip-to-main.visuallyhidden.focusable:focus {
	padding: 0.75em 1.5em;
	margin: 0.75em;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}