/*	

	Theme Name: ACADEMICS
	Theme URI: http://icc.edu/academics
	Description: Used for styles that are specific to only sections under Academics
	Author: Web Services
	Author URI: http://icc.edu
	Version: (2.0)
	Template: global
		
		
	››››››››››››››››››››››››››››››››››››››››  TABLE OF CONTENTS  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹
	 	all line numbers are estimates
		
		GLOBAL OVERRIDE .......................................  
			APPLY CURVED EDGES ................................  
			APPLY ANIMATION ...................................  
		
		KEYWORD SEARCH ........................................  
		
		ACADEMIC PROGRAM SEARCH ...............................  
			APPLY NOW, COMPARE PROGRAMS
				and REQUEST INFORMATION BUTTONS ...............  
			KEYWORD SEARCH RESULTS ............................  
		
		COMPARE PROGRAM FEATURE ...............................  
			CLOSE COMPARISON BUTTON ...........................  
			PROGRAM SECTIONS ..................................  
			CALL-TO-ACTION BUTTONS ............................  
		
		REQUEST INFORMATION FORM ..............................  
		
		CATALOG ...............................................  
		
		CLASS SCHEDULE ----------------------------------------  
		
		THE STUDIO ............................................  
			NAVIGATION ........................................  
			HOMEPAGE IMAGERY ..................................  
			CONTENT ...........................................  
			CONTACT DIRECTORY .................................  
		
		LEARNING LABS CHAT WIDGET .............................  
		
		PLUGIN OVERRIDES ......................................  
			VISUAL FORM BUILDER PRO ...........................  
			




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


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


@media screen and (min-width:1024px) {
	#degrees.compartments section {
		float:left;
		height:375px;
		margin-left:10px;
		padding-bottom:60px;
		position:relative;
		width:-webkit-calc(33.333% - 6.667px);
		width:calc(33.333% - 6.667px);
	}
	#degrees.compartments section:nth-of-type(3n+1) {
		clear:left;
		margin-left:0;
	}
	
	#degrees.compartments section ul.buttons {
		bottom:10px;
		position:absolute;
		width:-webkit-calc(100% - 20px);
		width:calc(100% - 20px);
	}
	
	#academic-support.compartments section {
		float:left;
		height:265px;
		margin-left:10px;
		padding-bottom:60px;
		position:relative;
		width:-webkit-calc(50% - 5px);
		width:calc(50% - 5px);
	}
	#academic-support.compartments section:nth-of-type(odd) {
		clear:left;
		margin-left:0;
	}
	
	#academic-support.compartments section ul.buttons {
		bottom:10px;
		position:absolute;
		width:-webkit-calc(100% - 20px);
		width:calc(100% - 20px);
	}
}


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

/* layout containers clear floating objects */
#keyword-search:after {
	clear:both;
	content:"";
	display:table;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  APPLY CURVED EDGES  */

#keyword-search input,
#keyword-search select,
#keyword-search input[type="submit"],
#apply-now a,
#kresult button,
#close-compare a,
section.compareview,
section.compareview .action a,
#request-info-form .vfbp-form .btn-primary,
#studio nav ul li a:hover,
#studio #studio-content .layout-container img.size-full,
.libraryh3lp,
.libraryh3lp a {
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
}

.page-parent #studio #homepage-imagery,
#homepage-imagery a {
	-moz-border-radius:50% 50% 50% 50%;
	-webkit-border-radius:50% 50% 50% 50%;
	border-radius:50% 50% 50% 50%;
}


@media screen and (min-width:1280px) {
	.compare-2,
	.compare-3 {
		-moz-border-radius:5px 5px 5px 5px;
		-webkit-border-radius:5px 5px 5px 5px;
		border-radius:5px 5px 5px 5px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  APPLY ANIMATION  */

#homepage-imagery a,
#site-content ul.catalog li a,
#site-content ul.catalog li a:hover {
	transition:all 0.5s ease-in
}


@media screen and (min-width:768px) {
	#homepage-imagery a:hover {
		transition:all 500ms ease-in;
	}
}


@media screen and (min-width:1280px) {
	.page-id-2728 #header-logo a#icc-icon,
	.page-id-2728 #header-logo a#icc-icon:hover,
	.parent-pageid-2728 #header-logo a#icc-icon,
	.parent-pageid-2728 #header-logo a#icc-icon:hover,
	body.page-template-the-studio #header-logo a#icc-icon,
	body.page-template-the-studio #header-logo a#icc-icon:hover {
		transition:all 500ms ease-in;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  KEYWORD SEARCH  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

#keyword-search {
	background:linear-gradient(#eeeeee,#d4d4d4);
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	padding:10px 10px 10px 10px;
}

#keyword-search h2 {
	font-weight:400;
	margin:0 0 0 0;
}

#keyword-search > div {
	margin:10px 0 0 0;
}

#keyword-search input,
#keyword-search select {
	-moz-appearance:none;
	-webkit-appearance:none;
	background-color:#ffffff;
	border:none;
	box-shadow:none;
	font-size:0.875em;
	font-weight:300;
	height:40px;
	margin:0 0 0 0;
	outline:none;
	padding:5px 10px 5px 10px;
	width:100%;
}
#keyword-search input[type="text"]::-webkit-input-placeholder {
	color:#111111;
	opacity:1;
}
#keyword-search input[type="text"]::-moz-placeholder {
	color:#111111;
	opacity:1;
}

#keyword-search input[type="text"]::-ms-input-placeholder {
	color:#111111;
	opacity:1;
}
#keyword-search input[type="text"]::-moz-placeholder {
	color:#111111;
	opacity:1;
}

#keyword-search input[type="submit"] {
	background-color:#ffd659;
	border:3px solid #ffffff;
	color:#21669c;
	cursor:pointer;
	font-size:0.75em;
	font-weight:600;
	outline:none;
	text-transform:uppercase;
}
#keyword-search input[type="submit"]:hover {
	background-color:#21669c;
	color:#ffffff;
}


@media screen and (min-width:768px) {
	#keyword-search > div {
		float:left;
		width:-webkit-calc(50% - 5px);
		width:calc(50% - 5px);
	}
	#keyword-search > div:nth-of-type(1) {
		margin-right:10px;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  ACADEMIC PROGRAM SEARCH  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

#top-imagery {
	background-image:url(https://webdev.int.icc.edu/wp-content/uploads/academic-search-collage-building.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
	height:200px;
	position:relative;
}

#background-extension {
}

#background-extension h2 {
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  APPLY NOW, COMPARE PROGRAMS and REQUEST INFORMATION BUTTONS  */

#apply-now {
	margin:40px 0 20px 0;
	overflow:auto;
}

#compare-request {
	display:none;
	margin:10px 0 0 0;
}

#apply-now a {
	background:linear-gradient(#a93835,#c04b33);
	border:3px solid #dddddd;
	color:#ffffff;
	display:block;
	float:right;
	font-size:0.75em;
	font-weight:700;
	padding:10px 10px 10px 10px;
	text-align:center;
	text-transform:uppercase;
	width:50%;
}
#apply-now a:hover {
	background:linear-gradient(#21669c,#143c5c);
	color:#ffd659;
}

#kresult button {
	background:linear-gradient(#ffd659,#e8af45);
	border:3px solid #dddddd;
	cursor:pointer;
	color:#21669c;
	font-size:0.75em;
	font-weight:700;
	padding:10px 0 10px 0;
	text-transform:uppercase;
	width:100%;
}
#kresult button:hover {
	background:linear-gradient(#21669c,#143c5c);
	color:#ffd659;
}
#kresult button.disabled,
#kresult button.disabled:hover {
	background:linear-gradient(#999999,#a3a3a3);
	color:#cccccc;
	cursor:not-allowed;
}


@media screen and (min-width:768px) {
	#apply-now a {
		width:20%;
	}
	
	#compare-request {
		display:block;
		float:right;
		width:20%;
	}
	
	#kresult button:first-of-type {
		display:none;
	}
}


@media screen and (min-width:1024px) {
	#apply-now a,
	#compare-request {
		width:30%;
	}
	
	#kresult button {
		width:calc(50% - 1px);
		width:-webkit-calc(50% - 1px);
	}
	#kresult button:first-of-type {
		display:inline-block;
		margin-right:2px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  KEYWORD SEARCH RESULTS  */

#kresult {
	margin:20px 0 20px 0;
}

#kresult table {
	border:1px solid #cccccc;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	width:100%;
}

#kresult table thead {
	background-color:#999999;
	font-size:1.333em;
	font-size:1.167em;
	color:#eeeeee;
	text-transform:uppercase;
}

#kresult table tbody tr:nth-child(even) {
	background-color:#eeeeee;
}

#kresult table tr td {
	display:none;
	font-size:0.875em;
	margin:0 0 0 0;
	padding:10px 10px 10px 10px;
	vertical-align:middle;
}
#kresult table tr td:nth-of-type(1) {
	display:table-cell;
}

#kresult table tr td a {
	border-bottom:1px dotted #3198e8;
	font-size:1.167em;
	
}

#kresult table tr td label:hover {
	color:#21669c;
	cursor:pointer;
}


@media screen and (min-width:768px) {
	#kresult table tr td:nth-of-type(1) {
		width:40%;
	}
	#kresult table tr td:nth-of-type(2) {
		display:table-cell;
		width:40%;
	}
	#kresult table tr td:nth-of-type(4) {
		display:table-cell;
		width:20%;
	}
}


@media screen and (min-width:1024px) {
	#kresult table tr td:nth-of-type(1) {
		width:35%;
	}
	#kresult table tr td:nth-of-type(2) {
		width:35%;
	}
	#kresult table tr td:nth-of-type(3) {
		display:table-cell;
		width:15%;
	}
	#kresult table tr td:nth-of-type(4) {
		width:15%;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  COMPARE PROGRAM FEATURE  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

.compare-2,
.compare-3 {
	background-color:#eeeeee;
	margin-top:20px !important;
	padding:10px 0 20px 0;
}

#kresult label.disabled {
	color:#999999;
}
#kresult label.disabled:hover {
	color:#999999;
	cursor:text;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CLOSE COMPARISON BUTTON  */

#close-compare {
	padding:10px 10px 10px 10px;
}
#close-compare:after {
	clear:both;
	content:"";
	display:table;
}

#close-compare a {
	background-color:#ffffff;
	border:1px solid #cccccc;
	color:#111111;
	float:right;
	font-size:0.75em;
	padding:7px 20px 7px 20px;
	text-transform:uppercase;
}
#close-compare a:after {
	color:rgba(0,0,0,0.8);
	content:'\f057';
	font-family:fontawesome;
	padding:0 0 0 5px;
}
#close-compare a:hover {
	background:linear-gradient(#ffd659,#e8af45);
	color:#21669c;
}
#close-compare a:hover:after {
	color:#21669c;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  PROGRAM SECTIONS  */

section.compareview {
	background-color:#ffffff;
	border:1px solid #cccccc;
	margin:10px 10px 0 10px;
	padding:10px 10px 10px 10px;
}


@media screen and (min-width:768px) {
	section.compareview {
		float:left;
	}
	
	.compare-2 section.compareview {
		width:-webkit-calc(50% - 20px);
		width:calc(50% - 20px);
	}
	
	.compare-3 section.compareview {
		width:-webkit-calc(33.33% - 20px);
		width:calc(33.33% - 20px);
	}
}


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

section.compareview .action a {
	background:linear-gradient(#ffd659,#e8af45);
	border:3px solid #eeeeee;
	color:#111111;
	display:block;
	font-size:0.75em;
	font-weight:600;
	margin:10px 0 10px 0;
	padding:10px 5px 10px 5px;
	text-align:center;
	text-transform:uppercase;
}
section.compareview .action a:last-of-type {
	background:linear-gradient(#a93835,#c04b33);
	color:#ffffff;
}
section.compareview .action a:hover {
	background:linear-gradient(#21669c,#143c5c);
	color:#ffd659;
}


@media screen and (min-width:1024px) {
	.compare-2 section.compareview .action a {
		display:inline-block;
		margin:0 5px 0 0;
		width:-webkit-calc(50% - 5px);
		width:calc(50% - 5px);
	}
	.compare-2 section.compareview .action a:last-of-type {
		margin-left:5px;
		margin-right:0;
	}
}


@media screen and (min-width:1280px) {
	section.compareview .action a {
		display:inline-block;
		margin:0 5px 0 0;
		width:-webkit-calc(50% - 5px);
		width:calc(50% - 5px);
	}
	section.compareview .action a:last-of-type {
		margin-left:5px;
		margin-right:0;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  REQUEST INFORMATION FORM  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

contains many of the overrides to the visual form builder css.  */

#request-info-form {
	margin:40px 0 0 0;
	padding:0 0 20px 0;
}

/*.vfbp-form label {
	font-size:0.875em;
	font-weight:400;
}*/

#request-info-form h3 {
	font-family:"Open Sans",sans-serif;
	font-size:1.25em;
	margin:30px 10px 10px 10px;
}

#request-info-form .vfb-fieldType-submit {
	margin:30px 0 0 0;
}

#request-info-form .vfbp-form .btn-primary {
	background:linear-gradient(#21669c,#143c5c);
	border:3px solid #dddddd;
	color:#ffd659;
	font-weight:600;
	padding:10px 10px 10px 10px;
	text-transform:uppercase;
	width:100%;
}
#request-info-form .vfbp-form .btn-primary:hover {
	background:linear-gradient(#ffd659,#e8af45);
	border-color:#21669c;
	color:#21669c;
}


@media screen and (min-width:1024px) {
	#request-info-form {
		width:66.666%;
	}
	
	#request-info-form .vfb-col-4 {
		width:50%;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CATALOG  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

#site-content #programs {
    position: relative;
}

#site-content ul.catalog {
	list-style:none;
	padding-left:0;
}

#site-content ul.catalog li {
	border-bottom:1px solid #dddddd;
	margin-bottom:0;
	padding:0 10px 0 10px;
}

#site-content ul.catalog li:hover {
	background-color:#eeeeee;
}

#site-content ul.catalog li a {
	border-bottom:none;
	display:block;
	padding:10px 0 10px 0;
}

#site-content ul.catalog li a:hover {
	padding-left:5px;
}

#site-content ul.catalog li span {
	/* display:none; */
}

#site-content ul.catalog li span.black {
	display:inline-block;
}

@media screen and (min-width:1024px) {
	#site-content #programs ul.catalog {
		columns:2;
		-moz-column-gap:50px;
		-webkit-column-gap:50px;
		column-gap:50px;
	}
	
	#site-content #programs ul.catalog li {
		-webkit-column-break-inside:avoid;
		page-break-inside:avoid;
		break-inside:avoid;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CATALOG SORT BY MENU
adding a new feature as of august 2018 where we're intially displaying all the programs of study while offering an opportunity to sort them in four different ways: by career cluster, by academic department, by degree type, and alphabetical.  */

p#filter {
    position: relative;
	border-bottom:5px solid rgba(0,0,0,0.05);
	/*border-top:5px solid rgba(0,0,0,0.05);*/
	/*background-color:rgba(54,167,255,0.2);
	padding:10px 10px 10px 10px;*/
	padding:10px 0 25px 0;
	
	/*background-color:rgba(155,0,0,0.1);*/
}

p#filter em {
	font-style:normal !important;
	font-weight:300;
	text-transform:uppercase;
}

p#filter a {
	background-color:rgba(0,0,0,0.05);
	border:1px solid rgba(0,0,0,0.2);
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	color:#111111;
    cursor: pointer;
	display:block;
	font-size:0.75em;
	margin:0 0 10px 0;
	/*padding:4px 0 4px 0;*/
	text-align:center;
	text-transform:uppercase;
	transition:all 0.5s ease-in-out;
}
p#filter a:hover {
	background-color:#21669c;
	border-color:#194e77;
	color:#ffffff;
	transition:all 0.25s ease-in-out;
}

#site-content p#filter > .active {
	background-color:#3c92d3;
	border-color:#194e77;
	color:#ffffff;
}

#site-content p#filter .fa-spinner.fa-pulse {
    bottom: -100px;
    left:50%;
    margin-left: -25px;
    opacity: 0;
    position:absolute;
    z-index: 2;
}


@media screen and (min-width:1024px) {
	p#filter a {
		display:inline-block;
		width:-webkit-calc(25% - 8px);
		width:calc(25% - 8px);
	}
	/* this will need to be updated if the menu is changed over four options */
	p#filter a:nth-of-type(n+2) {
		margin-left:10px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CATALOG: DISPLAY BY ACADEMIC DEPARTMENT: CONTACT INFO  */
#site-content #programs .contact-info {
	margin:5px 0 0 0;
}

#site-content #programs .contact-info span {
	background-color:#eeeeee;
	display:inline-block;
    font-size: 0.75em;
	/*margin:0 0 5px 5px;*/
	padding:6px 20px 8px 25px;
	position:relative;
	
	/*background-color:rgba(255,0,0,0.1);*/
}
#site-content #programs .contact-info span:before {
	left:5px;
	top:9px;
}





#site-content #programs .contact-info span {
  /*  margin: 0px 20px 0px 0px;*/
}

#site-content #programs .contact-info span a {
    border-bottom: 1px dotted;
}
#site-content #programs .contact-info span a:hover {
	border-bottom-style:solid;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  PROGRAM PAGES  */

#site-content > table.catalog-courses {
	border-collapse: collapse;
}

#site-content > table.catalog-courses tr td {
	padding:5px 5px 5px 5px;
}

#site-content > table.catalog-courses a {
	border-bottom:1px dotted;
}
#site-content > table.catalog-courses a:hover {
	border-bottom-style:solid;
}



.cds-program-info {
	border-top:1px dotted #dddddd;
	margin:20px 0 0 0;
	overflow:auto;
	padding:20px 0 0 0;
}
.cds-program-info h4:first-of-type {
	margin-top:0;
}
	
#right-column {
	width:100%;
}

#right-column .info-box {
	background-color:#eeeeee;
	border-bottom:10px solid #cccccc;
	font-size:12px;
	margin:0 0 20px 0;
	padding:10px 10px 0 10px;
}

#right-column .info-box h4 {
	font-size:14px;
	line-height:1.2;
	margin-top:0;
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  THE STUDIO  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

Redesign to the website for new administrator, circa April 2017. Utilized the WordPress designated class .page-parent located in the <body> so we could use a single template for the homepage design as well as all subpage designs, which are similar but not exact.  */

body.page-template-the-studio {
	background:#9fa615;
	font-size:16px;
	line-height:normal;
}

#studio {
	background-image:url(https://icc.edu/academics/files/the-studio-homepage-bg.png);
	background-position:center top;
	background-repeat:no-repeat;
	margin:0 0 0 0;
	padding:20px 0 0 0;
	position:relative;
}

#studio h1,
#studio h2,
#studio h3 {
	color:#9fa615;
	font-family:"Open Sans",sans-serif;
	font-size:16px;
}
.page-parent #studio h2,
.page-parent #studio h3 {
	color:#ffffff;
}
#studio h1 {
	background-image:url(https://icc.edu/academics/files/the-studio-masthead.png);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:contain;
	display:block;
	height:60px;
	margin:0 0 0 0;
	text-indent:-999999px;
}
.page-parent #studio h1 {
	height:120px;
}
#studio h2 {
	font-size:2.2em;
}
#studio h3 {
	font-size:1.25em;
	font-weight:600;
	margin:40px 0 0 0;
}
#studio #contact h3 {
	color:#ffffff;
	margin-left:10px;
	margin-right:10px;
}

#studio a {
	color:#dddddd;
}

#studio .container {
	max-width:680px;
}


@media screen and (min-width:768px) {
	.page-parent #studio h1 {
		height:180px;
	}
}


@media screen and (min-width:1024px) {
	body.page-template-the-studio #global-navigation nav {
		max-width:1280px;
		padding:0 10px 0 10px;
	}
	
	body.page-template-the-studio #main-menu ul#org-nav > li:last-of-type {
		display:block;
	}
}


@media screen and (min-width:1280px) {
	body.page-template-the-studio #header-logo a#icc-icon {
		background-image:url(/wp-content/themes/icc-default/images/logo-wordmark.png);
		background-position:35px 1px;
		background-repeat:no-repeat;
		background-size:auto 25px;
		width:300px;
	}
	body.page-template-the-studio #header-logo a#icc-icon:hover {
		background-position:28px 1px;
	}
	
	body.page-template-the-studio #header-logo:hover {
		text-indent:-999999px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  NAVIGATION  */

#studio nav ul {
	margin:0 auto 20px auto;
	padding:0 10px 0 10px;
	width:auto;
}
#studio nav ul:after {
	clear:both;
	content:"";
	display:table;
}

#studio nav ul li {
	float:left;
	height:40px;
	text-align:center;
	width:50%;
}
#studio nav ul li:nth-of-type(odd) {
	border-right:1px solid rgba(255,255,255,0.2);
}

#studio nav ul li a {
	display:inline-block;
	font-size:0.875em;
	padding:10px 10px 10px 10px;
}
#studio nav ul li a:hover {
	background-color:rgba(255,255,255,0.2);
	color:#333333;
}


@media screen and (min-width:768px) {
	#studio nav {
		max-width:610px;
	}
	
	#studio nav ul {
		padding-left:0;
		padding-right:0;
	}
	
	#studio nav ul li {
		width:auto;
	}
	#studio nav ul li:nth-of-type(odd) {
		border:none;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  HOMEPAGE IMAGERY

Only displayed on The Studio's homepage.  */

#studio #graphic-info {
	display:none;
}

.page-parent #studio #graphic-info {
	display:block;
	height:300px;
	position:relative;
}

.page-parent #studio #homepage-imagery {
	background-image:url(https://icc.edu/academics/files/the-studio-homepage-imagery.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	border:5px solid #ffffff;
	height:350px;
	left:50%;
	overflow:hidden;
	position:absolute;
	transform:translateX(-50%);
	top:-35px;
	width:350px;
}

#homepage-imagery a {
	background-color:rgba(255,255,255,0.8);
	color:rgba(0,0,0,0.8);
	display:block;
	font-size:1.5em;
	font-weight:300;
	height:120px;
	line-height:1.1;
	margin:240px auto 0 auto;
	padding:20px 0 0 0;
	text-align:center;
	text-transform:uppercase;
	width:100%;
}

#homepage-imagery a strong {
	display:block;
	font-weight:600;
}


@media screen and (min-width:768px) {
	.page-parent #studio #graphic-info {
		background-image:url(https://icc.edu/academics/files/the-studio-location-bg.png);
		background-position:476px -2px;
		background-repeat:no-repeat;
		height:350px;
	}
	
	.page-parent #studio #homepage-imagery {
		height:400px;
		width:400px;
	}
	
	#homepage-imagery a {
		margin-top:290px;
	}
	#homepage-imagery a:hover {
		background-color:rgba(159,166,21,0.8);
		color:#ffffff;
		height:130px;
		margin-top:265px;
	}
}


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

#studio #studio-content {
	background-attachment:fixed;
	background-image:url(https://icc.edu/academics/files/the-studio-homepage-bg-2.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
	margin:20px 0 0 0;
}
.page-parent #studio #studio-content {
	background:none;
	background-color:#f8981d;
	margin-top:0;
}

#studio #studio-content .container {
	background-color:#ffffff;
	padding:20px 20px 20px 20px;
}
.page-parent #studio #studio-content .container {
	background:none;
	background-image:url(https://icc.edu/academics/files/the-studio-slogan.png);
	background-position:center 20px;
	background-repeat:no-repeat;
	background-size:90%;
	color:#ffffff;
	text-align:center;
	padding-top:40px;
}

#studio #studio-content .container p,
#studio #studio-content .container ul {
	font-size:0.875em;
	line-height:1.7;
}

#studio #studio-content .container img.size-post-thumbnail,
#studio #studio-content .container img.size-full {
	width:100%;
}
#studio #studio-content .container img.size-full {
	border:3px solid #dddddd;
}

#studio-content a {
	border-bottom:1px dotted;
	color:#9fa615;
}
#studio-content a:hover {
	border-bottom-style:solid;
	color:#111111;
}


@media screen and (min-width:768px) {
	.page-parent #studio #studio-content .container {
		background-size:auto;
		padding-top:60px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CONTACT DIRECTORY

Overrides for the contact shortcode connected to Directory & Maps custom post types.  */

#contact {
	color:#ffffff;
	padding:0 0 40px 0;
}

#studio aside {
	margin-bottom:0;
}

#studio aside.contact-info {
	background:none;
	border:none;
}

#studio .contact-info h2 {
	display:none;
}


@media screen and (min-width:768px) {
	#contact > div {
		float:left;
		width:33.333%;
	}
}


@media screen and (min-width:1024px) {
	aside {
		float:none;
		width:100%;
	}
}



/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  EMSI WIDGET  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

Displays potential careers and typical salaries. FOR NOW, this also includes stuff for all the "former" side info.  */

.info-container {
	margin:40px 0 0 0;
}

.info-container .info-box {
	background-color:#666666;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	color:#ffffff;
	margin:0 0 10px 0;
	padding:10px 10px 10px 10px;
}

.info-container .info-box h4 {
	margin-top:0;
}

.info-container .info-box p,
.info-container .info-box p span {
	background:none !important;
	color:#ffffff !important;
	font-family:"Open Sans",sans-serif !important;
	font-size:0.875em !important;
	font-style:normal !important;
}

.info-container .info-box a {
	border-bottom:1px dotted;
	color:#ffd659;
}
.info-container .info-box a:hover {
	border-bottom-style:solid;
	color:#ffffff;
}

#cc-widget-careers a {
	border:none;
}
#cc-widget-careers a[target="_blank"] {
	margin-right:0;
}
#cc-widget-careers a[target="_blank"]:after {
	display:none;
}

#site-content #cc-widget-careers img {
	display:inline-block;
	width:20%;
}


@media screen and (min-width:768px) {
	.info-container,
	#cc-widget-careers {
		float:left;
		margin:20px 0 20px 0;
		width:-webkit-calc(50% - 5px);
		width:calc(50% - 5px);
	}
	.info-container {
		margin-right:10px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ›››››››››››››››››››››››››››››››››››››››› EMSI OVERRIDES  */

.cc-card {
	-moz-border-radius:5px 5px 5px 5px !important;
	-webkit-border-radius:5px 5px 5px 5px !important;
	border-radius:5px 5px 5px 5px !important;
	font-family:"Open Sans",sans-serif !important;
	font-size:14px !important;
	height:inherit !important;
	padding:0 0 110px 0;
	width:100% !important;
}

.cc-card h1 {
	display:block;
	font-family:"Open Sans",sans-serif;
	font-size:1.375em !important;
	line-height:1.2;
	padding:20px 0 20px 0;
}

.cc-card h2 {
	color:#1ba965 !important;
	font-family:"Open Sans",sans-serif;
	font-size:2.25em !important;
}

.cc-card .cc-content {
	padding:20px 20px 20px 20px !important;
}

.cc-card p {
	color:#111111 !important;
	font-size:1em !important;
	margin:0 0 0 0 !important;
}

.cc-card .cc-link {
	background-color:#21669c !important;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	bottom:35px !important;
	padding:10px 0 10px 0 !important;
	text-align:center;
	text-transform:uppercase;
	width:-webkit-calc(100% - 38px);
	width:calc(100% - 38px);
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CAREER PATHWAYS  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

Heavy CSS to create boxes with arrows as we point to the stackable degrees in certain areas.  */

#career-pathway {
	font-size:0.75em;
}

#career-pathway section {
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	position:relative;
}
#career-pathway section.community-college {
	margin:35px 0 35px 0;
}

#career-pathway section > div {
	padding:10px 10px 10px 10px;
}
#career-pathway section.community-college > div {
	padding-bottom:0;
}

#career-pathway section > div h4 {
	border-bottom:2px solid;
	font-size:0.875em;
	font-weight:600;
	margin:0 0 0 0;
	text-transform:uppercase;
	width:fit-content;
}

#career-pathway section > div p {
	margin:5px 0 10px 0;
}

#career-pathway section a {
	color:#ffd659;
	text-decoration:underline;
}
#career-pathway section a:hover {
	color:#ffffff;
}
#career-pathway section#high-school > div:nth-of-type(1) a {
	color:#21669c;
}
#career-pathway section#high-school > div:nth-of-type(1) a:hover {
	color:#252525;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ›››››››››››››››››››››››››››››››››››››››› HIGH SCHOOL SECTION  */

#career-pathway section#high-school > div {
	position:relative;
}

#career-pathway section#high-school > div:nth-of-type(1) {
	background-color:#ffd659;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	border-radius:5px 5px 0 0;
	z-index:50;
}
#career-pathway section#high-school > div:nth-of-type(2) {
	background-color:#252525;
	-moz-border-radius:0 0 5px 5px;
	-webkit-border-radius:0 0 5px 5px;
	border-radius:0 0 5px 5px;
	color:#ffffff;
}

#career-pathway section#high-school > div p:nth-of-type(1) {
	font-weight:300;
}

#career-pathway section#high-school > div:nth-of-type(1).arrow-down {
	background:#ffd659;
	border-color:#ffd659;
}
#career-pathway section#high-school > div:nth-of-type(1).arrow-down:after,
#career-pathway section#high-school > div:nth-of-type(1).arrow-down:before {
	border-color:rgba(0,0,0,0);
	border-top-color:#ffd659;
}
#career-pathway section#high-school > div:nth-of-type(1).arrow-down:after {
	border-width:17px;
	margin-left:-17px;
}
#career-pathway section#high-school > div:nth-of-type(1).arrow-down:before {
	border-width:10px;
	margin-left:-10px;
}

#career-pathway section#high-school > div:nth-of-type(2).arrow-down {
	background:#252525;
	border-color:#252525;
}
#career-pathway section#high-school > div:nth-of-type(2).arrow-down:after {
	border-color:rgba(220,138,13,0);
	border-top-color:#252525;
	left:16.5%;
}
#career-pathway section#high-school > div:nth-of-type(2).arrow-down:before {
	border-color:rgba(220,138,13,0);
	border-top-color:#252525;
	left:16.5%;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ›››››››››››››››››››››››››››››››››››››››› COMMUNITY COLLEGE SECTION  

This section is switched from id to a class because there can be more than one community-college section.  */

#career-pathway section.community-college {
	background-color:#21669c;
	color:#ffffff;
	display: block;
	display: flex;
	min-height:150px;
}

#career-pathway section.community-college > div:nth-of-type(2) {
	background-color:#48a2e8;
}
#career-pathway section.community-college > div:nth-of-type(2),
#career-pathway section.community-college > div:nth-of-type(3) {
	padding-left:25px;
}

#career-pathway section.community-college > div {
	float:left;
	min-height:inherit;
	width:33.333%;
}
#career-pathway section.community-college.full-width > div {
	float:none;
	width:100%;
}

#career-pathway section.community-college > div.arrow-right:after,
#career-pathway section.community-college > div.arrow-right:before {
	border-color:rgba(0,0,0,0);
	position:absolute;
	top:50%;
}
#career-pathway section.community-college > div.arrow-right:nth-of-type(1):after,
#career-pathway section.community-college > div.arrow-right:nth-of-type(1):before {
	border-left-color:#21669c;
	left:33.333%;
}
#career-pathway section.community-college > div.arrow-right:nth-of-type(2):after,
#career-pathway section.community-college > div.arrow-right:nth-of-type(2):before {
	border-left-color:#48a2e8;
	left:66.666%;
}

#career-pathway section.community-college > div.arrow-down {
	bottom:0;
	left: 0;
	min-height:0;
	padding:0 0 0 0;
	position:absolute;
}
#career-pathway section.community-college > div.arrow-down:after,
#career-pathway section.community-college > div.arrow-down:before {
	border-color:rgba(0,0,0,0);
	border-top-color:#21669c;
}

	#career-pathway section#post-degree div.arrow-down {
		display: none;
	}

#career-pathway section.community-college p strong {
	display:block;
}


@media screen and (min-width:768px) {
	#career-pathway section.community-college {
		min-height:135px;
	}
}


@media screen and (min-width:1024px) {
	#career-pathway section.community-college {
		min-height:110px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ›››››››››››››››››››››››››››››››››››››››› UNIVERSITY SECTION  */

#career-pathway section#university {
	background-color:#252525;
	color:#ffffff;
}

#career-pathway section#university > div {
	float:left;
	height:100%;
	width:33.333%;
}

#career-pathway section#university > div a {
	color:#ffd659;
	text-decoration:underline;
}
#career-pathway section#university > div a:hover {
	color:#ffffff;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ›››››››››››››››››››››››››››››››››››››››› ARROW

Creating an arrow using :after and :before on the sections or div.  */

#career-pathway .arrow-down:after,
#career-pathway .arrow-down:before,
#career-pathway .arrow-right:after,
#career-pathway .arrow-right:before {
	border:solid transparent;
	content:"";
	height:0;
	left:50%;
	pointer-events:none;
	position:absolute;
	top:100%;
	width:0;
}
#career-pathway .community-college .arrow-right:after:not(:last-of-type),
#career-pathway .community-college .arrow-right:before:not(:last-of-type) {
	left:100%;
	top:50%;
}
#career-pathway .arrow-down:after {
	border-width:30px;
	margin-left:-30px;
}
#career-pathway .arrow-right:after {
	border-width:10px;
	margin-top:-10px;
}
#career-pathway .arrow-down:before {
	border-width:20px;
	margin-left:-20px;
}
#career-pathway .arrow-right:before {
	border-width:17px;
	margin-top:-17px;
}
			




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  GREATER PEORIA PATHWAY PLUGIN  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

#gp-pathway > div:nth-of-type(1) {
	/*background-color:#1c517d;
	color:#ffffff;*/
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	border-radius:5px 5px 0 0;
	font-size:1.15em;
	padding:10px 25px 10px 25px;
	text-align:center;
}
#gp-pathway > div#dunlap {
	background-color:#650b05;
	color:#ffffff;
}
#gp-pathway > div#elmwood {
	background-color:#ef642d;
	color:#ffffff;
}
#gp-pathway > div#east-peoria {
	background-color:#fdd73e;
	color:#7f112f;
}
#gp-pathway > div#pekin {
	background-color:#9f2b36;
	color:#ffffff;
}

#gp-pathway > div:nth-of-type(2) {
	background-color:#428bca;
	color:#ffffff;
	font-size:0.75em;
	margin:0 0 40px 0;
	padding:5px 25px 5px 25px;
	text-align:center;
}


#gp-pathway #high-school {
	display:table;
	font-size:16px;
	width:100%;
}

#gp-pathway #early-college-credit {
	margin:40px 0 0 0;
}

#gp-pathway > div > section {
	display:table-row;
	font-size:0.75em;
}
#gp-pathway #high-school > section:hover {
	background-color:#fafae1;
	cursor:default;
}

#gp-pathway > div > section > div {
	display:table-cell;
	position:relative;
	width:16.667%;
}
#gp-pathway #early-college-credit > section > div:nth-of-type(2),
#gp-pathway #professional-learning > section > div:nth-of-type(2),
#gp-pathway #industry-credentials > section > div:nth-of-type(2) {
	width:83.334%;
}
#gp-pathway #icc-programs > section > div:nth-of-type(n+2) {
	width:41.667%;
}
/*#gp-pathway #activities > section > div:nth-of-type(n+2),
#gp-pathway #majors > section > div:nth-of-type(n+2) {
	width:83.334%;
}
#gp-pathway #careers > section > div:nth-of-type(n+2) {
	width:41.667%;
}*/
#gp-pathway #high-school > section:first-of-type > div {
	border-bottom:1px solid #3672a5;
	border-right:1px solid #3672a5;
}
#gp-pathway #high-school > section:not(:first-of-type) > div,
#gp-pathway > div > section > div {
	border-bottom:1px dashed rgba(0,0,0,0.25);
	border-right:1px solid rgba(0,0,0,0.25);
}
#gp-pathway #high-school > section:last-of-type > div {
	border-bottom-style:solid;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ›››››››››››››››››››››››››››››››››››››››› COLUMN HEADER and ROW HEADER  */

#gp-pathway #high-school > section:first-of-type > div,
#gp-pathway #high-school > section > div:first-of-type,
#gp-pathway > div > section > div:first-of-type,
#gp-pathway > div > section > div > div {
	color:#f9f9f9;
	font-size:1.167em;
	height:50px;
	text-align:center;
}
#gp-pathway #high-school > section:first-of-type > div,
#gp-pathway #high-school > section > div:first-of-type {
	vertical-align:middle;
}
#gp-pathway #high-school > section:first-of-type > div,
#gp-pathway > div > section > div > div {
	background-color:#428bca;
	font-weight:300;
}
#gp-pathway #high-school > section:not(:first-of-type) > div:first-of-type,
#gp-pathway > div > section > div:first-of-type {
	background-color:#1c517d;
	font-size:1.5em;
	height:100px;
	line-height:1;
}
#gp-pathway #high-school > section:not(:first-of-type) > div:first-of-type {
	text-transform:uppercase;
}
#gp-pathway #high-school > section:nth-of-type(n+2):hover > div:first-of-type {
	background-color:#3672a5;
}
#gp-pathway > div > section > div > div {
	padding:15px 0 0 0;
}

#gp-pathway #high-school > section:not(:first-of-type) > div:first-of-type strong {
	display:block;
	font-size:2.167em;
	text-transform:none;
}

#gp-pathway #high-school > section:not(:first-of-type) > div:first-of-type sup {
	font-size:0.5em;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ›››››››››››››››››››››››››››››››››››››››› DATA FIELDS  */

#gp-pathway > div {
	display:table;
	font-size:16px;
	width:100%;
}

#gp-pathway > div > section > div > p {
	margin-left:4px;
	margin-right:4px;
}

#gp-pathway > div > section > div > ul {
	list-style:none;
	margin:4px 4px 4px 4px;
	padding:0 0 0 0;
}

#gp-pathway > div > section > div > ul li {
	border-bottom:1px solid rgba(0,0,0,0.05);
	padding:3px 5px 3px 5px;
}
#gp-pathway > div > section > div > ul li:hover {
	background-color:#fafae1;
	cursor:default;
}
#gp-pathway #high-school > section > div > ul li:hover {
	background-color:rgba(255,255,255,0.9);
}

#gp-pathway > div > section > div > ul li strong {
	float:right;
}


@media print {
	
	/* add other elements of your website that should be hidden from the print view */
	#top-bar-wrap,
	header,
	.page-header,
	h6,
	#footer-callout-wrap,
	footer {
		display:none;
	}
	
	#gp-pathway {
		font-size:0.75em;
	}
	
	/* remove design table bars and addding a single border */
	#gp-pathway #high-school > section:not(:first-of-type) > div,
	#gp-pathway > div> section > div {
		border:none;
	}
	
	#gp-pathway #high-school > section:first-of-type > div {
		border:none;
	}
	
	#gp-pathway > div {
		border:1px solid #000000;
	}
	
	/* remove background-colors; add light gray */
	#gp-pathway > div:nth-of-type(1),
	#gp-pathway > div:nth-of-type(2),
	#gp-pathway #high-school > section:first-of-type > div,
	#gp-pathway > div > section > div > div,
	#gp-pathway #high-school > section:not(:first-of-type) > div:first-of-type,
	#gp-pathway > div > section > div:first-of-type {
		background-color:#dddddd;
		color:#000000;
	}
	
	/* flattening out design */
	#gp-pathway > div > section > div {
		width:auto;
	}
	
	#gp-pathway #high-school > section:first-of-type > div,
	#gp-pathway #high-school > section > div:first-of-type {
		vertical-align:top;
	}
	
	/* forcing page break after grade information */
	#gp-pathway #high-school {
		page-break-after:always;
	}
	
}




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


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

This is being placed in all the multi-site CSS files while we transition to the new look 'n feel for the forms. This transition will take some time. */

.vfbp-form {
	background-color:#f7f7f7;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	padding:20px 15px 0 15px;
}
.vfbp-form:after {
	clear:both;
	content:"";
	display:table;
}

.vfb-col-1,
.vfb-col-2,
.vfb-col-3,
.vfb-col-4,
.vfb-col-5,
.vfb-col-6,
.vfb-col-7,
.vfb-col-8,
.vfb-col-9,
.vfb-col-10,
.vfb-col-11,
.vfb-col-12 {
	margin:0 5px 10px 5px;
	padding:0 0 0 0;
}

#site-content form h4 {
	margin-bottom:-10px;
	margin-top:10px;
}

.vfb-fieldType-submit {
	padding-top:20px !important;
}

.vfbp-form label {
	font-size:0.875em;
	font-weight:600;
	margin:0 0 0 0;
	padding:0 0 0 5px;
}
.vfbp-form .vfb-radio > label,
.vfbp-form .vfb-checkbox > label {
	font-weight:400;
}

.vfbp-form label + div {
	margin:2px 0 0 0;
}


/* CHECKBOX/RADIO STYLES */
.vfb-fieldType-checkbox,
.vfb-fieldType-radio {
	margin-bottom:20px;
}

.vfbp-form .vfb-radio,
.vfbp-form .vfb-checkbox {
	margin:10px 0 0 5px;
}

.vfbp-form .vfb-inline-group {
	margin:0 0 0 5px;
	min-height:34px;
	padding:6px 0 0 0;
}

.vfbp-form .vfb-inline-group .vfb-radio,
.vfbp-form .vfb-inline-group .vfb-checkbox {
	margin:0 20px 0 0;
}

/* CHECKBOX/RADIO DISPLAY IN ROWS */
.vfb-row {
	margin:0 0 0 0;
}


.vfbp-form .btn-primary {
	background-color:#21669c;
	border:none;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	text-transform:uppercase;
	width:100%;
}

.vfbp-form .vfb-fieldType-instructions {
	background-color:#dddddd;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	margin:0 5px 20px 5px;
	padding:10px 20px 7px 20px;
	width:-webkit-calc(100% - 10px);
	width:calc(100% - 10px);
}

.vfbp-form .vfb-fieldType-instructions label {
	font-size:1em;
	padding-left:0;
}

.vfbp-form .vfb-fieldType-instructions .vfb-form-group,
.vfbp-form .vfb-fieldType-instructions p {
	margin:0 0 0 0;
}

.vfbp-form .vfb-help-block {
	color:#111111;
	font-size:1em;
	font-weight:300;
	line-height:2;
	margin:0 0 0 0;
}

/* confirmation checkmark */
p.confirm-submit {
	font-size:0.875em;
	padding:5px 0 0 80px;
	position:relative;
}
p.confirm-submit: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:inline-block;
	color:#1ba965;
	content:"\f058";
	float:left;
	font-family:fontawesome;
	font-size:60px;
	left:0;
	opacity:0;
	padding:0 0 0 5px;
	position:absolute;
	top:-25px;
}

p.confirm-submit + p {
	font-size:0.875em;
	padding-left:80px;
}

/* in order to have heading show/hide based upon selection, you need to check the box "background container" in vfbpro. This adds a new style that has their css */
.vfb-well {
	background:none;
	border:none;
}


@media screen and (min-width:768px) {
	.vfb-col-4,
	.vfb-col-6 {
		float:none;
		width:-webkit-calc(100% - 10px);
		width:calc(100% - 10px);
	}
	
	.vfb-col-12 {
		padding-right:10px;
	}
	
	.page-template-blank-slate .vfbp-form {
		padding-bottom:38px;
	}
	
	.page-template-blank-slate .vfb-col-4,
	.page-template-blank-slate .vfb-col-6 {
		float:left;
	}
	.page-template-blank-slate .vfb-col-4 {
		width:-webkit-calc(33.333% - 10px);
		width:calc(33.333% - 10px);
	}
	.page-template-blank-slate .vfb-col-6 {
		width:-webkit-calc(50% - 10px);
	}
	
	.page-template-blank-slate .vfb-form-group {
		clear:both;
	}
		
}


@media screen and (min-width:1024px) {
	.vfb-col-4,
	.vfb-col-6 {
		float:left;
	}
	.vfb-col-4 {
		width:-webkit-calc(33.333% - 10px);
		width:calc(33.333% - 10px);
	}
	.vfb-col-6 {
		width:-webkit-calc(50% - 10px);
		width:calc(50% - 10px);
	}
	
	.vfb-form-group {
		clear:both;
	}
	
	.page-template-blank-slate .vfbp-form,
	#apprenticeship-application .vfbp-form {
		width:75%;
	}
}


@media screen and (min-width:1280px) {
	.page-template-blank-slate .vfbp-form {
		width:66%;
	}
}
			




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  ODDS 'N ENDS  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

/* ASC WORKSHOPS */
#asc-workshops {
	background: linear-gradient(to bottom right,#eeeeee,#dddddd);
	border-radius: 5px 5px 5px 5px;
	margin: 5px 0 0 0;
	padding: 10px 10px 10px 10px;
}

#asc-workshops a {
	border-bottom: 1px dotted;
	color: #21669c;
}
#asc-workshops a:hover {
	border-bottom-style: solid;
	color: #252729;
}

#asc-workshops > p {
	display: none;
}

#asc-workshops section {
	background-color: #eeeeee;
	border: 1px solid #ffffff;
	border-radius: 5px 5px 5px 5px;
	padding: 10px 10px 10px 10px;
}
#asc-workshops section:not(:last-of-type) {
	margin: 0 0 10px 0;
}

#asc-workshops h4 {
	font-size: 1.25em;
	font-weight: 300;
	margin: 0 0 0 0;
	text-transform: uppercase;
}

#asc-workshops p {
	font-size: 0.813em;
	margin: 5px 0 0 0;
}


/* ASC ONLINE TUTORING */
#asc-online-tutoring {
	border: 1px solid #eeeeee;
	border-radius: 5px 5px 5px 5px;
	color: #252729;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875em;
}

#asc-online-tutoring div:first-of-type {
	background-color: #eeeeee;
	padding: 10px 10px 10px 10px;
}
#asc-online-tutoring div:last-of-type {
	padding: 20px 20px 20px 20px;
}

#asc-online-tutoring h3 {
	font-size: 2em;
	font-weight: 400;
	margin: 0 0 0 0;
}
#asc-online-tutoring h3:not(:first-of-type) {
	margin-top: 30px;
}

#asc-online-tutoring h4 {	
	font-size: 1.5em;
	font-weight: 300;
	margin: 0 0 0 0;
	text-transform: uppercase;
}
#asc-online-tutoring h4:not(:first-of-type) {
	margin-top: 30px;
}
#asc-online-tutoring h3 + h4 {
	margin-top: 5px;
}

#asc-online-tutoring p {
	line-height: 2;
	margin: 20px 0 20px 0;
}
#asc-online-tutoring h3 + p,
#asc-online-tutoring h4 + p {
	margin-top: 5px;
}

#asc-online-tutoring a {
	text-decoration: underline;
	transition: all 0.5s ease-in-out;
}
#asc-online-tutoring a:hover {
	color: #000000;
	transition: all 0.5s ease-in-out;
}


@media screen and (min-width: 1024px) {
	#asc-online-tutoring {
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	#asc-online-tutoring div:first-of-type {
		width: 66.666%;
	}
	#asc-online-tutoring div:last-of-type {
		width: 33.333%;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  EVENT EVALUATION FORM  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */


#vfbp-form-11 .vfb-fieldType-instructions,
#vfbp-form-15 .vfb-fieldType-instructions {
	margin-bottom: 40px;
}
#vfbp-form-11.vfbp-form > div.vfb-fieldType-instructions,
#vfbp-form-15.vfbp-form > div.vfb-fieldType-instructions {
	width: auto;
}

#vfbp-form-11 .vfb-fieldType-radio,
#vfbp-form-15 .vfb-fieldType-radio {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

#vfbp-form-11 .vfb-fieldType-radio > label,
#vfbp-form-15 .vfb-fieldType-radio > label {
	margin-bottom: 0;
	width: calc(75% - 5px);
}

#vfbp-form-11 .vfb-fieldType-radio > div,
#vfbp-form-15 .vfb-fieldType-radio > div {
	width: calc(25% - 5px);
}


 /* FORM */
#vfbp-form-11.vfbp-form,
#vfbp-form-15.vfbp-form {
	/*background: linear-gradient(#e0e0e0,#efefef);*/
	background-color: #f7f7f7;
	border-radius: 5px 5px 5px 5px;
	padding: 20px 20px 20px 20px;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#vfbp-form-11.vfbp-form > div,
#vfbp-form-15.vfbp-form > div {
	background: rgba(255,0,0,0.1);
	background: #ffffff;
	border-radius: 5px 5px 5px 5px;
	padding: 5px 5px 5px 5px;
}


/* ANNOYING THINGS THAT MUST BE HIDDEN BECAUSE VFB DOESN'T UNDERSTAND HTML5 AND CSS3 */
#vfbp-form-11 .vfb-clearfix,
#vfbp-form-11 .vfb-clearfix::after,
#vfbp-form-11 .vfb-clearfix::before,
#vfbp-form-11 div.vfb-form-group + .vfb-fieldType-heading,
#vfbp-form-11 .vfb-row::after,
#vfbp-form-11 .vfb-row::before, 
#vfbp-form-15 .vfb-clearfix,
#vfbp-form-15 .vfb-clearfix::after,
#vfbp-form-15 .vfb-clearfix::before,
#vfbp-form-15 div.vfb-form-group + .vfb-fieldType-heading,
#vfbp-form-15 .vfb-row::after,
#vfbp-form-15 .vfb-row::before {
	display: none;
}


/* HEADINGS */
#vfbp-form-11.vfbp-form .vfb-form-group,
#vfbp-form-15.vfbp-form .vfb-form-group {
	margin: 0 0 0 0;
}
#vfbp-form-11.vfbp-form > div.vfb-form-group,
#vfbp-form-15.vfbp-form > div.vfb-form-group {
	background: rgba(255,255,255,0);
	margin: 0 0 10px 0;
	width: 100%;
}


/* COLUMNS */
#vfbp-form-11.vfbp-form > .vfb-col-1,
#vfbp-form-11.vfbp-form > .vfb-col-2,
#vfbp-form-11.vfbp-form > .vfb-col-3,
#vfbp-form-11.vfbp-form > .vfb-col-4,
#vfbp-form-11.vfbp-form > .vfb-col-5,
#vfbp-form-11.vfbp-form > .vfb-col-6,
#vfbp-form-11.vfbp-form > .vfb-col-7,
#vfbp-form-11.vfbp-form > .vfb-col-8,
#vfbp-form-11.vfbp-form > .vfb-col-9,
#vfbp-form-11.vfbp-form > .vfb-col-10,
#vfbp-form-11.vfbp-form > .vfb-col-11,
#vfbp-form-11.vfbp-form > .vfb-col-12,
#vfbp-form-15.vfbp-form > .vfb-col-1,
#vfbp-form-15.vfbp-form > .vfb-col-2,
#vfbp-form-15.vfbp-form > .vfb-col-3,
#vfbp-form-15.vfbp-form > .vfb-col-4,
#vfbp-form-15.vfbp-form > .vfb-col-5,
#vfbp-form-15.vfbp-form > .vfb-col-6,
#vfbp-form-15.vfbp-form > .vfb-col-7,
#vfbp-form-15.vfbp-form > .vfb-col-8,
#vfbp-form-15.vfbp-form > .vfb-col-9,
#vfbp-form-15.vfbp-form > .vfb-col-10,
#vfbp-form-15.vfbp-form > .vfb-col-11,
#vfbp-form-15.vfbp-form > .vfb-col-12 {
	margin: 0 0 20px 0;
	width: 100%;
}

@media screen and (min-width: 1024px) {	
	#vfbp-form-11.vfbp-form > .vfb-col-1,
	#vfbp-form-11.vfbp-form > .vfb-col-2,
	#vfbp-form-11.vfbp-form > .vfb-col-3,	
	#vfbp-form-15.vfbp-form > .vfb-col-1,
	#vfbp-form-15.vfbp-form > .vfb-col-2,
	#vfbp-form-15.vfbp-form > .vfb-col-3 {
		width: calc(33.333% - 10px);
	}
	#vfbp-form-11.vfbp-form > .vfb-col-4,
	#vfbp-form-11.vfbp-form > .vfb-col-5,
	#vfbp-form-11.vfbp-form > .vfb-col-6,
	#vfbp-form-15.vfbp-form > .vfb-col-4,
	#vfbp-form-15.vfbp-form > .vfb-col-5,
	#vfbp-form-15.vfbp-form > .vfb-col-6 {
		width: calc(50% - 10px);
	}
	#vfbp-form-11.vfbp-form > .vfb-col-7,
	#vfbp-form-11.vfbp-form > .vfb-col-8,
	#vfbp-form-11.vfbp-form > .vfb-col-9,
	#vfbp-form-15.vfbp-form > .vfb-col-7,
	#vfbp-form-15.vfbp-form > .vfb-col-8,
	#vfbp-form-15.vfbp-form > .vfb-col-9 {
		width: calc(66.666% - 10px);		
	}
	#vfbp-form-11.vfbp-form > .vfb-col-10,
	#vfbp-form-11.vfbp-form > .vfb-col-11,
	#vfbp-form-11.vfbp-form > .vfb-col-12,
	#vfbp-form-15.vfbp-form > .vfb-col-10,
	#vfbp-form-15.vfbp-form > .vfb-col-11,
	#vfbp-form-15.vfbp-form > .vfb-col-12 {
		width: 100%;
	}
}


/* ROW */
#vfbp-form-11 .vfb-row,
#vfbp-form-15 .vfb-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 0 0;
}

#vfbp-form-11 .vfb-row > div,
#vfbp-form-15 .vfb-row > div {
	padding: 0 0 0 0;
	width: 100%;
}

#vfbp-form-11 .vfb-row > div .vfb-checkbox,
#vfbp-form-11 .vfb-row > div .vfb-radio,
#vfbp-form-15 .vfb-row > div .vfb-checkbox,
#vfbp-form-15 .vfb-row > div .vfb-radio {
	margin: 5px 0 5px 0;
	width: 100%;
}

#vfbp-form-11 .vfb-row > div + div .vfb-checkbox:first-of-type,
#vfbp-form-11 .vfb-row > div + div .vfb-radio:first-of-type,
#vfbp-form-15 .vfb-row > div + div .vfb-checkbox:first-of-type,
#vfbp-form-15 .vfb-row > div + div .vfb-radio:first-of-type {
	margin-top: 0;
}

@media screen and (min-width: 768px) {
	/* very stupid that vfb thinks col-4 is 3 columns instead of col-3 */
	#vfbp-form-11 .vfb-row .vfb-col-4,
	#vfbp-form-15 .vfb-row .vfb-col-4 {
		width: calc(33.333% - 10px);
	}
	
	#vfbp-form-11 .vfb-row .vfb-col-6,
	#vfbp-form-15 .vfb-row .vfb-col-6 {
		width: calc(50% - 10px);
	}
	
	#vfbp-form-1115 .vfb-row > div + div .vfb-checkbox:first-of-type,
	#vfbp-form-11 .vfb-row > div + div .vfb-radio:first-of-type,
	#vfbp-form-15 .vfb-row > div + div .vfb-checkbox:first-of-type,
	#vfbp-form-15 .vfb-row > div + div .vfb-radio:first-of-type {
		margin-top: 5px;
	}
}



/* LABEL */
#vfbp-form-11.vfbp-form label,
#vfbp-form-15.vfbp-form label {
	display: block;
	font-size: 0.875em;
	font-weight: 600;
	margin: 0 0 5px 5px;
}

#vfbp-form-11.vfbp-form .vfb-fieldType-instructions label,
#vfbp-form-15.vfbp-form .vfb-fieldType-instructions label {
	margin-left: 0;
}


/* INLINE RADIO/CHECKBOX GROUP

Primarly use with 'yes' or 'no' questions. While we allow it to wrap, try to avoid this. */
#vfbp-form-11 .vfb-inline-group,
#vfbp-form-15 .vfb-inline-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

#vfbp-form-11.vfbp-form .vfb-inline-group .vfb-checkbox,
#vfbp-form-11.vfbp-form .vfb-inline-group .vfb-radio,
#vfbp-form-15.vfbp-form .vfb-inline-group .vfb-checkbox,
#vfbp-form-15.vfbp-form .vfb-inline-group .vfb-radio {
	float: none;
	margin: 5px 0 5px 0;
	width: 100%;
}

/* override of current css and not needed when this goes global */
#vfbp-form-11.vfbp-form .vfb-radio > label,
#vfbp-form-11.vfbp-form .vfb-checkbox > label,
#vfbp-form-15.vfbp-form .vfb-radio > label,
#vfbp-form-15.vfbp-form .vfb-checkbox > label {
	font-weight: 400;
}

@media screen and (min-width: 768px) {
	#vfbp-form-11.vfbp-form .vfb-inline-group .vfb-checkbox,
	#vfbp-form-11.vfbp-form .vfb-inline-group .vfb-radio,
	#vfbp-form-15.vfbp-form .vfb-inline-group .vfb-checkbox,
	#vfbp-form-15.vfbp-form .vfb-inline-group .vfb-radio {
		width: fit-content;
		margin-right: 20px;
	}
}


/* SUBMIT BUTTON */
#vfbp-form-1.vfbp-form > div.vfb-fieldType-submit,
#vfbp-form-15.vfbp-form > div.vfb-fieldType-submit {
	background: none;
	margin: 20px 0 0 0;
	padding: 0 0 0 0;
}

#vfbp-form-1.vfbp-form .btn-primary,
#vfbp-form-15.vfbp-form .btn-primary {
	background: #21669c;
	background: linear-gradient(#21669c,#1b5682);
}

#vfbp-form-1.vfbp-form .btn,
#vfbp-form-15.vfbp-form .btn {
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.25);
	color: #ffd659;
	cursor: pointer;
	font-size: 0.875em;
	font-weight: 600;
	outline: none;
	padding: 8px 10px 8px 10px;
	text-transform: uppercase;
	width: 100%;
}

@media screen and (min-width: 768px) {
	#vfbp-form-11.vfbp-form .btn,
	#vfbp-form-15.vfbp-form .btn {
		width: calc(50% - 10px);
	}
}





/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  ***** END *****  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */