/* 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 */



/* sm-topic custom colors */
@media all {

	.custom-checkbox.Admissions .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Admissions::after,
	.sm-topics li.Admissions {
		background-color: #DD3403;
		border-color: #DD3403;
	}

	.sm-topic-list li.Admissions a:hover {
		color: #DD3403;
	}

	.custom-checkbox.COVID-19 .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.COVID-19::after,
	.sm-topics li.COVID-19 {
		background-color: #1D58A7;
		border-color: #1D58A7;
	}

	.sm-topic-list li.COVID-19 a:hover {
		color: #1D58A7;
	}

	.custom-checkbox.Social.Justice .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Social.Justice::after,
	.sm-topics li.Social.Justice {
		background-color: #BB5B11;
		border-color: #BB5B11;
	}

	.sm-topic-list li.Social.Justice a:hover {
		color: #BB5B11;
	}

	.custom-checkbox.Research .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Research::after,
	.sm-topics li.Research {
		background-color: #008800;
		border-color: #008800;
	}

	.sm-topic-list li.Research a:hover {
		color: #008800;
	}

	.custom-checkbox.From.the.Dean .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.From.the.Dean::after,
	.sm-topics li.From.the.Dean {
		background-color: #1E3877;
		border-color: #1E3877;
	}

	.sm-topic-list li.From.the.Dean a:hover {
		color: #1E3877;
	}

	.custom-checkbox.Seminars .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Seminars::after,
	.sm-topics li.Seminars {
		background-color: #007EAB;
		border-color: #007EAB;
	}
	
	.sm-topic-list li.Seminars a:hover {
		color: #007EAB;
	}

	.custom-checkbox.Advice .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Advice::after,
	.sm-topics li.Advice {
		background-color: #1D58A7;
		border-color: #1D58A7;
	}

	.sm-topic-list li.Advice a:hover {
		color: #1D58A7;
	}

	.custom-checkbox.Communities .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Communities::after,
	.sm-topics li.Communities {
		background-color: #007EA8;
		border-color: #007EA8;
	}

	.sm-topic-list li.Communities a:hover {
		color: #007EA8;
	}

	.custom-checkbox.Experiences .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Experiences::after,
	.sm-topics li.Experiences {
		background-color: #DD3403;
		border-color: #DD3403;
	}

	.sm-topic-list li.Experiences a:hover {
		color: #DD3403;
	}

	.custom-checkbox.People .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.People::after,
	.sm-topics li.People {
		background-color: #1E3877;
		border-color: #1E3877;
	}

	.sm-topic-list li.People a:hover {
		color: #1E3877;
	}

	.custom-checkbox.Places .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Places::after,
	.sm-topics li.Places {
		background-color: #BB5B11;
		border-color: #BB5B11;
	}

	.sm-topic-list li.Places a:hover {
		color: #BB5B11;
	}

	.custom-checkbox.Undergraduate .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Undergraduate::after,
	.sm-topics li.Undergraduate {
		background-color: var(--il-industrial);
		border-color: var(--il-industrial);
	}

	.sm-topic-list li.Undergraduate a:hover {
		color: var(--il-industrial);
	}

	.custom-checkbox.Graduate .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Graduate::after,
	.sm-topics li.Graduate {
		background-color: var(--il-arches-darker-1);
		border-color: var(--il-arches-darker-1);
	}

	.sm-topic-list li.Graduate a:hover {
		color: var(--il-arches-darker-1);
	}

	.custom-checkbox.Careers .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Careers::after,
	.sm-topics li.Careers {
		background-color: var(--il-harvest);
		border-color: var(--il-harvest);
	}

	.sm-topic-list li.Careers a:hover {
		color: var(--il-harvest);
	}

	.custom-checkbox.Entrepreneurship .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Entrepreneurship::after,
	.sm-topics li.Entrepreneurship {
		background-color: var(--il-prairie);
		border-color: var(--il-prairie);
	}

	.sm-topic-list li.Entrepreneurship a:hover {
		color: var(--il-prairie);
	}

	.custom-checkbox.Faculty .custom-control-input:checked ~ .custom-control-label::before,
	.sm-topic-list li.Faculty::after,
	.sm-topics li.Faculty {
		background-color: var(--il-patina);
		border-color: var(--il-patina);
	}

	.sm-topic-list li.Faculty a:hover {
		color: var(--il-patina);
	}


}




/* 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;
		}


	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;
	}
}