﻿
/* default hero image definitions */
@media all {
	body.about #hero::before {
		background-image: url(https://ws.engr.illinois.edu/sitemanager/viewphoto.aspx?id=707&s=1280);
	}

	body.academics.undergraduate.advising #hero::before {
		background-image: url(https://ws.engr.illinois.edu/sitemanager/viewphoto.aspx?id=706);
	}

	body.admissions #hero::before {
		background-image: url(https://ws.engr.illinois.edu/sitemanager/viewphoto.aspx?id=708);
	}

	body.giving #hero::before {
		background-image: url(https://ws.engr.illinois.edu/sitemanager/viewphoto.aspx?id=239);
	}
}




/* progress bars -  NOT USED ANYMORE */
@media all {
	.progress_bar {
		margin: 0 0 2rem 0;
	}

		.progress_bar .bar_track {
			height: 90px;
			width: 100%;
			background-color: #e1e1e1;
			position: relative;
			margin: 0px 0px 10px 0px;
		}

		.progress_bar .bar_on {
			height: 100%;
			position: relative;
		}


		.progress_bar .progress_indicator {
			position: absolute;
			top: -60px;
			width: 60px;
			height: 42px;
			background-color: #383838;
			color: #ffffff;
			padding: 12px 5px;
			border-radius: 10px;
			text-align: center;
			line-height: 1;
		}

			.progress_bar .progress_indicator::after {
				border-color: #383838 transparent;
				border-style: solid;
				border-width: 10px 10px 0px;
				bottom: -10px;
				content: "";
				display: block;
				left: calc(50% - 10px);
				position: absolute;
				width: 0px;
			}

		.progress_bar .bar_axis {
			height: 10px;
			width: 100%;
			border-width: 1px 1px 0px 1px;
			border-color: #000000;
			border-style: solid;
		}

			.progress_bar .bar_axis .bar_tick {
				height: 100%;
				border-right: 1px solid #000000;
			}

		.progress_bar .bar_label_container {
			overflow: auto;
			position: relative;
		}

			.progress_bar .bar_label_container .bar_label_min {
				float: left;
			}

			.progress_bar .bar_label_container .bar_label {
				position: absolute;
				text-align: right;
			}

			.progress_bar .bar_label_container .bar_label_max {
				float: right;
			}
	
	.progress-circle {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.progress-circle-outer {
        border-radius: 50%;
        height: 200px;
        width: 200px;
      }

      .progress-circle-inner {
        position: absolute;
        border-radius: 50%;
        height: 130px;
        width: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
      }
	
}

@media screen and (max-width: 575px) {
	.progress_bar .bar_label_container {
		font-size: 0.7em;
	}
}

@media screen and (max-width: 440px) {
	.progress_bar .bar_label_container {
		font-size: 0.5em;
	}
}

/* end progress bars */


/* chicago pipeline feature */
@media all {
	#content .tile-list #tile483.tile.w110:first-child {
		padding-top: 0 !important;
	}

	#tile483 {
		margin-bottom: -1.5rem;
	}


		#tile483 #features {
			width: 40%;
			float: right;
		}


		body.fullscreenhero #map {
			position: fixed;
			width: 60%;
			height: 100vh;
			top: 0px;
			left: 0;
			z-index: 3;
		}


		#tile483 .features-container {
			padding: 4rem 3rem;
		}

			#tile483 .features-container .expandolist p {
				margin-bottom: 1.6rem;
			}

			#tile483 .features-container .expandolist > div > div p {
				padding: 0;
			}




		#tile483 .title-box__author {
			font-size: 70%;
			text-transform: uppercase;
			border-top: 3px solid #2d71db;
			display: inline-block;
			padding: 40px 0;
			margin: 0 auto;
		}

		#tile483 .quote-block__quote {
			font-size: 1.6em;
			line-height: 1.42em;
			font-style: italic;
			font-weight: 100;
		}

		#tile483 .quote-block__name {
			font-size: 15px;
			line-height: 25px;
			font-weight: 100;
		}


		/*marker styles*/
		.marker {
			background-image: url(https://ws.engr.illinois.edu/sitemanager/viewphoto.aspx?id=769);
			background-size: cover;
			width: 35px;
			height: 35px;
			cursor: pointer;
		}

		.marker-active {
			background-image: url(https://ws.engr.illinois.edu/sitemanager/viewphoto.aspx?id=770);
			width: 60px;
			height: 90px;
			z-index: 2000;
		}
}


@media screen and (min-width: 1900px){
	body.fullscreenhero #map {
		width: 70%;
	}

	#tile483 #features {
		width: 30%;
	}
}

@media screen and (max-width: 1199px) {
	body.fullscreenhero #map {
		width: 50%;
	}

	#tile483 #features {
		width: 50%;
	}

}

@media screen and (max-width: 991px) {

	body.fullscreenhero #map {
		height: calc(100vh - 50px);
		top: 50px;
	}


}

@media screen and (max-width: 767px) {

	body.fullscreenhero #map {
		width: 100%;
		z-index: 0;
	}

	#tile483 .navy-box {
		background-color: transparent;
	}

	#tile483 #features {
		z-index: 400;
		width: 100%;
		float:none;
		background-color: rgba(0,0,0,.7);
	}

	#tile483 .features-container {
		padding: 2rem 1rem;
	}

	#tile483 #features img {
		display: none;
	}

	#tile483 #features .dark-navy-box { background-color: transparent; }

}

/* end chicago pipeline feature */






/* scholarship calculator feature */
@media all {

	#scholarship_calculator_graph {
		position: relative;
	}

		#scholarship_calculator_graph .y-axis {
			position: relative;
			width: 80px;
			top: 0;
			left: 0;
		}

			#scholarship_calculator_graph .y-axis > .block {
				height: 60px;
				padding: 35px 10px 0px 0px;
				text-align: right;
			}

		#scholarship_calculator_graph .graph {
			position: absolute;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			width: calc(100% - 80px);
			left: 80px;
			height: 420px;
			top: 0;
			padding: 0 15px;
			background: repeating-linear-gradient(0deg, #e0e0e0, #e0e0e0 1px, transparent 1px, transparent 60px);
		}

			#scholarship_calculator_graph .graph > div > div.block {
				align-items: end;
				background-color: cyan;
				overflow: hidden;
				transition: height ease-in-out 0.5s;
				height: 0px;
			}


			#scholarship_calculator_graph .graph .overlay {
				position: absolute;
				bottom: 0px;
				left: 0px;
				width: 100%;
				border-top: 4px solid #ff552e;
				background-color: rgba(255, 85, 46, 0.2);
				transition: height ease-in-out 0.5s;
				height: 0px;

			}

		#scholarship_calculator_graph .x-axis {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			width: calc(100% - 80px);
			left: 80px;
			padding: 5px 0px;
			font-size: 0.7rem;
			text-align: center;
		}

		
		#scholarship_calculator_graph .legend {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			font-size: 0.7rem;
			text-align: center;
			margin-top: 1rem;
		}

			#scholarship_calculator_graph .legend .col p {
				border-top: 4px solid purple;
				line-height: 1.4;
				padding-top: 5px;
			}

		#scholarship_calculator_graph .graph .block.tuition {
			background-color: #1155CC;
		}

		#scholarship_calculator_graph .graph .block.fees {
			background-color: #3C78D8;
		}

		#scholarship_calculator_graph .graph .block.room {
			background-color: #6D9EEB;
		}

		#scholarship_calculator_graph .graph .block.books {
			background-color: #A4C2F4;
		}

		#scholarship_calculator_graph .graph .block.other {
			background-color: #C9DAF8;
		}



		#scholarship_calculator_graph .legend .col.tuition p {
			border-top: 4px solid #1155CC;
		}

		#scholarship_calculator_graph .legend .col.fees p {
			border-top: 4px solid #3C78D8;
		}

		#scholarship_calculator_graph .legend .col.room p {
			border-top: 4px solid #6D9EEB;
		}

		#scholarship_calculator_graph .legend .col.books p {
			border-top: 4px solid #A4C2F4;
		}

		#scholarship_calculator_graph .legend .col.other p {
			border-top: 4px solid #C9DAF8;
		}

		#scholarship_calculator_graph .legend .col.scholarship p {
			border-top: 4px solid #ff552e;
		}




}
/* end scholarship calculator feature */



/* webinars */
@media all {
	.webinars-entry {
		background-color: #ffffff;
		position: relative;
		height: 100%;
		overflow: hidden;
		box-shadow: 0px 0px 5px #ccc;
	}
	
	.webinars-entry:hover {
		cursor: pointer;
	}
	
	.webinars-entry .topic {
		position: absolute;
		top: 1.5rem;
		left: 1.5rem;
		color: #ffffff;
		font-size: 0.8em;
		line-height: 1;
		text-transform: uppercase;
		padding: 5px 10px;
		border-radius: 30px;
	}
	
	.webinars-entry .topic.COVID-19,
	.webinars-entry-content .topic.COVID-19
	{
		background-color: #1D58A7;
	}
	
	.webinars-entry .topic.Admissions,
	.webinars-entry-content .topic.Admissions
	{
		background-color: #DD3403;
	}

	.webinars-entry .topic.Social.Justice,
	.webinars-entry-content .topic.Social.Justice	
	{
		background-color: #E56E15;
	}

	.webinars-entry .topic.Research,
	.webinars-entry-content .topic.Research	
	{
		background-color: #15e51f;
	}


	.webinars-entry .topic.From.the.Dean,
	.webinars-entry-content .topic.From.the.Dean	
	{
		background-color: #1E3877;
	}

	.webinars-entry .topic.Seminars,
	.webinars-entry-content .topic.Seminars	
	{
		background-color: #007EAB;
	}	

	.webinars .custom-checkbox {
    	padding-left: 1.5rem;
	}
	.webinars .custom-control-input {
		width: 15px;
		height: 15px;
		margin-left: -1.5rem;
	}
	.webinars .custom-control-label {
		margin-top: 0;
	}
	.webinars .custom-control-input~.custom-control-label::before {
		box-shadow:none !important;
		border-color:#767676 !important;
		border-radius: 15%;
	}
	.webinars .custom-checkbox .custom-control-label::after {
		background: no-repeat 50%/100% 75%;
	}

	.webinars .custom-checkbox.Admissions .custom-control-input:checked~.custom-control-label::before{
		background-color:#DD3403;
		border-color:#DD3403 !important;
	}

	.webinars .custom-checkbox.COVID-19 .custom-control-input:checked~.custom-control-label::before{
		background-color: #1D58A7;
		border-color: #1D58A7 !important;
	}

	.webinars .custom-checkbox.Social.Justice .custom-control-input:checked~.custom-control-label::before{
		background-color: #E56E15;
		border-color: #E56E15 !important;
	}

	.webinars .custom-checkbox.Research .custom-control-input:checked~.custom-control-label::before{
		background-color: #15e51f;
		border-color: #15e51f !important;
	}

	.webinars .custom-checkbox.From.the.Dean .custom-control-input:checked~.custom-control-label::before{
		background-color: #1E3877;
		border-color: #1E3877 !important;
	}

	.webinars .custom-checkbox.Seminars .custom-control-input:checked~.custom-control-label::before{
		background-color: #007EAB;
		border-color: #007EAB !important;
	}	


	.webinars-entry-photo {
		width: 100%;
		height: 250px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	.webinars-entry-details {
		padding: 1.5rem;
		position: relative;
	}
	
	.webinars-entry-details h3 a {
		font-family: 'Montserrat', 'Source Sans Pro', Arial, Helvetica, sans-serif;
		color: #121b21;
	}
	
	.webinars-entry-details .date {
		margin-bottom: 0;
		font-size: 0.9em;
		color: #696969;
	}
		
	.webinars-entry-details .date::before {
		content: '\f133';
		font-family: "Font Awesome 6 Pro";
		margin-right: 5px;
	}

	body.webinars:not(.landing) #hero {
		background-image: none;
		height: 30vw;
	}

	body.webinars:not(.landing) #hero::before {
		filter: none;
	}
	
	body.webinars:not(.landing) #hero::after {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		content: '';
		background-image: linear-gradient( to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
		z-index: 1;
	}

	body.webinars:not(.landing) #hero #breadcrumbs,
	body.webinars:not(.landing) #hero h1 {
		display: none;
	}

	/*
	.webinars-entry-content {
		position: relative;
		top: -100px;
	}
	*/

	.webinars-entry-content .topic {
		color: #ffffff;
		font-size: 0.8em;
		line-height: 1;
		text-transform: uppercase;
		padding: 5px 10px;
		border-radius: 30px;
		display: inline-block;
    	margin-bottom: .5rem;
	}

	.webinars-entry-content h1 {
		font-size: 2.5em;
		font-family: Montserrat, 'Source Sans Pro', Arial, Helvetica, sans-serif;
	}
	
	.webinars-sidebar button.form-control {
		border: none;
		background-color: #FF552E;
    	color: #ffffff;
		font-weight: 600;
	}
	
	.webinars-sidebar button.form-control:hover {
		background-color: #DD3403;
	}
	
	.webinars-sidebar .topics li {
		border-bottom: 1px solid #ccc;
		padding: 10px 0px;
    	margin-bottom: 0;
		font-weight: 600;
		justify-content: space-between;
	}
	
	.webinars-sidebar .topics li:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
	
	.webinars-sidebar .topics li a {
		color: #121b21;
		transition: all 0.2s ease-in-out;
	}
	
	.webinars-sidebar .topics li a:hover {
		text-decoration: none;
		padding-left: 5px;
	}

	.webinars-sidebar .topics li::after {
		content: '';
		display: inline-block;
		width: 20px;
		height: 20px;
		border-radius: 100%;
		margin-right: 10px;
	}

	.webinars-sidebar .topics li.COVID-19::after {
		background-color: #1D58A7;
	}

	.webinars-sidebar .topics li.Admissions::after {
		background-color: #DD3403;
	}
	
	.webinars-sidebar .topics li.Social.Justice::after {
		background-color: #E56E15;
	}

	.webinars-sidebar .topics li.Research::after {
		background-color: #15e51f;
	}

	.webinars-sidebar .topics li.From.the.Dean::after {
		background-color: #1E3877;
	}

	.webinars-sidebar .topics li.Seminars::after {
		background-color: #007EAB;
	}
	
	.webinars-sidebar .topics li.COVID-19 a:hover {
		color: #1D58A7;
	}
	
	.webinars-sidebar .topics li.Admissions a:hover {
		color: #DD3403;
	}

	.webinars-sidebar .topics li.Social.Justice a:hover {
		color: #E56E15;
	}

	.webinars-sidebar .topics li.Research a:hover {
		color: #15e51f;
	}

	.webinars-sidebar .topics li.From.the.Dean a:hover {
		color: #1E3877;
	}		

	.webinars-sidebar .topics li.Seminars a:hover {
		color: #007EAB;
	}		

	.webinars-sidebar .recent-posts a {
		color: #121b21;
	}

	.webinars-sidebar .recent-post-photo {
		height: 70px;
		width: 90px;
		flex: 0 0 90px;
    	background-size: cover;
    	background-position: center center;
    	background-repeat: no-repeat;
	}

	body.webinars-entry .box-shadow {
		box-shadow: 0px 2px 5px #ccc;
	}
	
	.webinars-back {
		border-top: 1px solid #ccc;
		padding-top: 1.5rem;
		margin-top: 1rem;
	}
	
	.webinars-back a {
		color: #121b21;
	}
	
	.webinars-back a:hover {
		text-decoration: none;
		color: #284c90;
	}
}

@media screen and (max-width: 767px) {
	.webinars-entry-overlay {
		display: none;
	}

	.webinars-mobile-btn {
		display: block;
	}
}
/* end webinars */

/* voices */
@media all {
	.voices .form-check {
		padding-left: 1.5rem;
	}
	
	.voices .form-check-input {
		width: 15px;
		height: 15px;
		margin-left: -1.5rem;
	}
	
	.voices .form-check-label {
		margin-top: 0;
	}
	
	.voices-entry {
		background-color: #ffffff;
		position: relative;
		height: 100%;
		overflow: hidden;
		box-shadow: 0px 0px 5px #ccc;
	}
	
	.voices-entry:hover {
		cursor: pointer;
	}
	
	.voices-entry .topic {
		position: absolute;
		top: 1.5rem;
		left: 1.5rem;
		color: #ffffff;
		font-size: 0.8em;
		line-height: 1;
		text-transform: uppercase;
		padding: 5px 10px;
		border-radius: 30px;
	}
	
	.voices-entry .topics {
		position: absolute;
		top: 1.5rem;
		left: 1.5rem;
	}
	.voices-entry .topics ul {
		list-style: none;
		margin: 0 !important;
		padding: 0 !important;
	}
	.voices-entry .topics ul li{
		color: #ffffff;
		font-size: 0.8em;
		line-height: 1;
		text-transform: uppercase;
		padding: 5px 10px;
		border-radius: 30px;
		display:table;
	}

	.voices-entry .topics ul li.Advice,
	.voices .topic.Advice {
		background-color: #1D58A7;
	}
	
	.voices-entry .topics ul li.Communities,
	.voices .topic.Communities {
		background-color: #009FD4;
	}

	.voices-entry .topics ul li.Experiences,
	.voices .topic.Experiences {
		background-color: #DD3403;
	}

	.voices-entry .topics ul li.Women,
	.voices .topic.Women {
		display: none;
		background-color: #63b1b6;
	}
	
	.voices-entry .topics ul li.People,
	.voices .topic.People {
		background-color: #1E3877;
	}
	
	.voices-entry .topics ul li.Places,
	.voices .topic.Places {
		background-color: #E56E15;
	}
	
	.voices-entry-photo {
		width: 100%;
		height: 250px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	.voices-entry-details {
		padding: 1.5rem;
		position: relative;
	}
	
	.voices-entry-details h3 a {
		color: #121b21;
	}
	
	
	.voices-entry-details .media,
	.voices-entry-details .date,
	.voices-media, .voices-date {
		margin-bottom: 0;
		font-size: 0.9em;
		color: #696969;
	}
	
	.voices-entry-details .media::before,
	.voices-media::before{
		font-family: "Font Awesome 6 Pro";
		margin-right: 5px;
	}
	
		.voices-entry-details .media.Blog::before,
		.voices-media.Blog::before {
			content: '\f15c';
		}
	
		.voices-entry-details .media.Q\&A::before,
		.voices-media.Q\&A::before {
			content: '\f4b6';
		}

		.voices-entry-details .media.Video::before,
		.voices-media.Video::before{
			content: '\f144';
		}

		.voices-entry-details .media.Podcast::before,
		.voices-media.Podcast::before{
			content: '\f2ce';
		}
	
	.voices-entry-details .date::before,
	.voices-date::before {
		content: '\f133';
		font-family: "Font Awesome 6 Pro";
		margin-right: 5px;
	}

	body.voices #hero {
		background-image: none;
		height: 30vw;
		background: #000000;
	}

	body.voices #hero::before {
		filter: none;
		z-index: 1;
		margin: 0 auto;
		right: 0;
	}
	
	body.voices #hero::after {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		right: 0;
		content: '';
		z-index: 1;
		background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
    	margin: 0 auto;
	}

	body.voices #hero #breadcrumbs,
	body.voices #hero h1 {
		display: none;
	}

	.voices-entry-content {
		position: relative;
		top: -100px;
	}
	
	.voices-entry-content .topic {
		color: #ffffff;
		font-size: 0.8em;
		line-height: 1;
		text-transform: uppercase;
		padding: 5px 10px;
		border-radius: 30px;
		display: inline-block;
    	margin-bottom: .5rem;
	}

	.voices-entry-content h1 {
		font-size: 2.5rem;
		letter-spacing: -1.5px;
	}

	.voices-entry-content p br {
		content: "" !important;
		display: block !important;
		margin-bottom: 1.6rem !important;
	}

	.voices-entry-content #voices-dept a {
		text-decoration: none;
	}	
	
	.voices-sidebar button.form-control {
		border: none;
		background-color: #FF552E;
    	color: #ffffff;
		font-weight: 600;
	}
	
	.voices-sidebar button.form-control:hover {
		background-color: #DD3403;
	}
	
	.voices-sidebar .topics li {
		border-bottom: 1px solid #ccc;
		padding: 10px 0px;
    	margin-bottom: 0;
		font-weight: 600;
		justify-content: space-between;
	}
	
	.voices-sidebar .topics li:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
	
	.voices-sidebar .topics li a {
		color: #121b21;
		transition: all 0.2s ease-in-out;
	}
	
	.voices-sidebar .topics li a:hover {
		text-decoration: none;
		padding-left: 5px;
	}

	.voices-sidebar .topics li::after {
		content: '';
		display: inline-block;
		width: 20px;
		height: 20px;
		border-radius: 100%;
		margin-right: 10px;
	}

	.voices-sidebar .topics li.advice::after {
		background-color: #1D58A7;
	}

	.voices-sidebar .topics li.communities::after {
		background-color: #009FD4;
	}

	.voices-sidebar .topics li.experiences::after {
		background-color: #DD3403;
	}

	.voices-sidebar .topics li.Women::after {
		display:none;
		background-color: #63b1b6;
	}	

	.voices-sidebar .topics li.people::after {
		background-color: #1E3877;
	}

	.voices-sidebar .topics li.places::after {
		background-color: #E56E15;
	}
	
	.voices-sidebar .topics li.advice a:hover {
		color: #1D58A7;
	}
	
	.voices-sidebar .topics li.communities a:hover {
		color: #009FD4;
	}

	.voices-sidebar .topics li.experiences a:hover {
		color: #DD3403;
	}

	.voices-sidebar .topics li.Women a:hover {
		display:none;
		color: #63b1b6;
	}	

	.voices-sidebar .topics li.people a:hover {
		color: #1E3877;
	}
	
	.voices-sidebar .topics li.places a:hover {
		color: #E56E15;
	}
	
	.voices-sidebar .recent-posts a {
		color: #121b21;
	}

	.voices-sidebar .recent-post-photo {
		height: 70px;
		width: 90px;
		flex: 0 0 90px;
    	background-size: cover;
    	background-position: center center;
    	background-repeat: no-repeat;
	}

	body.voices .box-shadow {
		box-shadow: 0px 2px 5px #ccc;
	}
	
	.voices-back {
		border-top: 1px solid #ccc;
		padding-top: 1.5rem;
		margin-top: 1rem;
	}
	
	.voices-back a {
		color: #121b21;
	}
	
	.voices-back a:hover {
		text-decoration: none;
		color: #284c90;
	}
	
	/* Voices homepage feature */
	.voices-recent-post-photo {
		height: 80px;
		width: 100px;
		flex: 0 0 100px;
    	background-size: cover;
    	background-position: center center;
    	background-repeat: no-repeat;
	}
}

@media screen and (max-width: 767px) {
	.voices-entry-content h1 {
		font-size: 2rem;
	}
}
/* end voices */


/* majors & minors */
@media all {

	.quiz-container .progress {
		background-color: #ffffff;
		border-radius: 1rem;
		margin-bottom: 2.5rem;
	}

	.quiz-container .progress-bar {
		background-image: linear-gradient(to right, rgba(255, 85, 46, 0.8), rgba(204, 0, 0, 0.8));
		background-color: #ff552e;
	}

	.quiz-container #btn-previous:not(:disabled) {
		background-color: transparent;
	}

	.quiz-container #btn-previous:hover {
		color: #284c90;
	}

	.quiz-container #btn-continue {
		background-color: #284c90;
		color: #ffffff;
	}


	.quiz-number {
		display: inline-block;
		border-radius: 100%;
		width: 60px;
		height: 60px;
		font-weight: 700;
		line-height: 60px;
		font-size: 2rem;
	}

	.quiz-results-all {
		-webkit-columns: 2;
		-moz-columns: 2;
		columns: 2;
		column-gap: 5rem;
		padding-left: 1rem;
	}

	#quiz-submit.btn-outline-primary {
		border: 1px solid #284C90;
		color: #284C90;
	}

		#quiz-submit.btn-outline-primary:hover {
			border: 1px solid #284C90;
			background-color: #284C90;
			color: #fff;
		}

	.major-thumb {
		height: 100%;
	}

		.major-thumb:hover {
			cursor: pointer;
		}

		.major-thumb .upper {
			height: 200px !important;
		}

		.major-thumb a {
			color: #13294b;
		}


	body.majors-and-minors.landing #hero h1 {
		font-size: 3rem;
		line-height: 3rem;
		margin-bottom: 1rem;
		max-width: 60%;
	}

	body.majors-and-minors .form-control-sm,
	body.majors-and-minors button.button {
		border-radius: 0;
	}

	#degree-programs a {
		color: #ffffff;
		padding: 3px 10px;
		border-radius: 30px;
		margin-right: 5px;
		text-decoration: none;
	}

		#degree-programs a:hover {
			text-decoration: none;
			background: #ffffff !important;
			color: #13294b;
		}

		#degree-programs a::after {
			content: '\f0a9';
			font-family: "Font Awesome 6 Pro";
			font-size: .9rem;
			padding-left: 4px;
		}

		#degree-programs a.bs {
			background: #DD3403;
		}

		#degree-programs a.master {
			background: #1D58A7;
		}

		#degree-programs a.phd {
			background: #BB5B11;
		}

		#degree-programs a.five-yr {
			background: #007EA8;
		}

		#degree-programs a.cert {
			background: #4D69A0;
		}
}
@media screen and (max-width: 767px) {
	
	.quiz-results-all {
 		-webkit-columns: 1;
 		-moz-columns: 1;
		columns: 1;
	}
	
	body.majors-and-minors.landing #hero h1 {
		max-width: 100%;
		font-size: 2.5rem;
		line-height: 2.5rem;
	}
	
}
/* end majors & minors */




/* Majors Scenarios */

@media all {
	/* hide mobile section */
	#tile22338 {
		display: none;
	}
	
	.airport .animated {
		opacity: 1;
	}

	#tile22397 {
		margin: 0 -15px -1.2rem -15px;
		width: calc(100% + 30px);
		max-width: calc(100% + 30px);
		flex: 0 0 calc(100% + 30px);
		background: var(--il-arches-blue-2);
	}

	#welcome-container {
		background: rgba(0, 0, 0, 0.5);
		transition: background 1s ease;
	}

	 #scenario-container {
		width: 100%;
		height: 55vw;
		display: flex;
		align-content: center;
		justify-content: center;
		overflow: hidden;
		transition: all 1s ease;
		background-size: 100%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	 }

	.popover-anchor {
		width: 10px;
		height: 10px;
		position: absolute;
		top: 50%;
		left: 50%;
	}

	.airport .popover {
		max-width: 400px;
		border: none;
		border-radius: 0;
		-webkit-box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.4); 
		box-shadow: 3px 3px 15px 0px rgba(0,0,0,0.4);
		font-family: 'Source Sans Pro', Arial, sans-serif;
		font-size: 1rem;
		z-index: 1;
	}

	.airport .popover .arrow::before {
		border-left-color: transparent !important;
	}

	.airport .popover-body {
		padding: 0;
	}

	.popover-controls {
		display: flex;
		justify-content: space-between;
	}

	.popover-jumpto {
		color: #1d58a7;
		padding: 0;
	}

	.popover-prev::before {
		font-family: 'Font Awesome 6 Pro';
		content: '\f053';
		margin-right: 5px;
		font-size: .8rem;
	}

	.popover-next::after {
		font-family: 'Font Awesome 6 Pro';
		content: '\f054';
		margin-left: 5px;
		font-size: .8rem;
	}
}

@media screen and (max-width: 991px) {
	/* hide desktop section */
	#tile22397 {
		display: none;
	}
	
	body.airport .popover {
		display: none;
	}
	
	#content .tile-list #tile22338 {
		display: block;
		padding-top: 2rem !important;
		background: var(--il-arches-blue-2);
		margin: 0 -15px -1.2rem -15px;
		width: calc(100% + 30px);
		max-width: calc(100% + 30px);
		flex: 0 0 calc(100% + 30px);
	}
	
	#tile22338 img {
		background: linear-gradient(var(--il-arches-blue-2) 50%, var(--engr-white) 100%);
	}
	
	.modal-dialog-slideout {
		min-height: 100%;
		margin: 0 0 0 auto;
		background: var(--engr-white);
	}
	
	.modal.fade .modal-dialog.modal-dialog-slideout {
		-webkit-transform: translate(100%,0);
		transform: translate(100%,0);
	}
	
	.modal.fade.show .modal-dialog.modal-dialog-slideout {
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
		flex-flow: column;
	}
	
	.modal-dialog-slideout .modal-content {
		border: 0;
	}
}



/* reputation landing page */
#tile22647::before {
	content: '';
	height: 100%;
	width: 50%;
	background-color: var(--il-orange);
	background-image: url('https://ws.engr.illinois.edu/sitemanager/viewphoto.aspx?id=64023');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
}

body.first .slider-one .slick-slide {
	min-height: 0px;
}

@media screen and (max-width: 767px) {
	#tile22647::before {
		height: 30%;
		width: 100%;
	}
}

/* mahmoods story */
#maggieHeadStuff {
	z-index: 0;
	top: 24px;
	left: -18px;
	opacity: 0;
}

.maggie-animation {
	animation: maggie 1s ease-out;
	animation-fill-mode: forwards;
}

@keyframes maggie {
	0% {
		transform: translateX(-50vw);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

#fahadHeadStuff {
	z-index: 0;
	top: 22px;
	left: -8px;
	opacity: 0;
}

.fahad-animation {
	animation: fahad 1s ease-out;
	animation-fill-mode: forwards;
}

@keyframes fahad {
	0% {
		transform: translateX(50vw);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

#mic {
	position: relative;
	left: 0;
	top: 0;
	background-image: url(https://ws.engr.illinois.edu/sitemanager/viewphoto.aspx?id=69960);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	height:150px;
	width: 58px;
	animation: mic 1s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1s);
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

@keyframes mic {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100vw);
	}
}

/* junk drawer */
@media all {
	.orange-triangle {
		border-left-color: rgba(0, 0, 0, 0);
		border-left-style: solid;
		border-left-width: 20px;
		border-right-color: rgba(0, 0, 0, 0);
		border-right-style: solid;
		border-right-width: 20px; 
		border-top-color: #ff552e;
		border-top-style: solid;
		border-top-width: 20px;
		height: 20px;
		margin-left: 50%;
		width: 40px;
		position: absolute;
		top: 0px;
		left: 0px; 
		z-index: 2;
		-moz-transform: translate(-50%, 0%);
		-webkit-transform: translate(-50%, 0%);
		transform: translate(-50%, 0%);
	}
	
	.mobile-only {
		display: none;
	}
}


@media screen and (max-width: 767px) {
	.desktop-only {
		display: none;
	}
	
	.mobile-only {
		display: block;
	}
}