// .scss files will get core functions and variables automatically from build script

BODY.degree-detail {
	
	@media (min-width: 768px){
		#top-breadcrumb {
			margin-bottom: 3rem;
		}

		SECTION {
			padding-top: 0;

			.section-title {
				padding-top: 70px;
			}
		}
	}


	#page-navbar {
		width: 100%;
		background-color: $purple;
		height: 3.5rem;
		z-index: 10;
		display: none;
		
		&.scroll-fixed {
			position: fixed;
			top: 0;
		}

		@media (min-width: 768px){
			display: block;

			.touch & { display: none; }
		}

		UL {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			align-items: stretch;

			LI {
				display: inline-block;
				position: relative;
				padding: 0;
				top: 0;
				//height: 3.5em;
				flex: 1;

				A {
					font-family: $heading-font;
					font-weight: normal;
					color: #fff;
					display: block;
					text-align: center;
					padding: 0 1rem;
					text-decoration: none;
					line-height: 3.5rem;

					@media (min-width: 992px){
						font-size: 1.125rem;
					}
					@media (min-width: 1200px){
						font-size: 1.25rem;
					}
					
				}

				& + LI {
					A {
						//border-left: 1px solid $purple-alt;
						&::before {
							position:absolute;
							left: 0;
							width: 1px;
							background-color: $purple-alt;
							height: 80%;
							top: 10%;
							content: '';
						}
					}
				}

				&::before {
					font-family: "icons";
					font-style: normal;
					font-weight: normal;
					display: inline-block;
					text-decoration: inherit;
					width: 1em;
					position: absolute;
					font-size: 36px;
					bottom: -1.125rem;
					color: transparent;
					left: 0;
					right: 0;
					margin: auto;
					content: '\e821';  /* ICON-TRIANGLE-DOWN */
					
				}

				&:focus, &.active, &:hover, &:active {
					background-color: $purple-alt;
					
					&::before {
						color: $purple-alt;
						transition: color .25s ease-in-out;
					}

					A {
						background-color: $purple-alt;
					}

					& + LI {
						A {
							&::before { display: none; }
						}
					}
				}


			}
		}
	}

	#content-sections {
		
		.bg-quote {
			padding: 1rem;
			margin: 2rem 0 0 0;
		}
		
		section:nth-child(odd){
			background: $offwhite;
			
			.bg-quote { background: white; border: 0 none; }
		}
		section:nth-child(even){
			background: white;
			
			.bg-quote { background: $offwhite; border: 0 none; }
		}
	}

	#the-curriculum {
		
		IMG {
			display: block;
			width: 100%;
			height: auto;
		}
		
		.flexrow {

			A {
				font-family: $heading-font;
				font-weight: 300;
				font-size: 1.75rem;
				line-height: 1.1em;
				text-decoration: none;
				padding-left: 3.5rem;
				color: $purple;
				display: block;
				margin-bottom: .5rem;
				position: relative;
				min-height: 4em;
				flex: 1;

				@media (min-width: 768px){
					font-size: 1.125rem;
					margin-bottom: 0;
					min-height: none;
				}
				@media (min-width: 992px){
					font-size: 1.325rem;
				}
				@media (min-width: 1200px){
					font-size: 1.5rem;
				}

				&:hover {
					color: $gold;
				}

				&::before {
					display: inline-block;
					font-size: 3.5rem;
					position: absolute;
					left: 0;
					margin: 0;
					padding-right: 5px;
				}

				& + A {
					@media (min-width: 768px){
						margin-left: 24px;
					}
				}
			}
		}
	}
	
	.program-summary {
		p {
			color: $purple;
			font-size: 1rem;
			
			&:first-of-type { font-size: 1.325rem; padding-bottom: 0.5em; }
			
			@media (min-width: 1024px){
				font-size: 1.25rem;
				&:first-of-type { font-size: 1.5rem; }
			}
			
			@media (min-width: 1200px){
				
				&:first-of-type { font-size: 1.75rem; }
			}
		}
	}

	.square-profile {
		@include square-image();
		margin: 0 auto 1rem auto;
		border-radius: 50%;
	}
	
	.profile-small {
		display: flex;
		text-decoration: none;
		overflow: hidden;
		padding: 0.5rem;
		line-height: 1.1em;
		width: 100%;
		max-width: 300px;
		
		.profile-small-image {
			flex: 0 0 auto;
			width: 64px;
			height: 64px;
			display: block;
			margin: 0;
		}
		
		.profile-small-content {
			display: block;
			padding-left: 0.5rem;
		}
		
		header {
			font-weight: bold;
			color: $purple;
		}
		p {
			padding: 0;
			font-size: rem(14);
			color: $body-color;
		}
		
		&:hover {
			background: $gold-alt;
			
		}
	}

	#your-professors {
	
		.flexrow {
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			flex-wrap: wrap;
			justify-content: inherit;
			align-items: stretch;
			align-content: flex-start;
		}
		
		.profile {
			flex: 0 0 auto;
			font-family: $body-font;
			color: $graytxt;
			text-decoration: none;
			padding: 1rem;
			display: block;
			width: 50%;

			header {
				font-family: $body-font;
				font-weight: 700;
				color: $purple;
				margin: 0 0 0.25rem 0;
				font-size: 1.2rem;
			}
			
			p {
				font-size: 0.875rem;
				color: $graytxt;
				padding: 0;
				margin: 0;
			}

			&:hover {
				background-color: $gold-alt;
			}
			
			@media (min-width: 768px){ width: 25%; }
			@media (min-width: 992px){ width: 20%; text-align: center; }
		}
	}
	
	#the-experience .wrap-16x9 { margin-bottom: 1rem; }


	#your-future {
		.col-sm-3 {
			margin-bottom: 2rem;

			@media (min-width: 768px){
				margin-bottom: 0;
			}

			IMG {
				width: 100%;
				height: auto;
			}

			H3 {
				margin-bottom: .75rem;
			}
		}

	}

	
}


.link-icon {

	font-family: $heading-font;
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.1em;
	text-decoration: none;
	color: $purple;
	display: inline-block;
	margin: 0 0 1rem 0;
	padding: 0 0 0 3rem;
	vertical-align: middle;

	&:hover {
		color: $purple-alt;
	}

	&:before {
		display: inline-block;
		font-size: 2rem;
		width: 3rem;
		vertical-align: middle;
		margin: 0 0 0 -3rem;
		text-align: center;
		
	}
	
	&.block {
		display: block;
	}
	

	@media (min-width: 1200px){
		font-size: 1.25rem;
		padding: 0 0 0 4rem;
		&:before {
			font-size: 3rem;
			margin: 0 0 0 -4rem;
			width: 4rem;
		}
	}
	
}

.special-list {
	font-size: 1rem;
	margin: 0;
	padding: 0;
	width: 100%;
	
	@media (min-width: 992px){
		columns: auto 2;
		column-gap: 1rem;
	}
	
	> li {
		line-height: 1.25em;
		font-size: 1rem;
		margin: 0 0 0 1rem;
		padding: 0 0 0.5rem 0;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
	}

}