/* 

	Theme Name: Global Parent Theme
	Theme URI: https://icc.edu/global/
	Description: Global CSS for ICC.edu
	Author: Web Services
	Version: (2.0)
		
		
	››››››››››››››››››››››››››››››››››››››››  TABLE OF CONTENTS  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹
	 	all line numbers are estimates

		GLOBAL ................................................  
			APPLY LAYOUT ......................................  
			APPLY POSITIONS ...................................  
			APPLY FONT-SIZES ..................................  
			APPLY FONT-WEIGHTS ................................  
			APPLY CORNERS .....................................  
			APPLY ICONS .......................................  
			APPLY ANIMATIONS ..................................  
		
		GLOBAL ALERT ..........................................  
		
		GLOBAL HEADER .........................................  
			GLOBAL NAV ........................................  
		
		GLOBAL CONTENT ........................................  
			GLOBAL HEADERS ....................................  
			COLORS ............................................  
		
		GLOBAL FOOTER .........................................  
			FOOTER LOGO .......................................  
			FOOTER CONTENT ....................................  
		
		SITE ..................................................  
		
		SITE HEADER ...........................................  
			SLIDER TABS .......................................  
		
		SITE NAV ..............................................  
			MOBILE SITE NAV ...................................  
			PRIMARY MENU ITEMS ................................  
			SECONDARY MENU ITEMS ..............................  
			TRINARY MENU ITEMS ................................  
			SUBMENU TOGGLE ....................................  
			CURRENT MENU ITEM .................................  
		
		IMAGE NAV .............................................  
		
		SITE CONTENT ..........................................  
			SITE HEADERS ......................................  
			FEATURED IMAGE ....................................  
			BREADCRUMBS .......................................  
			IMAGES ............................................  
			SECTION COMPARTMENTS ..............................  
			EMPHASIS BUTTONS ..................................  
			FLEX COMPARTMENTS .................................  
			FLEX COMPARTMENTS COLOR SCHEMES ...................  
			DATE SELECTOR .....................................  
			CONTACT INFO ......................................  
			EMPHASIS BUTTONS ..................................  
			GET MORE/ADD-POST BUTTONS .........................  
			FORM CLOSED .......................................  
			DATA TABLE ........................................  
			ACCORDIAN .........................................  
		
		FRONTPAGE EVENTS, NEWS and ACADEMIC CALENDAR ..........  
			EVENTS ............................................  
			NEWS ..............................................  
			ACADEMIC CALENDAR .................................  
		
		SITE ASIDE ............................................  
			CONTACT INFO ......................................  
		
		SITE FOOTER ...........................................  
		
		PLUGIN OVERRIDES ......................................  
			THE EVENTS CALENDAR PRO ...........................  
			VISUAL FORM BUILDER PRO ...........................  

        SEARCH ICON NAV .......................................

*/

/*  ››››››››››››››››››››››››››››››››››››››››
	››››››››››››››››››››››››››››››››››››››››  ONE OFF SLIDER FIXES ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

	#col-background-president {
		background-position: 20% !important;
	}

	#slider-after-hours {
		background-position: center right !important;
	}

	#slider-open-house {
		background-position: top center !important;
	}

    #slider-enrollment {
		background-position: 50% 30% !important;
	}

    #slider-fall-enrollment {
        background-position: 50% 30% !important;
    }

	#slider-coronavirus section {
		background-color: #202020 !important;
		border: 1px solid #0e0d0d;
		width: auto !important;
	}

		#slider-coronavirus section h2 {
			font-size: 2.3em !important;
			border: none !important;
			margin: 10px 10px !important;
			padding-bottom: 0px !important;
		}

		#slider-coronavirus section h2 {
			text-decoration: underline;
		}


/*BANNER*/
.page-template-landing .featured-image,
.page-template-blank-slate.page-virtualservices .featured-image{
    padding-top:18.75%;
    height:0;
}
	/*  ›››››››››››››››››››››››››››››››››››››
	›››››››››››››››››››››››››››››››››››››  coronavirus Landing page ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

	.page-coronavirus #site-content {
		display: flex;
		flex-direction: column-reverse;
	}

	.page-coronavirus #site-content > div:nth-of-type(1){
 		width: calc(100% - 10px);
	}

	.page-coronavirus #site-content > div:nth-of-type(2){
		width: calc(100% - 10px);
	}
	
		.page-coronavirus #site-content > div:nth-of-type(2) ul {
			padding: 0 0 0 30px;
		}

	@media screen and (min-width:900px) {

		.page-coronavirus #site-content {
			display: flex;
			flex-direction: row;
		}

		.page-coronavirus #site-content > div:nth-of-type(1){
			width: calc(65% - 10px);
	   	}
		.page-coronavirus #site-content > div:nth-of-type(2){
			width: calc(35% - 10px);
		}
	}

	
/*  ››››››››››››››››››››››››››››››››››››››››
	››››››››››››››››››››››››››››››››››››››››  GLOBAL  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */
	
	@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	word-wrap:break-word;
}

html {
	font-size:100%;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-o-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}

body {
	background-color:#ffffff;
	color:#252525;
	font-family:"Open Sans",sans-serif;
	font-size:16px;
	-webkit-font-smoothing:antialiased;
	line-height:normal;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

main {
	display: block;
}

a {
	color:#21669c;
    text-decoration: none;
/*	border-bottom:1px dotted;*/
}
	a:hover {
		color:#111111;
	}

/*
#site-content a {
    border-bottom:1px dotted; 
}
*/

p.anchor-link {
    display: block;
    position: relative;
    margin: 0;
    top: -50px;
    scroll-behavior: smooth;
    visibility: hidden;
}
    p.anchor-link a {
        scroll-behavior: smooth;
    }

nav ul,
ul#slides,
#site-header ul.slides_tabs,
ul.image-nav,
#site-content ul.two-column,
#site-content ul.buttons,
#site-content .compartments section > ul.buttons,
#site-content ul.accordian,
#site-content ul.accordian ul,
.frontpage > div section ul {
	list-style:none;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

nav a {
	text-decoration:none;
}


p.or {
	font-size: 1.4em;
	font-weight: 600;
	margin: 10px 0;
}

.red {
    color: red;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  APPLY LAYOUT  */

html,
body {
	height:100%;
}

.container,
ul#slides li > div {
	margin:0 auto 0 auto;
	max-width:1280px;
	width:100%;
}

/* layout containers clear floating objects */
.container:after,
#global-alert > div:first-of-type:after,
#global-id:after,
#global-footer > div:first-of-type:after,
#site-header:after,
#main-slider:after,
#main-slider ul#slides:after,
#main-slider ul#slides li:after,
ul#slides li > div:after,
#site > div:first-of-type:after,
section:after,
#site-content:after,
#site-content ul.buttons:after,
#site-content ul.accordian:after,
ul.image-nav:after,
.compartments:after,
#events:after,
.frontpage #site-content > div:after,
#site-footer > div:first-of-type:after,
#site-footer:before {
	clear:both;
	content:"";
	display:table;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  APPLY POSITIONS  */

#global-alert,
#global-id > div:nth-of-type(1) a,
#main-menu ul li,
#main-menu ul#user-nav div:nth-of-type(1) > li,
#global-footer,
#global-footer div > div a,
#site,
#site-header,
h1 a,
ul.menu li,
#site-content tbody tr td.special,
#site-content tbody tr td.retreat,
.frontpage .calendar ul li,
.frontpage .calendar .date-time,
.frontpage .calendar .location,
.contact-info h2,
.contact-info p,
ul.image-nav li a {
	 position:relative;
}

#global-id > div:nth-of-type(1) a:after,
#main-menu ul li ul,
ul#slides li > div > section,
h1 a:after,
#global-footer div > div a:after,
#site-header ul.slides_tabs,
.submenu-toggle,
.menu-item-has-children > div.down:after,
.menu-item-has-children > div.up:after,
.current-menu-parent > div.up:after,
ul.menu > li.current-menu-item > a:after,
ul.menu > li.current-page-ancestor > a:after,
ul.sub-menu > li.current-menu-item > a:after,
ul.sub-menu > li.current-page-ancestor > a:after,
#site-content tbody tr td.special:before,
#site-content tbody tr td.retreat:before,
.frontpage .calendar .date,
.frontpage .calendar .end-date,
.frontpage .calendar .date-time:before,
.frontpage .calendar .location:before,
.contact-info h2:before,
.contact-info p:before,
.contact-info span:before,
ul.image-nav li a:after {
	position:absolute;
}


@media screen and (min-width:768px) {
	ul.image-nav li a h3 {
		position:absolute;
	}
}


@media screen and (min-width:1024px) {
	#main-menu ul li ul li > a:after {
		position:absolute;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  APPLY FONT-SIZES  */

#site-content ul.accordian li ul li a {
	 font-size:inherit;
}

#site-header ul.slides_tabs li a {
	font-size:0;
}

h1 a:after {
	font-size:0.4em;
}

.frontpage .calendar .end-date .month {
	font-size:0.571em;
}

#breadcrumbs {
	font-size:0.625em;
}

#main-menu ul li a {
	font-size:0.688em;
}

#global-id > div:nth-of-type(2),
#global-footer p:nth-of-type(n+4),
ul#slides li > div > section p,
ul.menu ul.sub-menu li a,
.submenu-toggle,
#site-content .tiny,
#site-content ul.buttons li a,
#site-content table,
.get-more a,
.frontpage .calendar .date-time,
.frontpage .calendar .location,
.contact-info p {
	font-size:0.75em;
}

#global-id > div:nth-of-type(1) a,
#global-footer,
ul.menu li a {
	font-size:0.813em;
}

.frontpage .calendar .end-date .day {
	font-size:0.833em;
}

#mobile-nav > div,
#site-nav #site-mobile-nav a,
#site-content > ul,
#site-content > ol,
#site-content ul.catalog,
.frontpage .calendar .date .month {
	font-size:0.875em;
}

#site-content ul.buttons,
.contact-info p.office-name,
.contact-info p.title,
.contact-info p.occupation,
ul.image-nav li a h3,
#site-content ul.accordian li a {
	font-size:1em;
}

#site-content blockquote,
.contact-info h2 {
	font-size:1.125em;
}

#site-content thead tr {
	font-size:1.167em;
}

#global-footer section h2 {
	 font-size:1.375em;
}

#global-footer section h2 strong,
#site-content > h4,
#site-content > h5,
#site-content > h6,
#site-content .container > h4,
#site-content .container > h5,
#site-content .container > h6,
#site-content form h4,
#site-content form h5,
#site-content form h6,
#site-content #programs h4,
#site-content #programs h5,
#site-content #programs h6,
.frontpage .calendar .date .day,
.contact-info h2:before {
	font-size:1.5em;
}

ul#slides li > div > section h2 {
	font-size:1.7em;
}

#site-content > h2,
#site-content > h3,
#site-content .container > h2,
#site-content .container > h3,
#site-content form h2,
#site-content form h3,
#site-content blockquote h3,
#site-content aside > h3 {
	font-size:2em;
}

#site-content > h2:first-of-type,
#site-content .container > h2:first-of-type {
	font-size:2.3em;
}

h1 {
	font-size:2.5em;
}


@media screen and (min-width:768px) {
	ul.image-nav li a h3 {
		font-size:0.875em;
	}
}


@media screen and (min-width:1024px) {
	#main-menu ul#org-nav > li > a {
		font-size:0.813em;
	}
	
	ul.image-nav li a h3 {
		font-size:1.375em;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  APPLY CORNERS  */

ul#slides li > div > section,
ul.image-nav li,
ul.image-nav li a,
#site-content ul.buttons li,
#site-content ul.buttons li a,
.image-link div {
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
}

article header .imagery {
	-moz-border-radius:3px 3px 0 0;
	-webkit-border-radius:3px 3px 0 0;
	border-radius:3px 3px 0 0;
}

@media screen and (min-width:768px) {
	ul.image-nav li a h3 {
		-moz-border-radius:0 0 5px 5px;
		-webkit-border-radius:0 0 5px 5px;
		border-radius:0 0 5px 5px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  APPLY ICONS  */

#global-id > div:nth-of-type(1) a:after,
#global-id > div:nth-of-type(2) a:before,
h1 a:after,
#global-footer div > div a:after,
#site-nav #site-mobile-nav a:before,
.menu-item-has-children > div.down:after,
.menu-item-has-children > div.up:after,
.current-menu-parent > div.up:after,
ul.menu > li.current-menu-item > a:after,
ul.menu > li.current-page-ancestor > a:after,
ul.sub-menu > li.current-menu-item > a:after,
ul.sub-menu > li.current-page-ancestor > a:after,
ul.image-nav li a:after,
#site-content tbody tr td.special:before,
#site-content tbody tr td.retreat:before,
.get-more a:after,
.add-post a:before,
article footer:before,
.frontpage .calendar .date-time:before,
.frontpage .calendar .location:before,
.contact-info h2:before,
.contact-info p:before,
.contact-info span:before {
	font-family:fontawesome;
}
/* home */
#global-id > div:nth-of-type(1) a:after,
h1 a:after,
#global-footer div > div a:after,
ul.menu > li.current-menu-item > a:after,
ul.menu > li.current-page-ancestor > a:after,
ul.sub-menu > li.current-menu-item > a:after,
ul.sub-menu > li.current-page-ancestor > a:after  {
	content:"\f015";
}
/* down chevon arrow */
.menu-item-has-children > div.down:after {
	content:'\f078';
}
/* menu bars */
#global-id > div:nth-of-type(2) a:before,
#site-nav #site-mobile-nav a:before {
	content:"\f0c9";
}
/* x */
.menu-item-has-children > div.up:after,
.current-menu-parent > div.up:after {
	content:'\f00d';
}
/* arrow-circled pointing right */
ul.image-nav li a:after,
.get-more a:after {
	content:"\f0a9";
}
/* calendar */
article footer:before {
	content:"\f073";
}
/* info-circled */
.contact-info h2:before {
	content:"\f05a";
}
/* letter */
.contact-info .email:before {
	content:"\f0e0";
}
/* wayfind marker */
.contact-info p.address:before {
	content:"\f124";
}
/* location marker */
.frontpage .calendar .location:before,
.contact-info p.office:before {
	content:"\f041";
}
/* phone */
.contact-info .phone:before {
	content:"\f095";
}
/* fax */
.contact-info p.fax:before {
	content:"\f1ac";
}
/* clock */
.frontpage .calendar .date-time:before,
.contact-info p.hours:before,
.contact-info p.seasonal-hours:before {
	content:"\f017";
}
/* certificate */
.contact-info p.cert:before {
	content:"\f0a3";
}
/* plus squared */
#site-content .add-post a:before,
#site-content tbody tr td.special:before {
	content:"\f0fe";
}
/* pencil squared */
#site-content tbody tr td.retreat:before {
	content:"\f14d";
}


@media screen and (min-width:1024px) {
	#main-menu ul li > a:after,
	#main-menu ul li ul li > a:after {
		font-family:fontawesome;
	}
	/* down chevon arrow */
	#main-menu ul li > a:after {
		content:'\f078';
	}
	/* right chevon arrow */
	#main-menu ul li ul li > a:after {
		content:'\f054';
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  APPLY ANIMATIONS  */

@-moz-keyframes fadein {
	from { opacity:0; } to { opacity:1; }
}
@-webkit-keyframes fadein {
	from { opacity:0; } to { opacity:1; }
}
@keyframes fadein {
	from { opacity:0; } to { opacity:1; }
}


#global-id > div:nth-of-type(1) a,
#global-id > div:nth-of-type(1) a:after,
h1 a,
h1 a:after,
h1 a:hover,
h1 a:hover:after,
#global-footer div > div a,
#global-footer div > div a:after,
#global-footer div > div a:hover,
#global-footer div > div a:hover:after,
#site-nav,
#site-nav a,
#site-nav a:hover,
ul.menu > li.current-menu-item > a:after,
ul.menu > li.current-page-ancestor > a:after,
ul.sub-menu > li.current-menu-item > a:after,
ul.sub-menu > li.current-page-ancestor > a:after,
ul.image-nav li,
ul.image-nav li:hover,
ul.image-nav li a,
ul.image-nav li:hover a,
ul.image-nav li a h3,
ul.image-nav li:hover a h3,
#site-content article header .imagery a,
#site-content article header .imagery a:hover,
#site-content article header h3 a,
#site-content article header h3 a:hover,
#site-content article header .imagery:hover + h3 a,
.get-more a,
.get-more a:hover,
.get-more a em,
.get-more a:hover em,
.add-post a,
.add-post a:hover,
.add-post + .get-more,
.add-post:hover + .get-more,
#site-content ul.accordian li > a,
#site-content ul.accordian li > a:hover,
#site-content ul.accordian li ul li > a,
#site-content ul.accordian li ul li > a:hover {
	transition:all 0.5s ease-in-out;
}

/* HOME ICON ANIMATION: To add this animation, the style must be added to APPLY POSITIONS (position:absolute;), APPLY ICONS (font-family:fontawesome;content:"\f015";) and APPLY ANIMATIONS (transition:all 0.5s ease-in-out;). Additionally, color, font-size, right and top values may need to be adjusted. */
#global-id > div:nth-of-type(1) a:after,
h1 a:after,
#global-footer div > div a:after,
ul.menu > li.current-menu-item > a:after,
ul.menu > li.current-page-ancestor > a:after,
ul.sub-menu > li.current-menu-item > a:after,
ul.sub-menu > li.current-page-ancestor > a:after  {
	color:#111111;
	opacity:0;
}
#global-id > div:nth-of-type(1) a:hover:after,
h1 a:hover:after,
#global-footer div > div a:hover:after,
ul.menu > li.current-menu-item > a:hover:after,
ul.menu > li.current-page-ancestor > a:hover:after,
ul.sub-menu > li.current-menu-item > a:hover:after,
ul.sub-menu > li.current-page-ancestor > a:hover:after  {
	opacity:1;
}

h1 a:after {
	right:-50px;
	top:15px;
}
h1 a:hover:after {
	right:-30px;
}

#global-footer div > div a:after {
	bottom:22px;
	color:#ffd659;
	right:30px;
}
#global-footer div > div a:hover:after {
	right:50px;
}

ul.menu > li.current-menu-item > a:after,
ul.menu > li.current-page-ancestor > a:after,
ul.sub-menu > li.current-menu-item > a:after,
ul.sub-menu > li.current-page-ancestor > a:after  {
	right:10px;
	top:18px;
}
ul.menu > li.current-menu-item > a:hover:after,
ul.menu > li.current-page-ancestor > a:hover:after,
ul.sub-menu > li.current-menu-item > a:hover:after,
ul.sub-menu > li.current-page-ancestor > a:hover:after   {
	right:30px;
}


@media screen and (min-width:768px) {
	#global-id > div:nth-of-type(1) a:after {
		color:#ffd659;
		right:-530px;
		top:15px;
	}
	#global-id > div:nth-of-type(1) a:hover:after {
		right:-510px;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  GLOBAL ALERT  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

Our #global-alert goes across the top of every site displaying a critical alert that we can't afford for student, faculty or staff to miss.  */

/* red - alert */
/*#global-alert {
	background-color:#a93835;
}*/

/* yellow caution */
#global-alert {
	background-color:#ffd659;
}

#global-alert div {
	font-size:0.75em;
	margin:0 auto 0 auto;
	max-width:1280px;
	padding:10px 10px 10px 10px;
}

#global-alert div p {
	color:#ffffff;
	margin:0 0 0 0;
}

/* for red alert */
/*#global-alert div p {
	color:#ffffff;
}*/
/* for yellow caution */
#global-alert div p {
	color:#252525;
}

/* for red alert */
/*#global-alert a {
	border-bottom:1px dotted;
	color:#ffd659;
}
#global-alert a:hover {
	color:#ffffff;
}*/
/* for yellow caution */
#global-alert a {
	border-bottom:1px dotted;
	color:#21669c;
}
#global-alert a:hover {
	color:#ffffff;
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  GLOBAL HEADER  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

This global-header should be common across the majority of websites under Illinois Central College (exception: arts). It hold the global-nav that consists of two separate navigations. The first is the #user-nav, which is navigation based upon audience (student, alumni, faculty and staff, etc...). The second is the #org-nav, which is based around the organization of the college and contains options that extend across many audiences.  */

#global-header {
	background-color:#252525;
	z-index:100;
}
#global-header:after {
	clear:both;
	content:"";
	display:table;
}

nav {
	display:block;
	position:relative;
}


@media screen and (min-width:768px) {
	#global-header {
		background:linear-gradient(to bottom,#252525 0%,#252525 50%,#252525 50%,#21669c 50%,#21669c 100%);
	}
	
	nav {
		margin:0 auto 0 auto;
		max-width:1280px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  MOBILE NAV

First div is the vertical icon and wordmark for the college. Second div is menu bars icon with the word menu beside it for technophobs.  */

#global-id {
	background-color:#21669c;
}

#global-id > div {
	float:left;
	height:50px;
	margin:0 10px 0 10px;
}
#global-id > div:nth-of-type(1) {
	width:-webkit-calc(100% - 115px);
	width:calc(100% - 115px);
}
#global-id > div:nth-of-type(2) {
	padding:16px 10px 0 0;
	text-align:right;
	text-transform:uppercase;
	width:75px;
}

#global-id > div:nth-of-type(1) a {
	background-color:#ffffff;
	background-image:url(/wp-content/uploads/global-nav-icc-logo.png);
	background-position:0 -50px;
	background-repeat:no-repeat;
	background-size:100%;
	color:#252525;
	display:block;
	height:100%;
	text-indent:-100px;
	width:216px;
}
#global-id > div:nth-of-type(1) a:hover {
	background-color:#ffd659;
}

#global-id > div:nth-of-type(2) a {
	color:#ffd659;
}
#global-id > div:nth-of-type(2) a:before {
	padding:0 5px 0 0;
}


@media screen and (min-width:768px) {
	#global-id {
		background-color:#252525;
	}
	
	#global-id > div:nth-of-type(1) {
		position:absolute;
	}
	#global-id > div:nth-of-type(2) {
		display:none;
	}
	
	#global-id > div:nth-of-type(1) a {
		background-position:0 0;
		background-size:auto 100px;
		text-indent:-500px;
		width:25px;
	}
}


@media screen and (min-width:1280px) {
	#global-id > div:nth-of-type(1) a {
		background-size:100%;
		width:216px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  MENU OPTIONS  */

#main-menu {
	display:none;
}

#main-menu > ul {
	float:left;
	margin:10px 0 20px 0;
	padding:10px 10px 10px 10px;
	width:50%;
}
#main-menu ul#user-nav {
	border-right:1px solid rgba(255,255,255,0.2);
}
#main-menu ul.mobile-only {
	width:100%;
	padding-right:5px;
	margin-bottom:10px;
}

#main-menu ul li a {
	color:#ffffff;
	display:block;
	font-weight:600;
	padding:10px 10px 10px 10px;
	text-transform:uppercase;
}
#main-menu ul#user-nav li a {
	font-weight:400;
	text-align:right;
}
/* highlight My ICC menu option */
#main-menu ul#user-nav > li:nth-of-type(2) > a,
.blogid-6 #main-menu ul#user-nav > li:nth-of-type(3) > a {
	color:#ffd659;
	font-weight:600;
}

/* quicklinks for mobile only */
#main-menu ul.mobile-only li {
	float:left;
	margin:0 5px 5px 0;
	width:-webkit-calc(33.333% - 5px);
	width:calc(33.333% - 5px);
}
#main-menu ul.mobile-only li:nth-of-type(3n+1) {
	clear:left;
}

#main-menu ul.mobile-only li a {
	background-color:rgba(255,255,255,0.1);
	font-weight:400;
	padding-left:5px;
	padding-right:5px;
	text-align:center;
}

/* hide/show additional options for faculty and staff */
#main-menu ul#user-nav > li:nth-of-type(3),
#main-menu ul#for-faculty-staff.mobile-only,
.blogid-6 #main-menu ul#user-nav > li:nth-of-type(2),
.blogid-6 #main-menu ul#non-faculty-staff.mobile-only {
	display:none;
}
.blogid-6 #main-menu ul#user-nav > li:nth-of-type(3),
.blogid-6 #main-menu ul#for-faculty-staff.mobile-only {
	display:block;
}


@media screen and (min-width:768px) {
	#main-menu {
		display:block;
	}
	
	#main-menu > ul {
		height:50px;
		float:none;
		margin:0 10px 0 10px;
		padding:0 0 0 0;
		width:-webkit-calc(100% - 20px);
		width:calc(100% - 20px);
	}
	#main-menu ul#user-nav {
		border:none;
		float:right;
		width:auto;
	}
	#main-menu ul#org-nav {
		clear:right;
	}
	
	#main-menu ul#user-nav > li,
	#main-menu ul#org-nav > li {
		float:left;
	}
	#main-menu ul#user-nav > li:nth-of-type(1) {
		display:none;
	}
	
	#main-menu ul li a {
		padding:18px 8px 17px 8px;
	}
	#main-menu ul#user-nav li a {
		text-align:left;
	}
	#main-menu ul#user-nav li:hover > a {
		background-color:#333333;
	}
	#main-menu ul#org-nav li:hover > a {
		background-color:#246ea9;
	}
	
	#main-menu ul.mobile-only,
	.blogid-6 #main-menu ul#for-faculty-staff.mobile-only {
		display:none;
	}
}


@media screen and (min-width:1024px) {
	#main-menu ul#user-nav > li > a,
	#main-menu ul#org-nav > li > a {
		padding-left:10px;
		padding-right:10px;
	}
	#main-menu ul#org-nav > li > a {
		font-weight:400;
		padding-top:15px;
	}
	
	#main-menu ul li > a:after {
		color:rgba(255,255,255,0.5);
		padding:0 0 0 5px;
	}
	#main-menu ul li ul li > a:after {
		right:5px;
		top:50%;
		transform:translateY(-50%);
	}
	#main-menu ul#user-nav li > a:only-child:after,
	#main-menu ul#org-nav li > a:only-child:after {
		content:'';
	}
	#main-menu ul li:hover > a:after,
	#main-menu ul > li:hover > a:after {
		color:#ffffff;
	}
	
	#main-menu ul li:hover > ul {
		display:list-item;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  MENU OPTIONS — SECOND LEVEL  */

#main-menu ul li ul {
	display:none;
	padding:10px 10px 10px 10px;
	position:absolute;
	top:50px;
	width:245px;
	z-index:100;
}
#main-menu ul#user-nav li ul {
	background-color:#333333;
}
#main-menu ul#org-nav li ul {
	background-color:#246ea9;
}

/* causes faculty and staff drop down to originate from the right so it doesn't go off screen */
#main-menu ul#user-nav > li:nth-of-type(n+6) > ul {
	right:0;
}

#main-menu ul li ul li {
	float:none;
}

#main-menu ul li ul li a {
	border-bottom:1px solid rgba(255,255,255,0.2);
	padding-bottom:10px;
	padding-right:10px;
	padding-top:10px;
}
#main-menu ul#org-nav li ul li a {
	font-size:11px;
	font-weight:400;
}
#main-menu ul#user-nav li ul li:hover a {
	background-color:#111111;
}
#main-menu ul#org-nav li ul li:hover a {
	background-color:#1c5582;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  MENU OPTIONS THIRD LEVEL  */

#main-menu ul li ul li ul {
	top:-10px;
	right:-245px;
}
#main-menu ul#user-nav li ul li ul {
	background-color:#111111;
}
#main-menu ul#org-nav li ul li ul {
	background-color:#1c5582;
}
#main-menu ul#user-nav li:nth-of-type(n+6) ul li ul {
	left:-245px;
	right:auto;
}

#main-menu ul#user-nav li ul li ul li:hover a {
	background-color:#252525;
}

#main-menu ul#org-nav li ul li ul li:hover a {
	background-color:#21669c;
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  GLOBAL CONTENT  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  GLOBAL HEADERS  */

h1 {
	font-weight:300;
	margin:0 0 0 0;
	padding:20px 10px 20px 10px;
}
.error404 h1 {
	text-align:center;
	padding-bottom:0;
}


@media screen and (min-width:1024px) {
	h1 {
		padding-bottom:30px;
		padding-top:30px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  COLORS  */

.white {
	color: #ffffff;
}

.black {
	color: #252729;
}

.blue {
	color: #21669c;
}

.dark-blue {
	color: #164569;
}

.dark-yellow {
	color: #ccab47;
}

.green {
	color: #1ba965;
}

.light-blue {
	color: #77b7e8;
}

.orange {
	color: #cf5217;
}

.red {
	color: #ff4c47;
}

.violet {
	color: #9932cc;
}

.yellow {
	color: #ffea1d;
}

.gold {
	color: #ffd659;
}



/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CHAT WIDGET  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

The Learning Lab has adopted the same chat widget that the Library uses.  */

.chat-button {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
    justify-content: space-between;
    margin: 0 0 10px 0;
}

.chat-button strong {
    margin-right: 20px;
}

.chat-button .libraryh3lp {
    margin: 10px 20px 0px 0px;
}

.chat-button > p:empty {
/*	display: none;*/
}

.chat-button span {
	display: block;
}

.libraryh3lp {
    align-self: flex-start;
	background-color:#dddddd;
    border-radius: 5px;
	color:#666666;
	height:36px;
	font-size:100%;
    flex-grow: 1;
	position:relative;
	text-align:center;
	text-transform:uppercase;
/*    margin: 10px 0;*/
	 max-width:200px; 
}

.libraryh3lp a {
	background-color: #1ba965;
    border-radius: 5px;
	color:#ffffff;
	display:block;
	font-size:90%;
	font-weight:500;
	height:100%;
	padding:5px 15px 5px 15px;
	/* position:absolute; */
	text-decoration:none;
	text-transform:uppercase;
	transition: all 0.5s ease-in-out;
	top:0;
	width:100%;
}
.libraryh3lp a:before {
	content: 'Live Chat';
	position: relative;
	top: 3px;
}
.libraryh3lp a:hover {
	background-color:#ffd659;
	color:#252525;
}

.libraryh3lp img {
	float:right;
	visibility:hidden;
	display: none;
}

@media screen and (min-width:768px) {
	.chat-button {
        flex-direction: row;
    }
    
    .chat-button .libraryh3lp {
        margin: 16px 20px 0px 20px;
    }
    
    .chat-button > p,
    .chat-button > strong{
        width: 70%;
    }
}



/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  GLOBAL FOOTER  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

#global-footer {
	background-color:#252525;
	border-bottom:5px solid #ffd659;
	color:#ffffff;
	padding:50px 0 50px 0;
	z-index:-50;
}

#global-footer > div {
	padding:0 5px 0 5px;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  FOOTER LOGO  */

#global-footer div > div {
	height:165px;
	margin:0 5px 20px 5px;
}

#global-footer div > div a {
	background-color:#ffffff;
	background-image:url(/wp-content/uploads/global-footer-full-logo.png);
	background-position:center top;
	background-repeat:no-repeat;
	display:block;
	height:100%;
	margin:0 auto 0 auto;
	max-height:165px;
	max-width:250px;
	width:100%;
}
#global-footer div > div a:hover {
	background-color:#ffd659;
}


@media screen and (min-width:768px) {
	#global-footer div > div {
		float:left;
		width:-webkit-calc(33.333% - 10px);
		width:calc(33.333% - 10px);
	}
}


@media screen and (min-width:1024px) {
	#global-footer div > div {
		width:-webkit-calc(25% - 10px);
		width:calc(25% - 10px);
	}
}


@media screen and (min-width:1280px) {
	#global-footer div > div {
		width:-webkit-calc(20% - 10px);
		width:calc(20% - 10px);
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  FOOTER CONTENT  */

#global-footer section {
	margin:0 5px 0 5px;
}

#global-footer section h2 {
	font-weight:300;
	line-height:1.3;
	margin:0 0 30px 0;
}

#global-footer section h2 strong {
	font-weight:600;
}

#global-footer p {
	line-height:1.75;
	margin:20px 0 20px 0;
}

#global-footer section a {
	border-bottom:1px dotted;
	color:#ffd659;
}
#global-footer section p:nth-of-type(3) a {
	color:#ffffff;
}
#global-footer section a:hover,
#global-footer section p:nth-of-type(3) a:hover {
	border-bottom-style:solid;
	color:#dddddd;
}


@media screen and (min-width:768px) {
	#global-footer section {
		float:left;
		padding:0 0 0 10px;
		width:-webkit-calc(66.666% - 10px);
		width:calc(66.666% - 10px);
	}
	
	#global-footer section h2 strong {
		display:block;
	}
}


@media screen and (min-width:1024px) {
	#global-footer section {
		width:-webkit-calc(75% - 10px);
		width:calc(75% - 10px);
	}
}


@media screen and (min-width:1280px) {
	#global-footer section {
		width:-webkit-calc(60% - 10px);
		width:calc(60% - 10px);
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SITE HEADER  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

#site-header {
	height: calc(100% - 50px);
	width: 100%;
	z-index: 50;
}
#site #site-header {
	height: 300px;
}
/* to keep things lined but when people are logged in to WordPress */
.logged-in #site-header {
	height: calc(100% - 96px);
}

#main-slider,
#main-slider ul#slides,
#main-slider ul#slides li {
	background-position: center center;
	height: 100%;
	width: 100%;
}

ul#slides li {
	background-repeat: no-repeat;
	background-size: cover;
}

ul#slides li > div {
	height: calc(100% - 30px);
	position: relative;
}

ul#slides li > div > section {
	background-color: rgba(0,0,0,0.75);
	bottom: 0;
	color: #ffffff;
	display: none;
	margin: 10px 10px 10px 10px;
	padding: 10px 10px 10px 10px;
	width: calc(100% - 20px);
}

ul#slides li > div > section h2 {
	border-bottom: 2px solid rgba(255,255,255,0.2);
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
}

ul#slides li > div > section h2 a {
	color: #ffd659;
}
ul#slides li > div > section h2 a:hover {
	color: #dddddd;
}

ul#slides li > div > section p a {
	border-bottom: 1px solid;
	color: #ffd659;
}
ul#slides li > div > section p a:hover {
	color: #dddddd;
}

ul#slides li > div > section img {
	width: 100%;
}


@media screen and (min-width:768px) {
	ul#slides li > div {
		height: 100%;
	}
	.home.blogid-1 ul#slides li > div {
		height: calc(100% - 150px);
	}
	
	#site-header {
		height: 550px;
	}
	.logged-in #site-header {
		height: calc(550px + 32px);
	}
	
	ul#slides li > div > section {
		bottom: 50%;
		transform: translateY(50%);
		width: calc(40% - 20px);
	}
}


@media screen and (min-width:1024px) {
	#site #site-header {
		height: 400px;
	}
}


@media screen and (min-width:1280px) {
	#site #site-header {
		height: 550px;
	}
}



/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CONTENT: RIGHT SIDE  */


@media screen and (max-width: 1023px) {
	ul#slides li#right-side {
		background-position: 20% 30%;
	}
}


@media screen and (min-width: 768px) {
	ul#slides li#right-side > div > section {
		right: 0;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SLIDER TABS  */

#site-header ul.slides_tabs {
	bottom:20px;
	display:block;
	left:50%;
	transform:translateX(-50%);
	width:auto;
	z-index:90;
}

#site-header ul.slides_tabs li {
	float:left;
	margin:0 4px 0 4px;
}

#site-header ul.slides_tabs li a {
	background-color:rgba(255,255,255,0.5);
	border:1px solid #ffffff;
	-moz-border-radius:50% 50% 50% 50%;
	-webkit-border-radius:50% 50% 50% 50%;
	border-radius:50% 50% 50% 50%;
	display:block;
	height:12px;
	text-indent:-1px;
	width:12px;
}
	
#site-header ul.slides_tabs li.slides_here a {
	background-color:#ffd659;
	border:1px solid #ffd659;
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SITE  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹ */

/*main#site is meant to contain frontpages (IE: with/without #events and #news) accompanied with/without #site-nav and aside. #site-header and #site-footer are OUTSIDE the main#site to help facilite their ability to stretch in height and width.   */

#site {
	padding:0 0 20px 0;
}


@media screen and (min-width:768px) {
	/*.page-template-blank-slate #site {*/
	#site {
		min-height:-webkit-calc(100% - 539px);
		min-height:calc(100% - 539px);
	}
}


@media screen and (min-width:1024px) {
	/*.page-template-blank-slate #site {*/
	#site {
		min-height:-webkit-calc(100% - 478px);
		min-height:calc(100% - 478px);
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SITE NAV  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

#site-nav {
	margin:20px 10px 20px 10px;
}


@media screen and (min-width:768px) {
	#site-nav {
		float:left;
		margin-bottom:40px;
		margin-top:0;
		width:-webkit-calc(33.333% - 20px);
		width:calc(33.333% - 20px);
	}
}


@media screen and (min-width:1024px) {
	#site-nav {
		width:-webkit-calc(25% - 20px);
		width:calc(25% - 20px);
	}
}


@media screen and (min-width:1280px) {
	#site-nav {
		width:-webkit-calc(20% - 20px);
		width:calc(20% - 20px);
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  MOBILE SITE NAV  */

#site-nav #site-mobile-nav a {
	background-color:#21669c;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	color:#ffd659;
	display:block;
	padding:10px 10px 10px 10px;
	text-align:center;
	text-transform:uppercase;
}
#site-nav #site-mobile-nav a:before {
	padding:0 10px 0 0;
}

#site-nav .menu-site-nav-container,
#site-nav .menu-coronavirus-container,
#site-nav .menu-calendar-nav-container {
	display:none;
    margin-top: 10px;
}

@media screen and (min-width:768px) {
	#site-nav #site-mobile-nav {
		display:none;
	}
	
	#site-nav .menu-site-nav-container,
    #site-nav .menu-coronavirus-container,
    #site-nav .menu-calendar-nav-container {
		display:block;
	}
    
}



/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  PRIMARY MENU ITEMS

If the menu option has children, we are increasing the padding-right so text doesn't conflict with the submenu toggle div.  */

ul.menu > li {
	border-bottom:2px solid #dddddd;
}

ul.menu > li a {
	color:#21669c;
	display:block;
	padding:15px 40px 15px 10px;
	text-transform:uppercase;
}
ul.menu > li a:hover {
	background-color:#eeeeee;
	color:#111111;
	padding-left:15px;
}

li > ul.sub-menu {
	display:none;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SECONDARY MENU ITEMS

If the menu option has children, we are increasing the padding-right so text doesn't conflict with the submenu toggle div.  */

ul.sub-menu > li {
	border-bottom:1px dotted #dddddd;
}
ul.sub-menu > li:last-of-type {
	border-bottom:none;
}

ul.sub-menu > li a {
	color:#111111;
	text-transform:none;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  TRINARY MENU ITEMS  */

ul.sub-menu ul.sub-menu li {
	border-bottom-style:solid;
}
ul.sub-menu ul.sub-menu li:last-of-type {
	border:none;
}

ul.sub-menu ul.sub-menu li a {
	background-color:#fafafa;
	color:#666666;
	padding:15px 40px 15px 20px;
}
ul.sub-menu ul.sub-menu li a:hover {
	background-color:#eeeeee;
	color:#111111;
	padding-left:25px;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SUBMENU TOGGLE  */

.submenu-toggle {
	background-color:#ffffff;
	border-left:1px solid rgba(0,0,0,0.1);
	color:rgba(0,0,0,0.5);
	cursor:pointer;
	height:47px;
	right:0;
	top:0;
	width:32px;
}
.submenu-toggle:hover {
	background-color:#eeeeee;
	color:#111111;
}

.menu-item-has-children > div.down:after {
	margin:18px 10px 18px 10px;
}
.menu-item-has-children > div.up:after,
.current-menu-parent > div.up:after {
	margin:18px 9px 18px 11px;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CURRENT MENU ITEM  */

li.current-menu-ancestor > ul,
li.current-menu-item > ul {
	display:block;
}

ul.menu > li.current-menu-item > a,
ul.menu > li.current-menu-ancestor > a,
ul.sub-menu > li.current-menu-item > a,
ul.sub-menu > li.current-menu-ancestor > a {
	background-color:#eeeeee;
	color:#111111;
}
ul.sub-menu ul.sub-menu > li.current-menu-item > a {
	background-color:#eeeeee;
	color:#111111;
}
ul.menu > li.current-menu-item > a:hover,
ul.menu > li.current-menu-ancestor > a:hover,
ul.sub-menu > li.current-menu-item > a:hover,
ul.sub-menu > li.current-menu-ancestor > a:hover {
	padding-left:10px;
}
ul.sub-menu ul.sub-menu > li.current-menu-item > a:hover {
	padding-left:20px;
}

li.current-menu-item > div.submenu-toggle,
li.current-menu-ancestor > div.submenu-toggle {
	background-color:#f7f7f7;
	display:none;
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  IMAGE NAV  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

Large image buttons used for a nav list on the ICC homepage below the slider, in the #site-footer and, perhaps, within #site-content.  */

ul.image-nav li {
	margin:10px 5px 0 5px;
}
ul.image-nav li:nth-of-type(1) {
	margin-top:0;
}

ul.image-nav li a {
	background-color:rgba(33,102,156,1);
	border:3px solid #eeeeee;
	color:#ffffff;
	display:block;
	height:100%;
	padding:10px 40px 10px 10px;
}
ul.image-nav li a:after {
	right:10px;
	top:50%;
	transform:translateY(-50%);
}
#site-footer ul.image-nav li a {
	border-color:#ffffff;
}

ul.image-nav li a h3 {
	font-weight:400;
	line-height:1;
	margin:0 0 0 0;
}


@media screen and (min-width:768px) {
	ul.image-nav li {
		background-position:center top;
		background-repeat:no-repeat;
		background-size:cover;
		height:90px;
		float:left;
		margin-top:0;
	}
	
	ul.image-nav li a {
		background-color:rgba(33,102,156,0);
		padding:0 0 0 0;
		text-align:right;
	}
	ul.image-nav li a:after {
		display:none;
	}
	ul.image-nav li:hover a {
		background-color:rgba(33,102,156,0.5);
		padding-top:20px;
	}
	
	ul.image-nav li a h3 {
		background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
		bottom:0;
		padding:20px 10px 10px 10px;
		right:0;
		width:100%;
	}
	ul.image-nav li:hover a h3 {
		padding-bottom:30px;
	}
	
	ul.image-nav li a h3 strong {
		display:block;
	}
}


@media screen and (min-width:1024px) {	
	ul.image-nav li {
		height:120px;
	}
	
	ul.image-nav li a {
		line-height:1;
		padding-top:90px;
	}
	ul.image-nav li a:hover {
		padding-top:70px;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SITE CONTENT  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

#site-content {
	margin:20px 10px 20px 10px;
}
#site-nav ~ #site-content {
	margin-top:30px;
}
.error404 #site-content {
	text-align:center;
}

#site-content > p,
#site-content .container > p {
	line-height:2;
	margin:20px 0 20px 0;
}
#site-content > h2 + p,
#site-content > h3 + p,
#site-content > h4 + p {
	margin-top:10px;
}

#site-content strong {
	font-weight:600;
}

#site-content > ul,
#site-content .compartments section > ul,
/*#site-content #tribe-events-content ul,*/
#site-content > ol,
#site-content .compartments section > ol/*,
#site-content #tribe-events-content ol*/ {
	line-height:2;
	margin:20px 0 20px 0;
	padding:0 0 0 40px;
}
#site-content .compartments section > ul,
#site-content .compartments section > ol {
	padding-left:25px;
}
#site-content > ul,
#site-content .compartments section > ul/*,
#site-content #tribe-events-content ul*/ {
	list-style-type:square;
}
#site-content > h2 + ul,
#site-content > h2 + ol,
#site-content > h3 + ul,
#site-content > h3 + ol,
#site-content > h4 + ul,
#site-content > h5 + ol {
	margin-top:10px;
}

#site-content > ul li,
#site-content .compartments section > ul li,
#site-content .container > ul li,
#site-content ul.buttons li,
#site-content > ol li,
#site-content .compartments section > ol li,
#site-content .container > ol li{
	margin:0 0 10px 0;
}

#site-content #breadcrumbs a,
#site-content h5 a,
#site-content > h6 a,
#site-content > p a,
#site-content section > p a,
#site-content .container > p a,
#site-content > ul li a,
#site-content .container > ul li a,
#site-content > ol li a,
#site-content .container > ol li a,
#site-content blockquote p a,
#site-content form a,
#site-content dt a,
.news-story a,
.frontpage .calendar p a,
.contact-info p a {
	border-bottom:1px dotted;
}
#site-content #breadcrumbs a:hover,
#site-content h5 a:hover,
#site-content > h6 a:hover,
#site-content > p a:hover,
#site-content section > p a:hover,
#site-content .container > p a:hover,
#site-content > ul li a:hover,
#site-content .container > ul li a:hover,
#site-content > ol li a:hover,
#site-content .container > ol li a:hover,
#site-content blockquote p a:hover,
#site-content form a:hover,
#site-content dl dd a:hover,
.frontpage .calendar p a:hover,
.contact-info p a:hover {
	border-bottom-style:solid;
}

#site-content dl {
	font-size:0.875em;
	padding:0 10px 0 10px;
}
#site-content .compartments dl {
	border-radius:5px 0 0 5px;
}

#site-content dl dt {
	font-weight:600;
	padding:10px 0 5px 0;
}

#site-content dl dd {
	margin:0 0 0 0;
	padding:0 0 10px 0;
}



#site-content hr,
#site-content section > hr,
aside.contact-info hr {
	border:none;
	border-top:5px solid #dddddd;
	margin:40px 0 40px 0;
}
#site-content ul + hr {
	margin-top:50px;
}
#site-content section > hr,
aside.contact-info hr {
	margin:20px 0 20px 0;
}
aside.contact-info hr {
	border-top-width:2px;
}

#site-content .tiny {
	color:#333333;
}
#site-content div.note,
#site-content p.note,
main div.note,
main p.note{
	border:2px solid #dddddd;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	line-height:1.7;
	margin:30px 0 30px 0;
	padding:13px 10px 10px 10px;
	position:relative;
}
#site-content div.note.alert,
#site-content p.note.alert
main p.note.alert,
main div.note.alert{
	border-color: #a93835;
}
#site-content div.note:before,
#site-content p.note:before,
main div.note:before,
main p.note:before {
	background-color:#ffffff;
	color:#a93835;
	content:"\f071";
	font-family:fontawesome;
	font-size:1.333em;
	font-style:normal;
	left:10px;
	padding:0 5px 0 5px;
	position:absolute;
	top:-20px;
}

#site-content div.note:before,
main div.note:before {
    top: -15px;
}

#site-content .accordion div.note:before,
#site-content .accordion p.note:before,
main .accordion div.note:before,
main .accordion p.note:before {
    background-color: #f7f7f7;
}

#site-content form .tiny {
	line-height: 1.5;
}

#site-content blockquote {
	border-bottom:2px solid #dddddd;
	border-top:2px solid #dddddd;
	font-weight:300;
	line-height:2;
	margin:30px 0 30px 0;
	padding:30px 20px 30px 20px;
}

#site-content blockquote > ul.buttons {
	margin-top:30px;
}

#site-content blockquote.announcement {
	text-align:center;
}

#site-content blockquote.checkmark {
	padding-left:100px;
	position:relative;
}
#site-content blockquote.checkmark:before {
	animation:fadein ease-in 1;
	-moz-animation:fadein ease-in 1;
	-webkit-animation:fadein ease-in 1;
	animation-duration:2s;
	-moz-animation-duration:2s;
	-webkit-animation-duration:2s;
	animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	display:block;
	color:#1ba965;
	content:"\f058";
	float:left;
	font-family:fontawesome;
	font-size:60px;
	left:10px;
	opacity:0;
	padding:0 0 0 5px;
	position:absolute;
	top:0;
}

#site-content blockquote p {
	margin:0 0 0 0;
}

#site-content blockquote p + p {
	margin-top:20px;
}

#site-content h3 + ul.two-column {
	margin-top:20px;
}

#site-content ul.two-column li {
	margin:0 0 10px 0;
}

#site-content p a[href$=".pdf"],
#site-content ul:not(.buttons) a[href$=".pdf"] {
	margin: 0 20px 0 0;
/*	position: relative;*/
}
#site-content > h6 a[href$=".pdf"] {
	margin-right:25px;
}
#site-content ul.buttons li a[href$=".pdf"] {
	margin-right:0;
}

#site-content p a[href$=".pdf"]::after,
#site-content ul:not(.buttons) a[href$=".pdf"]::after {
	color: #ff4e4c;
	content: "\f1c1";
	font-family: fontawesome;
	font-size: 0.75em;
	font-weight: normal;
	margin: 5px 0 0 7px;
	position: absolute;
}
#site-content ul a[href$=".pdf"]::after {
	margin-top: 4px;
}
#site-content ul.buttons a[href$=".pdf"]::after {
	margin-top: 2px;
}
#site-content table a[href$=".pdf"]::after {
	margin: 2px 0 0 5px;
}

#site-content time {
	font-weight:300;
}


/* IMAGE CAPTION (primarily in news) */
#site-content figure.alignleft,
#site-content figure.alignright {
	margin: 0 0 0 0;
	width: 100%;
}

#site-content figure img {
	height: auto;
	width: 100%;
}

#site-content figcaption {
	background-color:#f7f7f7;
	font-weight:300;
	margin:0 0 0 0;
	padding:10px 10px 10px 10px;
}

#site-content .address-block {
    border-left: 2px solid #dddddd;
    padding-left: 10px;
    margin: 10px 0;
}

    #site-content .address-block strong:first-of-type {
        display: block;
/*        margin-bottom: 10px;*/
    }    

@media screen and (min-width:768px) {
	#site-nav ~ #site-content {
		float:left;
		margin-top:0;
		padding:0 0 0 10px;
		width:-webkit-calc(66.666% - 20px);
		width:calc(66.666% - 20px);
	}
	.page-template-blank-slate #site-content {
		float:none;
		padding-left:0;
		width:-webkit-calc(100% - 20px);
		width:calc(100% - 20px);
	}
	.page-template-blank-slate #site-nav ~ #site-content {
		width:-webkit-calc(8% - 20px);
		width:calc(80% - 20px);
	}
	
	#site-content p.note {
		margin-right:25%;
	}
	
	#site-content ul.two-column {
		-moz-column-count:2;
		-webkit-column-count:2;
		column-count:2;
		-moz-column-gap:20px;
		-webkit-column-gap:20px;
		column-gap:20px;
	}
	
	/* IMAGE CAPTION (primarily in news) */
	#site-content figure.alignleft,
	#site-content figure.alignright {
		width: 40%;
	}
	#site-content figure.alignleft {
		float: left;
		margin-right: 20px;
	}
	#site-content figure.alignright {
		float: right;
		margin-left: 20px;
	}
}


@media screen and (min-width:1024px) {
	#site-content,
	#site-nav ~ #site-content {
		float:left;
		width:-webkit-calc(75% - 20px);
		width:calc(75% - 20px);
	}
	.error404 #site-content {
		float:none;
		margin:0 auto 0 auto;
	}
}


@media screen and (min-width:1280px) {
	#site-nav ~ #site-content {
		width:-webkit-calc(60% - 20px);
		width:calc(60% - 20px);
	}
	
	.frontpage #site-nav ~ #site-content,
	#site-nav ~ #site-content.news-page,
	#site-nav ~ #site-content.calendar {
		width:-webkit-calc(80% - 20px);
		width:calc(80% - 20px);
	}
}

/* SOCIAL MEDIA ICONS */
#site-content > p.social-media a {
	border: none;
}

p.social-media i {
	font-size: 1.5em;
	margin: 0 3px 0 3px;
}
p.social-media i.fa-facebook-square {
	color: #3b5998;
}
p.social-media i.fa-twitter-square {
	color: #00acee;
}
p.social-media i.fa-instagram {
	color: #3f729b;
}
p.social-media i.fa-linkedin {
	color: #0e76a8;
}
p.social-media i.fa-snapchat-square {
	color: #252525;
}
p.social-media i.fa-youtube-square {
	color: #FF0000;
}

p.social-media object.tiktok {
    background-image: url(https://icc.edu/wp-content/uploads/Tiktok_icon.svg);
    background-repeat: no-repeat;
    position: relative;
    top: 0.15em;
    width: 22px;
}

/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SITE HEADERS  */

#site-content > h1 {
	display:none;
}

#site-content > h2,
#site-content .container > h2,
#site-content form h2 {
	color:#21669c;
	font-weight:600;
	margin:40px 0 0 0;
	padding:10px 0 10px 0;
}
#site-content > h2:first-of-type,
#site-content .container > h2:first-of-type {
	border:none;
	color:#252525;
	font-weight:300;
	margin:0 0 30px 0;
	padding:0 0 0 0;
}

#site-content > h3,
#site-content blockquote h3,
#site-content .container > h3,
#site-content form h3,
#site-content aside > h3 {
	font-weight:400;
	margin:30px 0 0 0;
}
.frontpage section > h3 {
	margin:0 5px 0 5px;
}
#site-content blockquote h3,
#site-content form h3 {
	clear:both;
	margin:30px 0 10px 0;
	line-height:1.25;
}
#site-content blockquote.checkmark h3,
#site-content form h3.top {
	margin-top:0;
}

#site-content > h4,
#site-content blockquote h4,
#site-content .container > h4,
#site-content form h4,
#site-content #programs h4,
#site-content .accordion h4 {
	font-size: 1.5em;
	font-weight: 300;
	margin: 30px 0 0 0;
	text-transform: uppercase;
}
#site-content blockquote h4 {
	margin-top:0;
}
#site-content ul.buttons + h4 {
	margin-top:40px;
}
.frontpage section > h4 {
	margin:0 5px 0 5px;
}

#site-content h5 {
	font-size: 1.25em;
	font-weight: 400;
	margin: 20px 0 5px 0;
}

/* see marketing intake form for this necessity... it's a mess */
#site-content form h5 {
	display:none;
}

#site-content > h6,
#site-content .container > h6,
#site-content form h6 {
	color:#666666;
	font-weight:300;
	line-height:1.7;
	margin:0 0 40px 0;
}

#site-content > h3 .steps,
#site-content > h3 .classification,
#site-content section > h3 .steps,
#site-content > h4 .steps {
	color:#999999;
	display:block;
	font-weight:300;
	margin:0 0 -10px 0;
}

#site-content > h2 .sub-heading,
#apprenticeship h2 .sub-heading,
#site-content > h3 .sub-heading,
#site-content section > h3 .sub-heading,
#site-content aside > h3 .sub-heading,
#site-content > h4 .sub-heading,
#site-content section > h4 .sub-heading,
#site-content aside > h4 .sub-heading {
	display:block;
	font-weight:300;
}
#apprenticeship h2 .sub-heading {
	color: #252525;
}
#site-content > h2 .sub-heading,
#apprenticeship h2 .sub-heading {
	font-size:0.667em;
}
#site-content > h3 .sub-heading,
#site-content section > h3 .sub-heading,
#site-content aside > h3 .sub-heading {
	font-size:0.467em;
}
#site-content > h4 .sub-heading,
#site-content section > h4 .sub-heading,
#site-content aside > h4 .sub-heading {
	font-size:0.593em;
}
#site-content > h2 .sub-heading.pre,
#apprenticeship h2 .sub-heading.pre,
#site-content > h3 .sub-heading.pre,
#site-content section > h3 .sub-heading.pre,
#site-content aside > h3 .sub-heading.pre,
#site-content > h4 .sub-heading.pre,
#site-content section > h4 .sub-heading.pre,
#site-content aside > h4 .sub-heading.pre {
	margin:0 0 5px 0;
}
#site-content > h2 .sub-heading.post,
#apprenticeship h2 .sub-heading.post,
#site-content > h3 .sub-heading.post,
#site-content section > h3 .sub-heading.post,
#site-content aside > h3 .sub-heading.post,
#site-content > h4 .sub-heading.post,
#site-content section > h4 .sub-heading.post,
#site-content aside > h4 .sub-heading.post {
	margin:2px 0 0 0;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  FEATURED IMAGE  */

#site-content img.featured {
	margin:0 0 30px -10px;
	width:-webkit-calc(100% + 20px);
	width:calc(100% + 20px);
}

.featured-image {
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:150px;
}
.page-template-blank-slate .featured-image {
	background-position:top center;
}
.error404 .featured-image {
	background-image:url(https://icc.edu/wp-content/uploads/featured-image-full-width-broken-pencil.jpg);
	background-size: contain;
	margin: 15px 0 0 0;
}


@media screen and (min-width:768px) {
	#site-content img.featured {
		margin-left:0;
		width:-webkit-calc(100% + 10px);
		width:calc(100% + 10px);
	}
	.single #site-content img.featured {
		max-width:800px;
	}
}


@media screen and (min-width:1024px) {
	.featured-image {
		height:300px;
	}
}


@media screen and (min-width:1280px) {
	#site-content img.featured {
		width:100%;
	}
}

/* @media only screen and (min-width : 1281px) {
    .featured-image {
		background-size: contain;
    }
} */


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  BREADCRUMBS  */

#breadcrumbs {
	margin:0 0 30px 0;
	padding:0 0 0 0;
	text-transform:uppercase;
}

#breadcrumbs a {
	color:#777777;
	font-weight:600;
}
#breadcrumbs a:hover {
	color:#111111;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  IMAGES  */

#site-content img.size-full,
#site-content img.size-default,
#site-content img.size-half {
	width: 100%;
}

#site-content img.alignright,
#site-content img.alignleft {
	margin: 0 0 20px 0;
}


@media screen and (min-width:768px) {
	#site-content img.alignleft,
	#site-content img.alignright {
		width: calc(40% - 10px);
	}
	#site-content img.alignleft {
		float: left;
		margin-right: 20px;
	}
	#site-content img.alignright {
		float: right;
		margin-left: 20px;
	}
	
	#site-content img.size-half {
		width: 50%;
	}
	
	#site-content img.size-default {
		width: auto;
	}
}

/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  image buttons  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */


.image-buttons {
    margin: 20px 0 20px 0;
}

.image-buttons p {
    display: none;
}

.image-buttons .flex-compartments {
    padding: 0px;
}

.image-buttons .flex-compartments > div ,
.image-buttons .flex-compartments > section {
    flex-basis: calc(50% - 10px);
    padding: 0px;
    position: relative;
    width: calc(50% - 10px);
}

.image-buttons .flex-compartments > div span.image,
.image-buttons .flex-compartments > section span.image {
    background-position: top center;
    background-repeat: no-repeat;
    border-radius: 5px;
    background-size: contain;
    display: block;
/*    height: 200px;*/
    padding-top: calc(800/615 * 100%);
}

.image-buttons .flex-compartments > div span.image,
.image-buttons .flex-compartments > section span.image.taller {
    padding-top: calc(920/610 * 100%);
}

.image-buttons .flex-compartments h1,
.image-buttons .flex-compartments span > span {
    background: rgba(0,0,0,0.85);
    border-radius: 0 0 5px 5px;
    bottom: 0px;
    color: #fff;
    font-size: 1em;
    min-height: 45px;
    padding: 5px;
    position: absolute;
    transition: all 0.5s ease-in-out;
    width: 100%;
}

.image-buttons .flex-compartments a:hover h1,
.image-buttons .flex-compartments a:hover span > span {
    padding-bottom: 20px;
}

.image-buttons p:empty {
    display: none;
}

@media screen and (min-width:1024px) {
    .image-buttons .flex-compartments h1,
    .image-buttons .flex-compartments span > span {
        font-size: .9em;
    }
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SECTION COMPARTMENTS  */

h2 + .compartments,
h3 + .compartments,
h4 + .compartments,
p + .compartments,
ul + .compartments {
	margin:30px 0 0 0;
}

.compartments section {
	background-color:#eeeeee;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	margin:0 0 10px 0;
	padding:10px 10px 10px 10px;
	position:relative;
}
.compartments section:last-of-type {
	margin-bottom:0;
}

section h3 {
	font-size:1.875em;
	font-weight:300;
	line-height:1.1;
	margin:0 0 0 0;
}
section .featured-image + h3 {
	margin-top:10px;
}

section h4 {
	font-size:1.5em;
	font-weight:300;
	margin:10px 0 20px 0;
}

section h5 {
	font-size:1.25em;
	font-weight:400;
	margin:0 0 0 0;
}

.compartments section p,
.compartments section ul,
.compartments section ol {
	font-size:0.75em;
}
.compartments section h3 + p {
	margin-top:20px;
}

#site-content .compartments ul.buttons li {
	margin-bottom:0;
}

#site-content .compartments ul.buttons li a {
	border-color:#ffffff;
}

.compartments section .featured-image {
	background-repeat:no-repeat;
	background-size:cover;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	border-radius:5px 5px 0 0;
	height:150px;
	margin:-10px 0 0 -10px;
	width:-webkit-calc(100% + 20px);
	width:calc(100% + 20px);
}
.compartments section.contact-info .featured-image {
	height:200px;
}

@media screen and (min-width:768px) {
	#site-content .compartments ul.buttons li {
		width:-webkit-calc(100% - 10px);
		width:calc(100% - 10px);
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  FLEX COMPARTMENTS

Using display:flex */

/* CONTAINER */
h3 + div.flex-compartments {
	margin-top: 10px;
}

div.flex-compartments {
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    margin: 10px 0px;
	padding: 10px 5px 0 5px;
}
/* last row fix */
div.flex-compartments::after {
	content: "";
	flex: auto;
}

div.flex-compartments > p {
	display: none;
}

/* EMBEDDED ITEMS */
div.flex-compartments > section {
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 0 5px 0 rgba(41,50,65,0.25);
	margin: 0 5px 10px 5px;
	padding: 10px 10px 10px 10px;
}

/* HEADINGS */
div.flex-compartments > section > h4 {
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	font-size: 1.25em;
	font-weight: 500;
	padding: 5px 10px 5px 10px;
	margin: 0 0 0 0;
}

/* COPY */
div.flex-compartments > section > p {
	font-size: 0.75em;
	margin: 10px 0 0 0;
}


/* avoid double margins in mobile */
@media screen and (max-width:767px) {
	div.flex-compartments > section + section {
		margin-top: 0;
	}
}


@media screen and (min-width:768px) {
	/* FLOATING */
	div.flex-compartments.two-column > section,
	div.flex-compartments.two-column > ul {
		flex-basis: calc(50% - 10px);
	}
	div.flex-compartments.three-column > section,
	div.flex-compartments.three-column > ul {
		flex-basis: calc(33.333% - 10px);
	}
	div.flex-compartments.four-column > section,
	div.flex-compartments.four-column > ul {
		flex-basis: calc(25% - 10px);
	}
	div.flex-compartments.five-column > section,
	div.flex-compartments.five-column > ul {
		flex-basis: calc(20% - 10px);
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  FLEX COMPARTMENTS COLOR SCHEMES

unique color layouts available for flex-compartments */

/* CONTAINER */
#campus-dining-calendar div.flex-compartments {
	background: linear-gradient(#92b648,#78953b);
}
div.yellow-black.flex-compartments {
	background: linear-gradient(#ffe868,#d4ae43);
}

/* EMBEDDED ITEMS */
#campus-dining-calendar div.flex-compartments > section {
	background: linear-gradient(#f5f4db,#ffffff);
}
div.yellow-black.flex-compartments > section {
	background: linear-gradient(#ffffff,#fafafa);
}

/* HEADINGS */
#campus-dining-calendar div.flex-compartments > section > h4 {
	background: linear-gradient(#8a3323,#973826);
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	color: #ffffff;
	font-size: 1em;
	font-weight: 300;
	margin: -10px 0 0 -10px;
	width: -webkit-calc(100% + 20px);
	width: calc(100% + 20px);
}
div.yellow-black.flex-compartments > section > h4 {
	background: linear-gradient(#676b82,#303136);
	color: #ffffff;
}

#campus-dining-calendar div.flex-compartments > section > h5 {
	border-bottom: 2px solid;
	color: #65431f;
	font-size: 1em;
	padding: 0 0 5px 0;
}
#campus-dining-calendar div.flex-compartments > section > h5:last-of-type {
	margin-top: 20px;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  DATE SELECTOR 

mostly used with showing week long events — this takes users to next and previous weeks  */

#dates {
	display: flex;
	justify-content: space-between;
}

#dates > a {
	/*background-color: #9F2213;*/
	/*background: linear-gradient(#cf6a00,#dca50b);*/
	background-color: #cf6a00;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	color: #ffffff;
	font-size: 0.75em;
	padding: 8px 8px 8px 8px;
	text-transform: uppercase;
	transition: all 0.5s ease-in-out;
	
	/*border: 1px dotted #990000;*/
}
#dates > a:hover {
	background-color: #dca50b;
	transition: all 0.5s ease-in-out;
}

#dates > a i {
	padding: 0 6px 0 6px;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  DEPARTMENT CONTACT ASIDE  

#dept-contact placed on the far, right-hand column of webpages to display contact information for the department that the page is about. updated in dec 2019 prior to todd leaving */

#dept-contact {
	border-left: 2px solid #dddddd;
	font-size: 0.75em;
}

	.library-locations #dept-contact {
		border: none;
	}

#dept-contact a {
	color: #21669c;
	text-decoration: underline;
	transition: all 0.5s ease-in-out;
}
#dept-contact a:hover {
	color: #252729;
	transition: all 0.5s ease-in-out;
}

#dept-contact i {
	color: rgba(33,102,156,0.75);
	padding: 0 6px 0 0;
}

#dept-contact h2 {
	color: #21669c;
	font-family: 'Roboto Slab', serif;
	font-size: 2em;
	font-weight: 300;
	line-height: 1.125em;
	margin: 0 0 20px 20px;
}

#dept-contact .office-name {
	font-size: 1.17em;
	font-weight: 600;	
}

#dept-contact > div {
	padding: 20px 0 0 20px;
}
#dept-contact > div:not(:first-of-type) {
	border-top: 2px solid #dddddd;
}

#dept-contact > div > :first-child {
	margin-top: 0;
}

#dept-contact > div p {
	padding: 0 0 0 20px;
	position: relative;
}

#dept-contact > div > .office-name {
	padding: 0 0 0 0;
	position: relative;
}

#dept-contact > div p > i {
	left: 0;
	position: absolute;
	top: 3px;
}

/* SPINNING ICONS */
#dept-contact p i.fa-spin {
	animation: fa-spin 40s infinite linear;
}

#dept-contact p i.fa-snowflake,
#dept-contact p i.fa-sun,
#dept-contact p i.fa-cog {
	color: rgba(255,255,255,0.45);
	font-size: 10em;
	left: -56px;
	padding-right: 0;
	position: absolute;
	top: -56px;
	z-index: 1;
}

#dept-contact p span {
	font-size: 1.1em;
	position: relative;
	z-index: 2;
}

/* WINTER BREAK, SUMMER HOURS and EXTENDED HOURS */
#dept-contact .winter,
#dept-contact .summer,
#dept-contact .special,
#dept-contact .holiday-message {
	border-radius: 5px 5px 5px 5px;
	color: #202020;
	overflow: hidden;
	padding: 10px 10px 10px 25px;
	position: relative;
    max-width: 400px;
    width: 100%;
}
	#dept-contact .winter span strong:first-of-type,
	#dept-contact .summer span strong:first-of-type,
	#dept-contact .special span strong:first-of-type,
	.hours-update .special-hours span strong:first-of-type {
		display: block;
		font-size: 1.1em;
		margin-bottom: 5px;
		position: relative;
		z-index: 2;
	}

#dept-contact .holiday-message {
    background-color: #21669c;
    color: #fff;
}
    #dept-contact .holiday-message i {
        color: #fff;
        left: 5px;
        top: 5px;
    }

#dept-contact .winter {
	background-color: #a0e6ff;
}
#dept-contact .summer {
	background-color: #ffd659;
}
#dept-contact .special {
	background-color: #5cc48f;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CONTACT INFO  

.contact-info is a specialized set of styles to go with the aside when contact information for that page is provided. */

aside.contact-info {
	background-color:#fafafa;
	border:2px solid #dddddd;
	padding:5px 10px 10px 10px;
	position:relative;
}

.contact-info div.contact {
	padding:20px 0 20px 0;
}
.contact-info div.contact:last-of-type {
	padding-bottom:0;
}
.contact-info div.contact + div.contact {
	border-top:5px solid #dddddd;
}

.contact-info h2 {
	border-bottom:5px solid #dddddd;
	color:#21669c;
	font-weight:600;
	line-height:1.1;
	margin:10px 0 0 0;
	padding:10px 10px 10px 10px;
}
.contact-info h2:before {
	background:linear-gradient(#ffffff,#fafafa);
	right:5px;
	padding:0 7px 0 7px;
	top:-30px;
}

.contact-info p,
.contact-info span {
	padding:0 0 0 20px;
}
aside.contact-info p {
	margin-left:10px;
	margin-right:10px;
}
.contact-info p.seat {
	color:#666666;
	margin-top:5px;
	padding-left:0;
}
.contact-info .homepage:before {
	content:"\f015";
}
.contact-info p.office-name,
.contact-info p.title,
.contact-info p.occupation {
	font-weight:300;
	margin-top:0;
	padding-left:0;
}
.contact-info .email {
	text-transform: lowercase;
}
.contact-info.word-email .email {
	text-transform: none;
}
.contact-info h3 + p.office-name,
.contact-info h3 + p.title,
.contact-info h3 + p.occupation {
	margin-top:1em;
}
.contact-info :before {
		color:rgba(0,0,0,0.5);
}
.contact-info .email:before,
.contact-info p.fax:before,
.contact-info .phone:before,
.contact-info p.cert:before {
	left:0;
	top:3px;
}
.contact-info p.address:before,
.contact-info p.seasonal-hours:before,
.contact-info p.hours:before  {
	left:1px;
	top:3px;
}
.contact-info p.seasonal-hours:before {
	color:#a93835;
}
.contact-info .homepage:before {
	left:1px;
	top:4px;
}
.contact-info p.office:before {
	left:2px;
	top:4px;
}

.contact-info p.seasonal-hours ~ p.hours,
.contact-info p.seasonal-hours ~ p.hours:before {
	color:#666666;
}

.contact-info p.seasonal-hours {
	color:#a93835;
}

.contact-info hr + p {
	color:#dddddd;
	font-size:1.125em;
	font-weight:600;
	left:50%;
	margin:-35px 0 0 0;
	padding:0 10px 0 10px;
	position:absolute;
	text-transform:uppercase;
	transform:translateX(-50%);
	width:50px;
}
.compartments .contact-info hr + p {
	background-color:#eeeeee;
}
aside.contact-info hr + p {
	background-color:#fafafa;
}

/* adding an image into the aside */
aside img {
	width: 100%;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  EMPHASIS BUTTONS

A yellow to orange gradient background pill-shaped button. These buttons are created in a ul by adding the .buttons.  */

#site-content ul.buttons {
	line-height: 1.5;
}
#site-content > h2 + ul.buttons,
#site-content > h3 + ul.buttons,
#site-content > h4 + ul.buttons,
#site-content > h5 + ul.buttons {
	margin-top: 20px;
}
.error404 #site-content ul.buttons {
	margin: 30px auto 30px auto;
	width: 75%;
}

#site-content ul.buttons li a {
	background: linear-gradient(to bottom right,#ffd659,#e8af45);
	border: 3px solid #dddddd;
	color: #252525;
	display: block;
	line-height: 1.2;
	font-weight: 600;
	padding: 10px 5px 10px 5px;
	text-align: center;
	text-transform: uppercase;
	z-index: 100;
}
#site-content ul.buttons.red-highlight li a {
	background: linear-gradient(to bottom right,#cf5217,#a93835);
	color: #ffd659;
}
#site-content ul.buttons li a:hover {
	background: linear-gradient(to bottom right,#21669c,#143c5c);
	color: #ffd659;
}


@media screen and (min-width:768px) {
	#site-content ul.buttons li {
		float: left;
		margin: 0 0 10px 0;
		width: -webkit-calc(50% - 5px);
		width: calc(50% - 5px);
	}
	#site-content ul.buttons li:nth-of-type(odd) {
		clear: left;
		margin-right: 10px;
	}
	#site-content .compartments section ul.buttons li {
		float: none;
		margin: 0 0 0 0;
		width: 100%;
	}
}


@media screen and (min-width:1024px) {
	#site-content ul.buttons li {
		margin-right: 10px;
		width: calc(33.333% - 7px);
	}
	#site-content ul.buttons li:nth-of-type(odd) {
		clear: none;
	}
	#site-content ul.buttons li:nth-of-type(3n) {
		margin-right: 0;
	}
	#site-content ul.buttons li:nth-of-type(3n+1) {
		clear: left;
	}
	.error404 #site-content ul.buttons li {
		width: calc(50% - 10px);
	}
}


@media screen and (min-width:1280px) {
	.page-template-blank-slate #site-content ul.buttons li {
		width: calc(25% - 8px);
	}
	.page-template-blank-slate #site-content ul.buttons li:nth-of-type(3n) {
		margin-right: 10px;
	}
	.page-template-blank-slate #site-content ul.buttons li:nth-of-type(3n+1) {
		clear: none;
	}
	.page-template-blank-slate #site-content ul.buttons li:nth-of-type(4n) {
		margin-right: 0;
	}
	.page-template-blank-slate #site-content ul.buttons li:nth-of-type(4n+1) {
		clear: left;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  FLEX EMPHASIS BUTTONS

Same as emphasis buttons but we're going to flex them and allow them to go the width they need to go.  */

#site-content ul.flex-buttons {
	list-style: none;
	margin: 0 0 0 0;
	padding: 0 0 10px 0;
}
#site-content h2 + ul.flex-buttons,
#site-content h3 + ul.flex-buttons,
#site-content h4 + ul.flex-buttons,
#site-content h5 + ul.flex-buttons,
#site-content h6 + ul.flex-buttons {
	margin-top: 15px;
}

#site-content ul.flex-buttons li {
	margin: 0 5px 0 5px;
}
#site-content ul.flex-buttons li:first-of-type {
	margin-left: 0;
}

#site-content ul.flex-buttons li a {
	background-color: #ffd659;
	border: none;
	border: 3px solid #dddddd;
	border-radius: 5px 5px 5px 5px;
	color: #252525;
	display: block;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.2;
	padding: 10px 25px 10px 25px;
	text-align: center;
	text-transform: uppercase;
	transition: all 0.5s ease-in-out;
}
#site-content ul.flex-buttons li a:hover {
	background-color: #21669c;
	color: #ffd659;
	transition: all 0.5s ease-in-out;
}
#site-content .accordion ul.flex-buttons li a {
	font-size: 0.75em;
}


@media screen and (min-width: 768px) {
	#site-content ul.flex-buttons {
		display: flex;
		flex-wrap: wrap;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  GET MORE/ADD-POST BUTTONS

A yellow get more button usually attributed to news and events on frontpages.  */

.get-more {
	background-color:#ffd659;
	border-left:5px solid #21669c;
	margin:20px 0 0 0;
	text-align:right;
}

.get-more a {
	background:linear-gradient(to left,transparent,transparent 50%,#21669c 50%,#21669c);
	background-position:100% 0;
	background-size:200% 100%;
	display:block;
	font-weight:600;
	line-height:1;
	padding:10px 20px 10px 0;
	text-transform:uppercase;
}
.get-more a:after {
	font-weight:normal;
	padding:0 0 0 5px;
}
.get-more a:hover {
	background-position:0 0;
	color:#ffd659;
}

.get-more a em {
	color:#111111;
	font-style:normal;
	font-weight:300;
	text-transform:none;
}
.get-more a:hover em {
	color:#ffffff;
}
.frontpage .get-more a em {
	display:none;
}

.add-post {
	float:left;
	margin:20px 10px 0 0;
	width:-webkit-calc(50% - 5px);
	width:calc(50% - 5px);
}

.add-post a {
	background-color:#21669c;
	color:#ffffff;
	display:block;
	font-size:0.75em;
	height:32px;
	line-height:2;
	padding:4px 10px 0 10px;
}
.add-post a:before {
	color:#ffffff;
	padding:0 10px 0 0;
}
.add-post a:hover {
	color:#ffffff;
	width:140px;
}
.add-post a:hover:before {
	color:#ffd659;
}


.add-post + .get-more {
	float:left;
	width:-webkit-calc(50% - 5px);
	width:calc(50% - 5px);
}


@media screen and (min-width:1024px) {
	.add-post {
		position:absolute;
		width:30px;
	}
	.add-post:hover {
		width:140px;
	}
	
	.add-post a {
		color:#21669c;
		overflow:hidden;
		width:30px;
	}
	
	.add-post + .get-more {
		float:none;
		margin-left:20px;
		width:-webkit-calc(100% - 20px);
		width:calc(100% - 20px);
	}
	
	.frontpage .get-more a em {
		display:inline;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  FORM CLOSED

Styles to better convey when forms are closed.  */

.form-closed {
	border-radius: 5px 5px 5px 5px;
	color: #fffff0;
	font-size: 0.75em;
	padding: 10px 10px 10px 10px;
	margin: 40px 0 20px 0;
	text-align: center;
}

.form-closed h4 {
	font-size: 2em;
	font-weight: 800;
	margin: 0 0 0 0;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
	text-transform: uppercase;
}

.form-closed a {
	text-decoration: underline;
}

.form-closed h4 + p {
	margin-top: 0;
}


@media screen and (min-width: 768px) {
	.form-closed {
		width: 75%;
	}
}


@media screen and (min-width: 1024px) {
	.form-closed {
		width: 50%;
	}
}

.form-closed.red {
	background: linear-gradient(#a83834,#bf4b32);
}

.form-closed.red h4 {
	color: #f56964;
}

.form-closed.blue {
	background: linear-gradient(#21669c,#1b5682);
}

.form-closed.blue h4 {
	color: #3199e8;
}

.form-closed.blue a {
	color: #ffd659;
	transition: all 0.5s ease-in-out;
}
.form-closed.blue a:hover {
	color: #ffffff;
	transition: all 0.5s ease-in-out;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  DATA TABLE

Using the <table> tag for tabular data; exclusive for CDS course display.

Outside of CDS, we've using <div>. The divs will be set up in a table format with and we're working on using a fewer amount of classes in the code and more complicated CSS.  */

#site-content table {
	border:1px solid #cccccc;
	margin:20px 0 20px 0;
	width:100%;
}
#site-content > h2 + table,
#site-content > h3 + table,
#site-content > h4 + table,
#site-content > h5 + table {
	margin-top:10px;
}

td.wid10 {
	width:10%;
}
td.wid20 {
	width:20%;
}
td.wid30 {
	width:30%;
}
td.wid40 {
	width:40%;
}
td.wid50 {
	width:50%;
}
td.wid60 {
	width:60%;
}
td.wid70 {
	width:70%;
}
td.wid80 {
	width:80%;
}
td.wid90 {
	width:90%;
}

#site-content table tr td {
	line-height:1.5;
	padding:3px 5px 3px 5px;
}
#site-content table.centered-text tr td {
	text-align:center;
}
#site-content table.four-columns tr td {
	width:25%;
}

#site-content table tr td.center {
	text-align:center;
}

#site-content table tr td.right {
	text-align:right;
	padding-right:10px;
}

#site-content table thead tr {
	background-color:#666666;
	color:#ffffff;
	font-weight:600;
}

#site-content table thead tr td {
	padding:5px 5px 5px 5px;
}

#site-content table tbody tr:nth-of-type(even) {
	background-color:#e3e3e3;
}

#site-content table tbody tr td.special,
#site-content table tbody tr td.retreat {
	padding-left:25px;
}
#site-content table tbody tr td.special:before,
#site-content table tbody tr td.retreat:before {
	color:rgba(255,255,255,0.5);
	left:10px;
}

#site-content table tfoot tr {
	background-color:#999999;
	color:#ffffff;
	font-weight:600;
}

#site-content table tfoot tr td {
	padding-top:10px;
}


@media screen and (min-width:1024px) {
	#site-content > table table.half {
		width:50%;
	}
}

/* RESPONSIVE TABLE LAYOUT */
#site-content div.table,
#site-content div.table > div,
#site-content div.table > div > div {
	display: block;
}
#site-content div.table > div > div::before {
	content: " "attr(data-label)":";
	display: inline-block;
	font-weight: 600;
	padding: 0 5px 0 0;
}
/* removes colon character on header */
/*
#site-content div.table > div > div:first-of-type::before {
	content: "";
}
*/

#site-content div.table {
	color: #343434;
	display: block;
	font-size: 0.75em;
	margin: 10px 0 10px 0;
}
#site-content .accordion div.table {
	font-size: 0.875em;
}

#site-content div.table p {
	display: none;
}

/* row */
#site-content div.table > div {
	border: 1px solid #eeeeee;
	border-bottom: 2px solid #dddddd;
	border-top: 2px solid #dddddd;
	margin: 10px 0 10px 0;
}
#site-content div.table > div > div:first-of-type {
	border-left: none;
}
#site-content div.table > div > div:last-of-type {
	border-right: none;
}

/* table-head row */
#site-content div.table > div:first-of-type {
	display: none;
}

/* links */
#site-content div.table > div a {
	color: #21669c;
	text-decoration: underline;
	transition: color 0.5s ease-in-out;
}
#site-content div.table > div a:hover {
	color: #252729;
	transition: color 0.5s ease-in-out;
}

#site-content div.table:not(.no-table-head) > div:first-of-type a,
#site-content div.two-variables > div > div:first-of-type a {
	color: #ffd659;
	text-decoration: underline;
	transition: color 0.5s ease-in-out;
}
#site-content div.table:not(.no-table-head) > div:first-of-type a:hover,
#site-content div.two-variables > div > div:first-of-type a:hover {
	color: #ffffff;
	transition: color 0.5s ease-in-out;
}

/* column */
#site-content div.table > div > div {
	border-bottom: 1px solid #eeeeee;
	padding: 10px 10px 10px 10px;
}

/* colors for payment plans */
#site-content div.table > div.table-orange > div:first-of-type {
	border-left: 5px solid #ffa500;
}
#site-content div.table > div.table-orange > div:last-of-type {
	border-right: 5px solid #ffa500;
}
#site-content div.table > div.table-orange:hover {
	background-color: rgba(255,165,0,0.5);
}
#site-content div.table > div.table-violet > div:first-of-type {
	border-left: 5px solid #ee82ee;
}
#site-content div.table > div.table-violet > div:last-of-type {
	border-right: 5px solid #ee82ee;
}
#site-content div.table > div.table-violet:hover {
	background-color: rgba(238,130,238,0.5);
}
#site-content div.table > div.table-yellow > div:first-of-type {
	border-left: 5px solid #ffff00;
}
#site-content div.table > div.table-yellow > div:last-of-type {
	border-right: 5px solid #ffff00;
}
#site-content div.table > div.table-yellow:hover {
	background-color: rgba(255,255,0,0.5);
}
#site-content div.table > div.table-blue > div:first-of-type {
	border-left: 5px solid #add8e6;
}
#site-content div.table > div.table-blue > div:last-of-type {
	border-right: 5px solid #add8e6;
}
#site-content div.table > div.table-blue:hover {
	background-color: rgba(173,216,230,0.5);
}
#site-content div.table > div.table-green > div:first-of-type {
	border-left: 5px solid #008000;
}
#site-content div.table > div.table-green > div:last-of-type {
	border-right: 5px solid #008000;
}
#site-content div.table > div.table-green:hover {
	background-color: rgba(0,128,0,0.5);
}
#site-content div.table > div.table-red > div:first-of-type {
	border-left: 5px solid #990000;
}
#site-content div.table > div.table-red > div:last-of-type {
	border-right: 5px solid #990000;
}
#site-content div.table > div.table-red:hover {
	background-color: rgba(153,0,0,0.5);
}


@media screen and (min-width:1024px) {
	#site-content div.table {
		border-bottom: 2px solid #dddddd;
		display: table;
		min-width: 50%;
	}
	#site-content div.full-width {
		width: 100%;
	}
	
	/* row */
	#site-content div.table > div {
		display: table-row;
	}
	#site-content div.table > div:hover {
		background-color: #eeeeee;
		cursor: default;
	}
	
	/* table-head row */
	#site-content div.table > div:first-of-type {
		display: table-header-group;
	}
	
	/* column */
	#site-content div.table > div > div {
		border-left: 1px solid #eeeeee;
		display: table-cell;
		text-align: center;
		position: relative;
	}
	#site-content div.table.no-center > div > div {
		text-align: left;
	}
	#site-content div.table > div > div::before {
		display: none;
	}
    #site-content div.table.three-columns > div > div {
		width: 33.333%;
	}
	#site-content div.table.four-columns > div > div {
		width: 25%;
	}
	
	#site-content div.table > div > div.wid10 { width: 10%; }
	#site-content div.table > div > div.wid15 { width: 15%; }
	#site-content div.table > div > div.wid20 { width: 20%; }
	#site-content div.table > div > div.wid25 { width: 25%; }
	#site-content div.table > div > div.wid30 { width: 30%; }
	#site-content div.table > div > div.wid33 { width: 33.333%; }
	#site-content div.table > div > div.wid40 { width: 40%; }
	#site-content div.table > div > div.wid45 { width: 45%; }
	#site-content div.table > div > div.wid50 { width: 50%; }
	#site-content div.table > div > div.wid60 { width: 60%; }
	#site-content div.table > div > div.wid66 { width: 66.666%; }
	#site-content div.table > div > div.wid70 { width: 70%; }
	#site-content div.table > div > div.wid75 { width: 75%; }
	#site-content div.table > div > div.wid80 { width: 80%; }
	#site-content div.table > div > div.wid90 { width: 90%; }
	#site-content div.table > div > div.wid100 { width: 100%; }
	
	#site-content div#payment-plans > div > div:first-of-type {
		font-weight: 600;
		width: 33.333%;
	}
	
	/* table-head column and two-variable tables */
	#site-content div.table:not(.no-table-head) > div:first-of-type > div,
	#site-content div.two-variables > div > div:first-of-type {
		background-color: #717171;
		border: none;
		border-bottom: 1px solid #b1b1b1;
		border-right: 1px solid #b1b1b1;
		color: #dddddd;
	}
	#site-content div.two-variables > div:nth-of-type(n+2):hover > div:first-of-type {
		background-color: #252525;
	}
	#site-content div.two-variables:not(.no-table-head) > div > div:first-of-type {
		text-align: right;
	}
	#site-content div.left-variable.no-table-head > div > div:first-of-type {
		font-weight: 600;
		text-align: left;
	}
	
	/* TABLES BEING USED IN ACCORDION */
	#site-content .accordion div.table > div > div {
		background-color: #ffffff;
	}
	#site-content .accordion div.table > div:hover > div {
		background-color: #eeeeee;
	}
	
	#site-content .accordion div.left-variable > div > div:first-of-type {
		background-color: #6a6f75;
		color: #ffffff;
	}
	#site-content .accordion div.left-variable > div:hover > div:first-of-type {
		background-color: #2e3033;
	}
	
	#site-content .accordion div.left-variable > div > div:first-of-type a {
		color: #ffd659;
	}
	
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  ACCORDIAN

Display of layered content such as scholarships and student clubs and organizations */

#site-content ul.accordian {
	list-style-type:none !important;
	margin:0 0 0 0 !important; 
	padding:0 0 0 0 !important;
}

#site-content ul.accordian li {
	background:#f7f7f7;
	margin-bottom:1px;
}

#site-content ul.accordian li > a {
	border:none;
	cursor:pointer;
	display:block;
	text-decoration: none;
}

#site-content ul.accordian li > a {
	padding:10px 10px 10px 10px;
	text-transform:uppercase;
}

#site-content ul.accordian li ul {
	background:#dddddd;
}

#site-content ul.accordian li ul li {
	background:none;
	border-bottom:1px solid rgba(255,255,255,0.2);
	margin-bottom:0;
}

#site-content ul.accordian li ul li > a {
	padding:3px 20px 3px 20px;
	text-transform:none;
}

#site-content ul.accordian ul.level-two {
	padding:10px 20px 10px 20px;
}

#site-content ul.accordian ul.level-two li {
	background:#ffffff;
	padding:0 20px 0 20px;
}
#site-content ul.accordian ul.level-two li:first-of-type {
	padding-top:10px;
}
#site-content ul.accordian ul.level-two li:last-of-type {
	padding-bottom:10px;
}

#site-content  ul.accordian ul.level-two li div {
	display:inline-block;
	margin:0 0 0 5px;
}

/* faq accordion lists */
#site-content ul.faq > li > ul > li {
	background-color:#ffffff;
	padding:5px 20px 5px 20px;
}

#site-content ul.faq > li > ul > li > ol {
	margin:20px 0 20px 0;
}

#site-content ul.faq > li > ul > li > ol a,
#site-content ul.faq > li > ul > li > p a {
	border-bottom:1px dotted #21669c;
	display:inline;
	padding:0 0 0 0;
	transition:none;
}
#site-content ul.faq > li > ul > li > ol a:hover,
#site-content ul.faq > li > ul > li > p a:hover {
	border-bottom:1px solid;
	transition:none;
	padding:0 0 0 0;
}


@media screen and (min-width:1024px) {
	#site-content ul.accordian a:hover {
		border:none;
	}
	
	#site-content ul.accordian li > a:hover {
		padding-left:20px;
	}
	
	#site-content ul.accordian li ul li > a:hover {
		padding-left:30px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  ACCORDION

New, improved and spelled properly. Format is div with the .accordian and optional .faq. The H3 triggers the reveal of the preceeding div. JQuery enabled and generates the +/- icon on .accordian and the "<strong>Q:</strong>" on the .faq */

.accordion {}

.accordion > h3 {
	background-color: #dddddd;
	cursor: pointer;
	font-family: 'Roboto Slab', serif;
	font-size: 0.875em;
	font-weight: 500;
	margin: 20px 0 0 0;
	padding: 20px 60px 20px 20px;
	position: relative;
}

.accordion.faq > h3 {
	font-size: 0.875em !important;
	margin: 5px 0 !important;
}

.accordion.faq > h3 {
	padding: 10px 60px 10px 10px;
}

.accordion > h3:hover {
	background-color: #c4c4c4;
	transition: background 0.5s ease-in-out;
}

.accordion:not(.faq) > h3 {
	font-size: 1.5em;
}

.accordion > h3.blue-bg {
	background-color: #21669c;
	color: #ffffff;
	transition: all 0.5s ease-in-out;
}
.accordion > h3.blue-bg:hover {
	background-color: #133c5c;
	transition: all 0.5s ease-in-out;
}

/* "Q:" and "A:" styling */
.accordion.faq > h3 strong,
.accordion.faq > div > p:first-of-type strong:first-of-type {
	font-size: 1em;
	font-weight: 700;
	padding-right: 8px;
}

.accordion > h3 i {
	color: #ffffff;
	position: absolute;
	right: 20px;
	top: 23px;
}

.accordion.faq > h3 i {
	top: 13px;
}

.accordion > div {
	padding: 20px 20px 20px 20px;
	position: relative;
}

.accordion.faq > div {
	padding: 10px;
}

.accordion h3 + div > :first-child {
	margin-top: 0 !important;
}
.accordion:not(.faq) > div {
	background-color: #f7f7f7;
}

.accordion > div h3 {
	font-size: 2em;
	font-weight: 400;
	margin: 30px 0 0 0;
}

#site-content .accordion div h3 + h4,
#site-content h5 + p {
	margin-top: 0;
}

.accordion > div > p {
	line-height: 1.5;
	margin: 20px 0 20px 0;
}
.accordion > div > h3 + p,
.accordion > div > h4 + p,
.accordion > div > h5 + p {
	margin-top: 0;
}

.accordion > div a {
	text-decoration: underline;
}

.accordion ul.buttons a {
    text-decoration: none;
}

.accordion > div > ul {
	list-style: square;
}

.accordion ul li {
	margin: 0 0 5px 0;
}

#site-content .accordion p.note::before {
	background-color: #f7f7f7;
	top: -12px;
}

/* ACCORION BUTTONS */
#site-content .accordion ul.flex-buttons {
	margin-top: 20px;
}

#site-content .accordion ul.flex-buttons li a {
	text-decoration: none;
}

#site-content .accordion ul.flex-buttons + h3,
#site-content .accordion ul.flex-buttons + h4,
#site-content .accordion ul.flex-buttons + h5 {
	margin-top: 20px;
}

/* TRANSFER INFORMATION - this is for a data-table with external links. This style will "deaden" a listing that doesn't have a link */
#site-content .accordion div.transfer-info > div > div {
	color: #a3acb5;
	width: 33.333%;
}

/* ACCORDION EMPHASIS */
.emphasis {
	background-color: #eeeeee;
	border-left: 10px solid #21669c;
	font-size: 1.125em;
	line-height: 2em;
	margin: 20px 0 0 0;
	padding: 10px 10px 10px 20px;
}
.accordion .emphasis {
	background-color: #ffffff;
}

/* ACCORDION CALENDAR */
.accordion .calendar {
	margin: 20px 0 0 0;
}

#site-content .accordion .calendar section {
	background-color: #ffffff;
	border-left: 10px solid #ffd659;
	font-size: 0.875em;
	padding: 10px 10px 10px 20px;
}
#site-content .accordion .calendar section + section {
	margin: 10px 0 0 0;
}

#site-content .accordion .calendar h5 {
	margin-top: 0;
	font-weight: 600;
}

#site-content .accordion h5 a {
	border: none;
}

#site-content .accordion .calendar h5 time {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
}

#site-content .accordion .calendar h5 time i {
	padding: 0 6px 0 0;
}

#site-content .accordion .calendar section > p {
	margin: 10px 0 0 0;
}

#site-content .accordion .calendar section > p a {
	border: none;
}

/* wordpress... could you just not? Fine then. See how you like not being displayed. Punk. */
.accordion .calendar > p {
	display: none;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CALL-TO-ACTION

The floating buttons at the top and button of the main, students and faculty and staff homepages.  */

.call-to-action {
	padding: 20px 20px 20px 20px;
}

.call-to-action ul {
	list-style: none;
	margin: 0 auto 0 auto;
	max-width: 1280px;
	padding: 0 0 0 0;
	width: 100%;
}

.call-to-action ul li {
	border-radius: 5px 5px 5px 5px;
}

.call-to-action ul li a {
	align-items: center;
	background-color: rgba(33,102,156,1);
	border: 2px solid #ffffff;
	border-radius: 5px 5px 5px 5px;
	color: #ffffff;
	display: flex;
	height: 100%;
	justify-content: space-between;
	line-height: 1.2;
	padding: 10px 10px 10px 10px;
	width: 100%;
}


@media screen and (max-width: 767px) {
	.call-to-action ul li:not(:last-of-type) {
		margin: 0 0 10px 0;
	}
}

@media screen and (min-width: 768px) {
	.call-to-action {
		padding: 0 20px 0 20px;
		position: absolute;
		top: -30px;
		width: 100%;
		z-index: 50;
	}
	.blogid-1 #site-footer .call-to-action {
		top: 65px;
	}
	
	.call-to-action ul li a i {
		display: none;
	}
	
	.call-to-action ul {
		display: flex;
		height: 90px;
		justify-content: space-between;
	}
	
	.call-to-action ul li {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		margin-bottom: 0;
	}
	.blogid-1 #above-the-fold .call-to-action ul li {
		width: calc(20% - 10px);
	}
	.blogid-1 #above-the-fold .call-to-action ul li:nth-of-type(1) {
		background-image: url(https://icc.edu/wp-content/uploads/response-background-girl-smiling-with-backpack.jpg);
	}
	.blogid-1 #above-the-fold .call-to-action ul li:nth-of-type(2) {
		background-image: url(https://icc.edu/wp-content/uploads/response-background-students-outside-reviewing-work.jpg);
	}
	.blogid-1 #above-the-fold .call-to-action ul li:nth-of-type(3) {
		background-image: url(https://icc.edu/wp-content/uploads/response-background-east-peoria-campus-administration-building.jpg);
	}
	.blogid-1 #above-the-fold .call-to-action ul li:nth-of-type(4) {
		background-image: url(https://icc.edu/wp-content/uploads/response-background-smiling-student-.jpg);
	}
	.blogid-1 #above-the-fold .call-to-action ul li:nth-of-type(5) {
		background-image: url(https://icc.edu/wp-content/uploads/response-background-smiling-students-posing.jpg);
	}
	.blogid-1 #site-footer .call-to-action ul li {
		width: calc(25% - 10px);
	}
	.blogid-1 #site-footer .call-to-action li:nth-of-type(1) {
		background-image:url(https://icc.edu/wp-content/uploads/response-background-money-for-college.jpg);
	}
	.blogid-1 #site-footer .call-to-action li:nth-of-type(2) {
		background-image:url(https://icc.edu/wp-content/uploads/response-background-icc-faculty-smiling.jpg);
	}
	.blogid-1 #site-footer .call-to-action li:nth-of-type(3) {
		background-image:url(https://icc.edu/wp-content/uploads/response-background-all-hands-in.jpg);
	}
	.blogid-1 #site-footer .call-to-action li:nth-of-type(4) {
		background-image:url(https://icc.edu/wp-content/uploads/response-background-plotting-the-course.jpg);
	}
	.blogid-15 #above-the-fold .call-to-action ul li {
		width: calc(25% - 10px);
	}
	.blogid-15 #above-the-fold .call-to-action ul li:nth-of-type(1) {
		background-image:url(https://icc.edu/wp-content/uploads/featured-image-stacked-books.jpg);
	}
	.blogid-15 #above-the-fold .call-to-action ul li:nth-of-type(2) {
		background-image:url(https://icc.edu/wp-content/uploads/featured-image-typing-on-laptop.jpg);
	}
	.blogid-15 #above-the-fold .call-to-action ul li:nth-of-type(3) {
		background-image:url(https://icc.edu/wp-content/uploads/response-background-east-peoria-campus-administration-building.jpg);
	}
	.blogid-15 #above-the-fold .call-to-action ul li:nth-of-type(4) {
		background-image:url(https://icc.edu/wp-content/uploads/featured-image-rack-of-books.jpg);
	}
	.blogid-15 #site-footer .call-to-action ul li {
		width: calc(20% - 10px);
	}
	.blogid-15 #site-footer .call-to-action ul li:nth-of-type(1) {
		background-image:url(https://icc.edu/wp-content/uploads/featured-image-right-direction.jpg);
	}
	.blogid-15 #site-footer .call-to-action ul li:nth-of-type(2) {
		background-image:url(https://icc.edu/wp-content/uploads/featured-image-keyboard-help.jpg);
	}
	.blogid-15 #site-footer .call-to-action ul li:nth-of-type(3) {
		background-image:url(https://icc.edu/wp-content/uploads/featured-image-cougarKudos.jpg);
	}
	.blogid-15 #site-footer .call-to-action ul li:nth-of-type(4) {
		background-image:url(https://icc.edu/wp-content/uploads/featured-image-front-arbor-hall.jpg);
	}
	.blogid-15 #site-footer .call-to-action ul li:nth-of-type(5) {
		background-image:url(https://icc.edu/wp-content/uploads/featured-image-spanish-dancer-statue.jpg);
	}
	
	.call-to-action ul li a {
		align-items: flex-end;
		background-color: rgba(33,102,156,0);
		justify-content: flex-end;
		padding: 0 0 0 0;
		text-align: right;
		transition: all 0.5s ease-in-out;
	}
	.call-to-action ul li a:hover {
		background-color: rgba(33,102,156,0.5);
		padding-bottom: 10px;
		transition: all 0.5s ease-in-out;
	}
	
	.call-to-action ul li a span {
		padding: 0 10px 10px 0;
		text-shadow: 0 0 3px rgba(0,0,0,0.75);
		transition: all 0.5s ease-in-out;
	}
	
	.call-to-action ul li a span strong {
		display: block;
	}
}

@media screen and (min-width: 1024px) {
	.call-to-action {
		top: -40px;
	}
	
	.call-to-action ul {
		height: 120px;
	}
	
	.call-to-action ul li a {
		font-size: 1.25em;
	}
}



/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  ACCORDION AS SECTION  */

#site-content .event-grid a {
	border-bottom: none;
}


.event-grid > section.accordion:hover {
	background-color: rgba(0,0,0,0.2);
	cursor: pointer;
}

.event-grid > section.accordion h2 {
	padding-right: 60px;
	position: relative;
}

.event-grid > section.accordion h2 i.fa-plus,
.event-grid > section.accordion h2 i.fa-minus {
	color: #252729;
	padding-right: 0;
	position: absolute;
	right: 0;
	top: 2px;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  FLEX LIST

For displaying lots of options.  */

#site-content ul.flex-list,
#site-content .tribe-events-content ul.flex-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	justify-content: space-between;
	margin: 20px 0 0 0;
	padding: 0 0 0 0;
}

#site-content ul.flex-list li,
#site-content .tribe-events-content ul.flex-list li {
	background-color: #3e6b64;
	border-radius: 5px 5px 5px 5px;
	color: #ffffff;
	flex-grow: 1;
	margin: 3px 3px 3px 3px;
	padding: 0 5px 0 5px;
	text-align: center;
}


/*  ››››››››››››››››››››››››››››››››››››››››
	››››››››››››››››››››››››››››››››››››››››  FLEX COLUMN  */
	
#site-content ul.flex-column,
#site-content .tribe-events-content ul.flex-column {
	list-style: none !important;
	margin: 20px 0 10px 20px;
	padding: 0 0 0 0 !important;
}

@media screen and (min-width: 768px) {
	#site-content ul.flex-column {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 20px 0 10px 0;
	}

		#site-content ul.flex-column:after {
			content: '';
			flex: auto;
		}
	
	#site-content ul.flex-column li,
	#site-content .accordion ul.flex-column li {
		line-height: 1.2;
		padding: 0 10px 0 10px;
		width: 50%;
	}
}


@media screen and (min-width: 1024px) {
	#site-content ul.flex-column li {
		width: 33.333%;
	}
	#site-content .accordion ul.flex-column li {
		width: 50%;
	}
}





/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CALL-OUT BOX  */

div.call-out {
	background: linear-gradient(to bottom right,#21669c,#1d4ab3);
	border-radius: 5px 5px 5px 5px;
	color: #ffffff;
	font-size: 0.75em;
	line-height: 1.7;
	padding: 15px 15px 15px 15px;
	text-align: center;
}

div.call-out h5 {
	color: #ffd659;
	font-size: 2.083em;
	font-weight: 800;
	line-height: 1;
	margin: 0 0 0 0;
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
	text-transform: uppercase;
}

div.call-out p a {
	background-color: #ffd659;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	color: #252729;
	display: block;
	padding: 5px 10px 5px 10px;
	text-transform: uppercase;
	transition: all 0.5s ease-in-out;
}
div.call-out p a:hover {
	background-color: #ffffff;
	color: #21669c;
	transition: all 0.5s ease-in-out;
}
	


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  EVENT GRID  */

.event-grid {
	background-color: #dddddd;
	border-radius: 10px 10px 10px 10px;
	padding: 20px 20px 20px 20px;
}

.event-grid.stand-alone {
	background-color: none;
	border-radius: 0 0 0 0;
	padding: 0 0 0 0;
}

.event-grid i {
	padding: 0 6px 0 0;
}

.event-grid .title {
	color: #465e75;
	font-family: 'Roboto Slab', serif;
	font-size: 1.5em !important;
	font-weight: 600;
	margin: 0 0 10px 0 !important;
}

.event-grid .title .date {
	color: #374a5c;
}

.event-grid > section {
	background-color: rgba(255,255,255,0.75);
	border-radius: 10px 10px 10px 10px;
	padding: 20px 20px 20px 20px;
}
.event-grid > section:not(:first-of-type) {
	margin: 20px 0 0 0;
}

.event-grid.stand-alone > section {
	background-color: #eeeeee;
	border-bottom: 3px solid #ffffff;
	border-radius: 0 0 0 0;
	margin: 0 0 0 0;
	transition: background 0.5s ease-in-out;
}
.event-grid.stand-alone > section.accordion:hover {
	background-color: #bababa;
	transition: background 0.5s ease-in-out;
}
.event-grid.stand-alone > section:nth-last-of-type(even) {
	background-color: #dddddd;
}.event-grid.stand-alone > section:nth-last-of-type(even).accordion:hover {
	background-color: #bababa;
	transition: background 0.5s ease-in-out;
}

.event-grid p {
	font-size: 0.875em;
	margin: 15px 0 15px 0;
}


/* ACCORDION EVENT GRID */
.event-grid > section.accordion + div {
	background-color: #ffffff;
	padding: 10px 20px 40px 20px;
}

.event-grid > section.accordion + div > :first-child {
	margin-top: 0;
}

.event-grid > section.accordion + div .video-embed {
	float: right;
	margin: 40px 0 40px 40px;
	width: calc(50% - 20px);
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  VIDEO EMBED  */

.video-embed {
	height:0;
	padding:25px 0 50% 0;
	position:relative;
}

.video-embed iframe {
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  FRONTPAGE EVENTS, NEWS and ACADEMIC CALENDAR  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

Display of events on the icc.edu, /students and /faculty-staff frontpage */

.home #events {
	padding:0 0 30px 0;
}

.home #news {
	padding:30px 0 30px 0;
}

.home #events section > ul,
.home #news section.calendar ul {
	padding:10px 0 10px 0;
}

/* have the featured events 50% of the featured+ event */
.home #events .featured ul:nth-of-type(2) li {
	float:left;
	width:-webkit-calc(50% - 5px);
	width:calc(50% - 5px);
}
.home #events .featured ul:nth-of-type(2) li:nth-of-type(1) {
	margin-right:10px;
}
.home #events .featured ul:nth-of-type(2) .image-link div {
	height:150px;
}

.frontpage section ul,
article {
	font-size:0.75em;
}
.frontpage section.calendar ul {
	font-size:1em;
}

.featured article {
	background-color:#fafafa;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	border:2px solid #dddddd;
	margin:10px 0 10px 0;
}

.image-link div,
article header .imagery {
	background-position:center 20%;
	background-repeat:no-repeat;
	background-size:cover;
	height:200px;
	margin:0 0 10px 0;
}
.news-page article header .imagery {
	border:none;
}
.featured ul:nth-of-type(1) .image-link div {
	height:300px;
}


/*////////////////////////////////////////*/
/* Makes featured event image responsive */
.home .featured .image-link div.imagery { 
	height: 0px !important;
	padding-top: 50%; /*change if image demensions are not 350h 700w equation = h/w*100 */
}
/*////////////////////////////////////////*/


.frontpage .featured ul:nth-of-type(1) a:last-of-type,
.frontpage .featured ul:nth-of-type(2) a:last-of-type,
.featured article h3,
.featured article div.imagery + h3,
.frontpage .list ul li a,
.frontpage .list article a {
	display:block;
	font-weight:600;
	line-height:1.2;
	margin:0 5px 0 5px;
}
.featured article h3 {
	font-size:2em;
	margin:10px 10px 20px 10px;
}
.frontpage .featured ul:nth-of-type(1) a:last-of-type,
.featured article div.imagery + h3 {
	font-size:1.7em;
}
.frontpage .featured ul:nth-of-type(2) a:last-of-type {
	font-size:1.167em;
}
.frontpage .featured ul:nth-of-type(1) a:last-of-type,
.frontpage .featured ul:nth-of-type(2) a:last-of-type,
.featured article div.imagery + h3 {
	margin-bottom:10px;
}
.frontpage .list article a {
	font-weight:400;
}
.featured article h3 {
	font-weight:400;
	font-size:2.5em;
}
.featured article div.imagery + h3 {
	font-size:1.333em;
}

.frontpage .list article h3 {
	font-size:1em;
	margin:0 0 0 0;
}

article p {
	margin:0 10px 10px 10px;
}

article footer {
	border-top:1px solid #dddddd;
	font-size:0.875em;
	margin:10px 10px 10px 10px;
	padding:10px 10px 0 10px;
}

article footer time {
	padding:0 0 0 10px;
}

.frontpage .list h3,
.frontpage .list h4,
.frontpage .list ul,
.frontpage .list article,
.frontpage .calendar h3,
.frontpage .calendar h4,
.frontpage .calendar ul {
	display:none;
}

.frontpage .list ul li,
.frontpage .list article {
	border-bottom:2px solid #dddddd;
	padding:10px 0 10px 0;
}
.frontpage .list ul li:first-of-type {
	padding-top:0;
}

.frontpage section .date-time,
.frontpage section .location,
.frontpage section .description {
	display:block;
	margin:0 5px 0 5px;
}
.frontpage section .date-time {
	font-weight:300;
}
.frontpage section .location {
	font-weight:600;
}
.frontpage section.featured .description {
	margin-top:10px;
}


@media screen and (min-width:768px) {
	.featured article {
		float:left;
		min-height:400px;
		padding:0 0 45px 0;
		position:relative;
	}
	.featured article:nth-of-type(odd) {
		margin-right:10px;
	}
	.featured article {
		width:-webkit-calc(50% - 5px);
		width:calc(50% - 5px);
	}
	
	.featured article footer {
		bottom:0;
		position:absolute;
		width:-webkit-calc(100% - 20px);
		width:calc(100% - 20px);
	}
}


@media screen and (min-width:1024px) {
	.frontpage .list h3,
	.frontpage .list h4,
	.frontpage .list ul,
	.frontpage .list article,
	.frontpage .calendar h3,
	.frontpage .calendar h4,
	.frontpage .calendar ul {
		display:block;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CALENDAR */

.frontpage .calendar ul li {
	background-color:#f7f7f7;
	border-left:5px solid #ffd659;
	font-size:1em;
	font-weight:600;
	margin:0 0 2px 0;
	min-height:75px;
	padding:15px 10px 15px 85px;
}

.frontpage .calendar .date,
.frontpage .calendar .end-date {
	color:#999999;
	left:15px;
	line-height:1.2;
	text-transform:uppercase;
	top:12px;
	width:70px;
}

.frontpage .calendar .date .day,
.frontpage .calendar .date .month {
	display:block;
}
.frontpage .calendar .date .day {
	font-weight:300;
}

.frontpage .calendar .end-date {
	left:42px;
	line-height:1;
	text-align:right;
	top:18px;
	width:28px;
}

.frontpage .calendar .end-date .day {
	display:inline-block;
	font-weight:400;
	padding:0 0 0 3px;
}

.frontpage .calendar .date-time,
.frontpage .calendar .location {
	display:block;
	font-weight:400;
	margin:10px 0 0 0;
	padding:0 0 0 18px;
}
.frontpage .calendar .date-time:before {
	left:0;
	top:3px;
}
.frontpage .calendar .location:before {
	left:2px;
	top:3px;
}

.frontpage .calendar ul li > a {
	border-bottom:none;
}

.frontpage .calendar ul li > p {
	font-size:0.75em;
	font-weight:400;
	margin-left:0;
	margin-right:0;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  ** EXPANDING FEATURED EVENT+ **

With Lendus gone and no replacement in sight, I'm not able to keep up with having events for FEATURED EVENT and FEATURED EVENT+. Therefore, we're eliminating FEATURED EVENT and displaying the next THREE FEATURED EVENT+. It'll have the same look 'n feel so the below code sets up the three FEATURED EVENT+ as such.  */

#events .featured ul li {
	/*margin-top: 20px;*/
	padding: 10px 10px 10px 10px;
}

#events .featured .description {
	display: block;
	margin: 10px 5px 0 5px;
}
#events .featured ul li:not(:first-of-type) .description {
	display: none;
}


@media screen and (min-width: 768px) {
	#events .featured ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		/*margin: 20px 10px 0 10px;*/
	}
	
	/*#events .featured ul li:not(:first-of-type) {
		width: calc(50% - 20px);
	}*/
	#events .featured ul li {
		/*width: calc(50% - 20px);*/
		width: 50%;
	}
	#events .featured ul li:first-of-type {
		width: 100%;
	}
}


@media screen and (min-width: 1024px) {
	#events .featured ul li:not(:first-of-type) .image-link div {
		height: 150px;
	}
}


.featured ul,
.featured ul li {
	/*border: 1px dotted #990000;*/
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SITE ASIDE  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

for placing contact information on the side of the page. additionally, some financial aid videos from financialaidtv.com are sometimes being placed there. the calling of the videos is really indepth so it doesn't affect the playlist embed that's within the copy of the webpages.  */

aside,
main > div > div.embed-playlist-container,
div.call-out {
	margin:0 10px 40px 10px;
	width:-webkit-calc(100% - 20px);
	width:calc(100% - 20px);
}

aside.message {
	border: 1px solid #dddddd;
	font-size: 0.875em;
	padding: 25px 25px 25px 25px;
}
aside.message :first-child {
	margin-top: 0;
}
aside.message :last-child {
	margin-bottom: 0;
}

aside.message h2 {
	font-family: 'Roboto Slab', serif;
	font-size: 1.5em;
	font-weight: 400;
	margin: 20px 0 10px 0;
	/*text-transform: uppercase;*/
}

aside.message p {
	margin: 20px 0 20px 0;
}

aside.message p a {
	text-decoration: underline;
}


@media screen and (min-width:768px) {
	#site-nav ~ aside,
	#site-nav ~ .embed-playlist-container,
	#site-nav ~ div.call-out {
		float:right;
		margin-left:20px;
		margin-right:20px;
		width:-webkit-calc(66.666% - 40px);
		width:calc(66.666% - 40px);
	}
}


@media screen and (min-width:1024px) {
	aside,
	main > div > div.embed-playlist-container,
	div.call-out {
		float:left;
		width:-webkit-calc(25% - 20px);
		width:calc(25% - 20px);
	}
	#site-nav ~ aside,
	#site-nav ~ .embed-playlist-container,
	#site-nav ~ div.call-out {
		margin-right:25%;
		width:-webkit-calc(50% - 20px);
		width:calc(50% - 20px);
	}
}


@media screen and (min-width:1280px) {
	#site-nav ~ aside,
	#site-nav ~ .embed-playlist-container,
	#site-nav ~ div.call-out {
		margin-left:10px;
		margin-right:10px;
		width:-webkit-calc(20% - 20px);
		width:calc(20% - 20px);
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SITE FOOTER  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

#site-footer {
	background-color:#eeeeee;
	padding:10px 0 10px 0;
}

#site-footer > div {
	padding:0 5px 0 5px;
}



/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SEARCH RESULTS  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

.gsc-selected-option-container {
	max-width: 100% !important;
}

.gsc-result .gs-title {
	height:auto;
	
	background-color:rgba(255,0,0,0.1);
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  PLUGIN OVERRIDES  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹ */


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  THE EVENTS CALENDAR PRO */


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  VISUAL FORM BUILDER PRO */

    form.vfbp-form .vfb-form-group h1 {
        padding: 0 0 0 0;
    }

	form.vfbp-form .vfb-help-block {
		font-size: .75em;
		padding: 5px 5px 5px 5px;
		line-height: 1.5;
	}

        form.vfbp-form .vfb-checkbox + .vfb-help-block {
            margin: 5px 0 0 0; 
        }

    form.vfbp-form .vfb-signature-buttons a.btn-primary {
        background: #a83633;
        border-bottom: none !important;
        transition: background .4s ease-in-out;
        width: auto;
    }

        form.vfbp-form .vfb-signature-buttons a.btn-primary:hover {
            background: #882623;
        }

    form.vfbp-form .vfb-fieldType-instructions .vfb-form-group > label:empty {
        display: none;
    }


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  WORDPRESS GALLERY  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹
*/

#gallery-2 img {
    height: inherit;
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SLIDER TEXT FIX  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

Fixing that orphan that was bothering kim.  */

@media screen and (min-width:1280px) {
	.break {
		padding-right:10px;
	}
}



/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  ERROR DETECTION METHOD  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

The following code outlines all elements to find spacing errors */

/** {
    background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important;
}*/