@import url('//fonts.googleapis.com/css?family=Open+Sans:400,500,500i,600,700,700i');
@import url('//fonts.googleapis.com/css?family=Roboto+Mono:500');
/* Tweaked (heavily) by Mike Hanley for SCS Help Pages and Dean's site */
/* Last Modified: February 4, 2021 */
/* This version is further modified from the one on the main SCSCF website
/* Main css this was forked from last modified: July 17, 2018 */
/* Based on campus templates dated 2017-05-25, SCSCF templates dated 2018-07-16 */
/* Customized Normalization */
 article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
	 display:block 
}
 audio,canvas,video{
	 display:inline-block;
	 *display:inline;
	 *zoom:1 
}
 audio:not([controls]){
	 display:none;
	 height:0 
}
 [hidden]{
	 display:none 
}
 html{
	 font-size:100%;
	 -ms-text-size-adjust:100%;
	 -webkit-text-size-adjust:100% -moz-osx-font-smoothing: grayscale;
}
 html,button,input,select,textarea{
	 font-family:sans-serif 
}
 body{
	 margin:0 
}
 a:focus,a:active,a:hover{
	 outline:0 
}
 h1{
	 font-size:2em;
	 margin:.67em 0 
}
 h2{
	 font-size:1.5em;
	 margin:.83em 0 
}
 h3{
	 font-size:1.17em;
	 margin:1em 0 
}
 h4{
	 font-size:1em;
	 margin:1.33em 0 
}
 h5{
	 font-size:.83em;
	 margin:1.67em 0 
}
 h6{
	 font-size:.67em;
	 margin:2.33em 0 
}
 abbr[title]{
	 border-bottom:1px dotted 
}
 b,strong{
	 font-weight:bold 
}
 blockquote{
	 margin:1em 40px 
}
 dfn,address{
	 font-style:italic 
}
 hr{
	 -moz-box-sizing:content-box;
	 box-sizing:content-box;
	 height:0 
}
 mark{
	 background:#ff0;
	 color:#000 
}
 p,pre{
	 margin:1em 0 
}
 code,kbd,pre,samp{
	 font-family:monospace,serif;
	 _font-family:'courier new',monospace;
	 font-size:1em 
}
 pre{
	 white-space:pre;
	 white-space:pre-wrap;
	 word-wrap:break-word 
}
 q{
	 quotes:none 
}
 q:before,q:after{
	 content:"";
	 content:none 
}
 small{
	 font-size:80% 
}
 sub,sup{
	 font-size:75%;
	 line-height:0;
	 position:relative;
	 vertical-align:baseline 
}
 sup{
	 top:-0.5em 
}
 sub{
	 bottom:-0.25em 
}
 dl,menu,ol,ul{
	 margin:1em 0 
}
 dd{
	 margin:0 0 0 40px 
}
 menu,ol,ul{
	 padding:0;
	 list-style-position:inside 
}
 nav ul,nav ol{
	 list-style:none;
	 list-style-image:none 
}
 img{
	 border:0;
	 -ms-interpolation-mode:bicubic 
}
 svg:not(:root){
	 overflow:hidden 
}
 figure{
	 margin:0 
}
 form{
	 margin:0 
}
 fieldset{
	 border:1px solid silver;
	 margin:0 2px;
	 padding:.35em .625em .75em 
}
 legend{
	 border:0;
	 padding:0;
	 white-space:normal;
	 *margin-left:-7px 
}
 button,input,select,textarea{
	 font-size:100%;
	 margin:0;
	 vertical-align:baseline;
	 *vertical-align:middle 
}
 button,input{
	 line-height:normal 
}
 button,select{
	 text-transform:none 
}
 button,html input[type="button"],input[type="reset"],input[type="submit"]{
	 -webkit-appearance:button;
	 cursor:pointer;
	 *overflow:visible 
}
 button[disabled],html input[disabled]{
	 cursor:default 
}
 input[type="checkbox"],input[type="radio"]{
	 box-sizing:border-box;
	 padding:0;
	 *height:13px;
	 *width:13px 
}
 input[type="search"]{
	 -webkit-appearance:textfield;
	 -moz-box-sizing:content-box;
	 -webkit-box-sizing:content-box;
	 box-sizing:content-box 
}
 input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{
	 -webkit-appearance:none 
}
 button::-moz-focus-inner,input::-moz-focus-inner{
	 border:0;
	 padding:0 
}
 textarea{
	 overflow:auto;
	 vertical-align:top 
}
 table{
	 border-collapse:collapse;
	 border-spacing:0 
}
 html, body {
	 height: 100%;
	 font-family: 'Open Sans', 'Helvetica', sans-serif;
}
 html, button, input, select, textarea {
	 color: #000;
	/* why make #555 the default for everything? */
	 font-family: 'Open Sans', 'Helvetica', sans-serif;
}
/* UNIQUE SCS STUFF */
 .bigvideowrapper {
	 width: calc(40vw + 100px);
	 max-width: 720px;
	 margin-left: auto;
	 margin-right: auto;
	 margin-bottom: 1em;
}
 .bigvideowrapper iframe, .bigvideowrapper img {
	 box-shadow: 0px 2px 6px gray;
	 margin-bottom: .5em;
}
 ol.steps {
	/* reset */
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font-size: 100%;
	 font: inherit;
	 vertical-align: baseline;
	 list-style: none;
	/* actual styles */
	/* margin-top: 3em;
	 */
	 counter-reset: stepcounter;
}
 ol.steps>li {
	/* reset */
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font-size: 100%;
	 font: inherit;
	 vertical-align: baseline;
	 text-indent: 0;
	/* actual styles */
	 margin: 2em;
	 display:table;
	 width:90%;
	 background:#eee;
	 border-radius:5px;
	 font-family: 'Open Sans', sans-serif;
	 font-weight: 600;
	 font-size: 11pt;
	 line-height: 1.5;
	 overflow: hidden;
	 box-shadow: 0px 2px 6px gray;
	 position: relative;
	 min-height: 7em;
}
 ol.steps>li>span {
	 display:table-cell;
	 padding: 1rem;
	 z-index: 1;
	 position: relative;
	 box-sizing: border-box;
	 vertical-align: top;
	 min-height: 5em;
}
 ol.steps>li>span:before {
	 content: counter(stepcounter);
	 counter-increment: stepcounter;
	 position: absolute;
	 font-size: 100pt;
	 font-family: arial, sans-serif;
	 font-weight: normal;
	 color: #ddd;
	 z-index: -1;
	 top: -0.13em;
	 left: -0.05em;
	 line-height: 1;
}
 ol.steps>li>div {
	 display:table-cell;
	 width:50%;
	 height:auto;
	 position: relative;
	 z-index: 1;
}
 ol.steps>li>div>img {
	 width:100%;
	 height:auto;
	 margin-bottom: 1em;
}
 ol.steps>li>div>img:last-of-type {
	 width:100%;
	 height:auto;
	 margin-bottom: 0;
}
 pre {
	/* ol.steps>li code, ol.steps>li pre {
	*/
	display: table;
    /* to keep from being unnecessarily wide */
	padding: 1rem !important;
	font-family: "Roboto Mono","Courier New", monospace;
	font-weight: 500;
	color: darkblue;
	border: 0;
	background-image: -o-linear-gradient(right, rgb(255, 255, 255) 0%, #eee 100%);
	background-image: -webkit-linear-gradient(right, rgb(255, 255, 255) 0%, #eee 100%);
	background-image: -ms-linear-gradient(right, rgb(255, 255, 255) 0%, #eee 100%);
	background-image: linear-gradient(to right, rgb(255, 255, 255) 0%, #eee 100%);
}
code, kbd, samp, var {
    font-family: "Roboto Mono","Courier New", monospace;
	font-weight: 500;
	color: darkblue;
}
/* fallbacks for if images are put in the wrong places */
ol.steps>li>img {
	display: block;
	max-width: 100%;
	margin-left:auto;
	margin-right:auto;
}
ol.steps>li>span>img {
	display: block;
	max-width: 100%;
	margin-left:auto;
	margin-right:auto;
}
/* Mobile steps layout */
@media only screen and (max-width : 900px) {
	ol.steps>li {
		width: 90%;
		margin-left: 0.5em;
	}
	ol.steps>li>span {
		display: block;
		width: 100%;
	}
	ol.steps>li>div {
		display: block;
		width: 100%;
	}
}
/* Shrink down all the roof stuff on tinier screens */
@media only screen and (max-width: 534px) {
	.roof a.wordmark {
		display: none !important;
	}
	.quicklinks {
		display: table !important;
        width: 100%;
        right: 0 !important;
        top: .5em !important;
	}
	.quicklinks a {
		display: table-cell !important;
        text-align: center;
        width: 33%;
        height: 2em;
        line-height: 1em !important;
        vertical-align: middle;
	}
	.roof form {top: 48px !important;}
}
/********* Feedback Form Box *********/
 .grid.column2.nav, feedback-section {
	/* convoluted selector for our "optional footer" */
	 box-shadow: 0px -2px 10px rgba(0,0,0,0.5);
	 position: relative;
	 overflow: hidden;
	 clear: both;
}
 .grid.column2.nav > div {
	 position: relative;
	 z-index: 1;
	 overflow: visible;
}
 .grid.column2.nav > div:first-child:after {
	 content: "?";
	 color: #005566;
	 font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
	 font-size: 250px;
	 position: absolute;
	 top: 50px;
	 left: 0;
	 z-index: -1;
}
 .feedback-instructions {
	 height: 1em;
	 overflow: visible;
}
 .feedback-instructions h2 {
	 margin-bottom: 1em;
}
 #feedback-form {
	 max-height: 0;
	 opacity: 0;
	 transition: max-height .5s ease-in-out, opacity .5s ease-in-out;
	 display: block;
	 margin-bottom: 0;
}
 .feedback-button {
	 display: block;
	 color: white;
	 padding: .5em;
	 border: solid 2px white;
}
 .feedback-button:hover {
	 background: #FFF;
	 color: #900;
}
 .feedback-section input[type=checkbox]:checked ~ #feedback-form {
	 max-height: 300px;
	 opacity: 1;
}
 .feedback-button::before {
	/* the triangle */
	 content: ' ';
	 display: inline-block;
	 border-top: 5px solid transparent;
	 border-bottom: 5px solid transparent;
	 border-left: 5px solid currentColor;
	 vertical-align: middle;
	 margin-right: .7rem;
	 margin-left: 1rem;
	 transform: translateY(-2px);
	 transition: transform .2s ease-out;
}
 input[type=checkbox]:checked + .feedback-button{
	 border: solid 2px transparent;
}
 input[type=checkbox]:checked + .feedback-button:hover{
	 color: #FFF;
	 text-decoration: underline;
	 background: none;
}
 input[type=checkbox]:checked + .feedback-button::before {
	 transform: rotate(90deg) translateX(-3px);
}
 @media only screen and (max-width: 767px) {
	 .feedback-instructions p {
		 opacity: 0;
	}
}
	/********* REST OF NORMAL STYLES (albeit heavily modified) *********/
	 body {
		 background-color:#FFF;
		/* #333 for header match */
		 font-size: 15px;
		/* was 1em. 1em of WHAT? */
		 font-weight:500;
		 line-height: 1.35em;
		 margin: 0 auto;
		 max-width: 2580px;
		/* cap the width just above our largest popular resolution */
		 position: relative;
		 word-wrap: break-word;
	}
	#container {
		background-color:#FFF;
	}
	fieldset {
		border: 0;
		margin: 0;
		padding: 0;
	}
	.chromeframe {
		margin: 0.2em 0;
		background: #ccc;
		color: #000;
		padding: 0.2em 0;
	}
	p, pre {
		margin: 0;
		padding: .5em 0;
	}
	ul {
		list-style-type: disc ;
		margin: 1em 2em;
	}
	ol {
		margin: 1em 2em;
	}
	ul ul, ol ol, ul ol, ol ul {
		margin-top: .35em;
		margin-bottom: 0;
	}
	li {
		margin: 0;
		margin-left: 1em;
		text-indent: -1em;
		padding: .35em 0;
		line-height: 1.65em;
	}
	li>p+p {text-indent:0}

	/* Special list display (columns) */
	ul.inColumns {
        -webkit-column-width: 10em;
        -moz-column-width: 10em;
        -o-column-width: 10em;
        -ms-column-width: 10em;
        column-width: 10em;
        list-style-type: none;
        padding-inline-start: 0;
        display: block;
        vertical-align: top;
    }
    ul.inColumns li {
        display: inline-block;
        width: 10em;
        margin-bottom: 1em;
    }

	img {
		max-width:100%;
		vertical-align: middle;
		height: auto;
	}
	#content a:focus img {
		outline:1px dotted 
	}
	b, strong {
		letter-spacing: .025em;
		font-weight:700;
	}
	mark {
		color: inherit;
		padding: .25em;
	}
	.invert mark {
		background-color: yellow;
		color:#555;
	}
	hr {
		clear:both;
		display: block;
		height: 1px;
		border: 0;
		border-top: 1px solid rgba(0,0,0,.2);
		margin: 1em 0;
		padding: 0;
		max-width: 100% !important;
	}
	.invert hr {
		border-color: rgba(255,255,255,.5) 
	}
	/*table, table.fancy {
		 border: 0;
		 clear:both;
		 display:block;
		 max-width: 100%;
		 margin: 1em 0;
		 text-align:left;
		 overflow: auto;
	}
	 */
	/* SCS TABLE STYLES */
	 table, table.fancy {
		 border-collapse: collapse;
		/* margin: auto;
		 */
		 margin-top 2em;
		 border: none;
		 border-top: solid 2px #333;
		 border-bottom: solid 2px #555;
		 box-shadow: 0 2px 4px rgba(0,0,0,0.4);
	}
	 thead {
		 background-color: #333 !important;
		 -moz-osx-font-smoothing: grayscale;
	}
	 table tr:nth-child(even) {
		 background: #F7F7F7 
	}
	 table tr:nth-child(odd) {
		 background: #FFF 
	}
	 thead tr {
		 background-color: #333 !important;
		 color: white;
		 padding-top: .5em;
		 padding-bottom: .5em;
		 font-weight: bold;
		 position: -webkit-sticky;
		 position: -moz-sticky;
		 position: -o-sticky;
		 position: -ms-sticky;
		 position: sticky;
		 top: 53px;
		 z-index: 1;
	}
	thead tr td a, thead tr th a {
	    color: white;
	    border-bottom-color: white;
	}
	 table.alt tr:nth-child(even), tr.alternateRow {
		 background-color: rgba(0,0,0,.1);
	}
	 table.plain {
		 border: 0;
	}
	 table.plain tr {
		 background-color: none !important;
	}
	 th, td {
		/* border: 1px solid #bbb;
		 */
		 border: none;
		 padding: .5em .65em;
		 vertical-align: top;
	}
	 td {
		 min-width:1em;
		 min-height:1em;
	}
	 nav ul, nav ul ul {
		 list-style: none;
		 padding: 0;
		 margin: 0;
	}
	 iframe {
		 border: none 
	}
	/* ========== Typography! ============ */
	 h1, h2, h3, h4, h5, h6 {
		 clear: both;
		 font-size: 1em;
		 font-weight: 700;
		 line-height: 1.35em;
		 margin: 0;
		 padding: 1em 0 .65em;
		 word-wrap: normal;
		/* prevent weird breaks on huge text */
	}
	 h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
		 font-weight:inherit;
		 letter-spacing:inherit;
	}
	 h1 {
		 font-size: 2.15em;
		 font-weight: 700;
		/*300*/
		 color: rgb(153,0,0);
	}
	 .content .sidebar div h1 {
		 font-size: 1.5em;
		/* was 1.8 */
		 color: #555;
		/* See, this is less important. This can be less prominent. */
		 font-weight: 500;
	}
	 h2 {
		 font-size: 1.6em;
		 font-weight: 500;
		 color: rgb(153,0,0);
	}
	/* h1 b, b h1, h1 strong, strong h1, h2 b, b h2, h2 strong, strong h2 {
		 font-weight:300 
	}
	 */
	 h3 {
		 text-transform: none;
		 letter-spacing: 0;
		 font-weight: 700;
		 font-size: 1.15em;
		 line-height: 1.5em;
	}
	 h4 {
		/* .cta style */
		 font-size: 1em;
		 letter-spacing: .025em;
		 padding-bottom: 0;
		 text-transform: uppercase;
		 line-height: 1.5em;
	}
	 h1+h2 {
		 clear: none;
		 padding-top: 0;
	}
	h2+h3 {
		clear: none;
		padding: 0 0 .65em;
		margin-top: -.65em;
	}
	h2+h3+p {
		padding-top: 1em 
	}
	p, .rule-bottom + p, pre, address {
		line-height: 1.65em;
		padding:1em 0;
	}
	.content > :last-child, p:last-child, address:last-child, pre:last-child, h1:last-child, h2:last-child {
		padding-bottom:0;
	}
	.float-right {
		float: right;
		margin-left: 2em;
		margin-right: 0;
		margin-bottom: 2em;
		padding-top: 1em;
		max-width: 45%;
		box-sizing: border-box;
		clear: both;
	}
	.float-left {
		float: left;
		margin-right: 2em;
		margin-left: 0;
		margin-bottom: 2em;
		padding-top: 1em;
		max-width: 45%;
		clear: both;
	}
	.centered {
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 90%;
		clear: both;
	}
	/* BLOCKQUOTES and NOTES */
	blockquote, .blockquote {
		padding-left: .5em;
		margin-left: .5em;
		position: relative;
		font-size: 1.15em;
		font-style: oblique;
		color: #333;
		border-left: solid #333 40px;
		min-height: 32px;
	}
	blockquote:before, .blockquote:before {
		content:open-quote;
		font-family: "Times New Roman", Times, serif;
		font-size: 65pt;
		color: white;
		position: absolute;
		left: -52px;
		top: 25px;
		z-index: 1;
		text-indent: 0;
	}
	blockquote:after, .blockquote:after {
		/* This is a stupid hack to override "smart" quotes... */
		content:close-quote;
		color: rgba(255,255,255,0);
	}
	.invert blockquote, .invert .blockquote {
		color: white;
		border-left: solid rgba(255,255,255,0) 40px;
	}
	.note {
	    color: #000;
		background: rgb(255, 255, 224);
		box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px;
		padding-top: 1em !important;
		padding-bottom: 1em !important;
		margin-left: 2em;
		margin-right: 2em;
		padding-left: 3em;
		padding-right: 1em;
		position: relative;
		margin-bottom: 1.5em;
		text-indent: 0;
		overflow: auto;
	}
	.note:before {
		position: absolute;
		content: "i";
		left:.3em;
		font-size: 32pt;
		font-family: "Roboto Mono", monospace;
		color: rgb(220,220,172);
	}
	table:last-child, blockquote:last-child, .blockquote:last-child {
		margin-bottom:0;
	}
	h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child, h1 + p, h2 + p, h3 + p, address:first-child, h1 + address, h2 + address, h3 + address, pre:first-child, h1 + pre, h2 + pre, h3 + pre, img.floatleft ~ h1, img.floatleft ~ h2, img.floatleft ~ h3, img.floatleft ~ h4, img.floatleft ~ h5, img.floatleft ~ h6, img.floatleft ~ p, h1 + .floatleft + p, h1 + .floatright + p, h2 + .floatleft + p, h2 + .floatright + p, h3 + .floatleft + p, h3 + .floatright + p {
		padding-top: 0;
	}
	h1 + ul, h2 + ul, h3 + ul, h1 + ol, h2 + ol, h3 + ol {
		 margin-top: 0;
	}
	 small, div:not(.hero) .small {
		 font-size:90%;
		 letter-spacing:.025em;
		 line-height: 1em;
	}
	/* ======================================================================= Page Width (optimized for Macbooks & standard desktop screen resolutions) ========================================================================== */
	 .roof, header > div, header nav, .hero > .text, .hero .caption, .grid, .content, .needs-gutter-padding {
		/*GUTTER*/
		 padding: 2em 9%;
		 width: auto;
	}
	 .breadcrumbs {
		 padding: 0;
		 padding-left: 9%;
		 margin-top: .5em; /*-1 without nav */
		 width: auto;
	}
	 .menu-on .roof, .menu-on header > div, .menu-on header nav, .menu-on .hero > .text, .menu-on .hero .caption, .menu-on .grid, .menu-on .breadcrumbs, .menu-on .content {
		/* GUTTER */
		 padding-left: 2%;
		 padding-right: 2%;
	}
	 .menu-on .homeside-bottom {
		 right: 2%;
	}
	/* ============================== Header & Roof (wordmark, search, header nav) =============================== */
	 #container > header.float {
		 background-color: rgba(255,255,255,.9);
		 position: absolute;
		 top: 0;
		 width: 100%;
		 z-index: 10;
	}
	 header {
		/*border-bottom: solid 8px #900;
		 */
		 padding-bottom: 8px;
		 background: #067;
		 background-image: url("../site-images/dean-header.jpg");
		/* linear-gradient(to right, rgb(153,0,0) 5%, rgb(53,53,53) 95%);
		 */
		 background-repeat: no-repeat;
		 background-position: right center;
		 background-size: 50vw;
		/* dragon had been pos 25px -23px and size 20vw */
		 box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
		 -webkit-font-smoothing: antialiased;
		 -moz-font-smoothing: grayscale;
		 -moz-osx-font-smoothing: grayscale;
	}
	 .homepage header {
		 background-image: url("../site-images/dragon-watermark.png"), url("../site-images/dean-header.jpg");
		/* linear-gradient(to right, rgb(153,0,0) 5%, rgb(53,53,53) 95%);
		 */
		 background-repeat: no-repeat, no-repeat;
		 background-position: 50px 10px, right center;
		 background-size: 30vw, 66vw;
		 position: relative;
	}
	/*** Active Alerts (main) ***/
	/* alert animation... */
	 @-webkit-keyframes slideIn {
		 from {
			 opacity:0;
			 left:300px;
		}
		 to {
			 opacity:1;
			 left: 0px;
		}
	}
	 @-moz-keyframes slideIn {
		 from {
			 opacity:0;
			 left:300px;
		}
		 to {
			 opacity:1;
			 left: 0px;
		}
	}
	 @keyframes slideIn {
		 from {
			 opacity:0;
			 left:300px;
		}
		 to {
			 opacity:1;
			 left: 0px;
		}
	}
	 .alerts {
		 display: block;
		 padding: 0;
		 padding-top: 1em;
		 margin-right: 9%;
		/*GUTTER*/
		 width: 41%;
		/* 100-50-9 */
		 min-height:150px;
		 margin-bottom: -6em;
		 position: relative;
		 left: 50%;
		 box-sizing: content-box;
	}
	/* .alerts:after {
		 content: "PLACEHOLDERS";
		 display: block;
		 position: absolute;
		 color: rgba(100,100,255,0.5);
		 font-weight: 700;
		 font-size: 32pt;
		 top: 60px;
		 right: 50px;
		 transform: rotate(-15deg);
	}
	 */
	 .menu-on .alerts {
		 margin-right: 2%;
		/*GUTTER*/
		 left: 57%;
		/*50+9-2*/
		 padding-left: 0;
		 padding-right: 0;
	}
	 .scscf-alert {
		background: rgba(0,0,0,.66)
	}
	 .cmu-alert {
		background: rgba(53,53,53,.8)
	}
	 .alerts div[class$='alert'] {
		 background-image: url("../site-images/warning.png");
		 background-repeat: no-repeat;
		 background-size: 40px 40px;
		 background-position: 7px center;
		 padding: .6em;
		 padding-left: 55px;
		 margin-bottom: 1em;
		 box-sizing: border-box;
		 width: 100%;
		 max-width: 550px;
		 margin-left: auto;
		 line-height: 1 !important;
		 position: relative;
		 box-shadow: 0 0 16px rgba(0,0,0,0.2);
		 opacity:0;
		/* make things invisible upon start */
		 -webkit-animation:sideIn ease-in 1;
		/* call the slideIn keyframe, use ease-in, repeat once */
		 -moz-animation:slideIn ease-in 1;
		 animation:slideIn ease-in 1;
		 -webkit-animation-fill-mode:forwards;
		/* stay at last keyframe when animation finishes */
		 -moz-animation-fill-mode:forwards;
		 animation-fill-mode:forwards;
		 -webkit-animation-duration:0.5s;
		 -moz-animation-duration:0.5s;
		 animation-duration:0.5s;
		 -webkit-animation-delay: 0.2s;
		 -moz-animation-delay: 0.2s;
		 animation-delay: 0.2s;
	}
	 .alerts div[class$='alert'] h2 {
		 color: rgb(240,254,8);
		 font-size: 14px;
		 font-weight: 700;
		 line-height: 1;
	}
	 .alerts div[class$='alert'] h2 a {
		 color: rgb(240,254,8);
		 text-decoration: underline;
	}
	 .alerts div[class$='alert'] p {
		 color: lightgray;
		 margin-top: -2px;
		 padding-bottom: 0;
		 line-height: 1;
		 font-size: 14px;
		 margin-right: 4em;
	}
	 .all-alerts {
		 display: block;
		 font-size: 12px;
		 line-height: 1.2;
		 color: rgb(102,102, 102) !important;
		/*text-decoration: underline;
		*/
		 position: absolute;
		 right: .5em;
		 text-transform: uppercase;
		 font-weight: 500;
		 bottom: .5em;
		 cursor: pointer;
		/* not sure where this got overidden... */
	}
	 .all-alerts:hover {
		 color: #c00 !important;
	}
	 .roof {
		 border-bottom: 1px solid rgba(0,0,0,.2);
		 font-size: 90%;
		 line-height: 0;
		 padding-top: 0;
		 padding-bottom: 0;
		 z-index: 10000;
		/* for mobile nav */
		/* We're just gonna go ahead and set this explicitly, instead of letting the University CMS "generate" it for us... */
		 height: 57px;
		 background: rgb(51,51,51) !important;
		 position: -webkit-sticky;
		 position: sticky;
		/* For Walt */
		 top: 0;
		 box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
	}
	 .searchSite, .search > label > span {
		 display: none !important;
		/* Already turned off in Cascade, but we want it SUPER-off */
	}
	 .roof > div {
		/* border-bottom: 1px solid rgba(0,0,0,.2);
		 */
		 position: relative;
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
		 -moz-flex-flow: nowrap row;
		 -ms-flex-flow: nowrap row;
		 -webkit-flex-flow: nowrap row;
		 flex-flow: nowrap row;
		 -moz--moz-align-items:stretch;
		 -ms-align-items:stretch;
		 -webkit-align-items:stretch;
		 align-items:stretch;
		 -moz-align-content:stretch;
		 -ms-align-content:stretch;
		 -webkit-align-content:stretch;
		 align-content:stretch;
		 -moz-justify-content: flex-start;
		 -ms-justify-content: flex-start;
		 -webkit-justify-content: flex-start;
		 justify-content: flex-start;
	}
	 .float .roof > div {
		 border-bottom: 1px solid rgba(0,0,0,.2);
	}
	 .roof.invert, .float .roof, .float .roof.invert > div {
		 border-bottom: 0 none;
	}
	 .roof.invert a, .roof a, .roof a:focus, .roof a:hover, #container > header a, #container > header a:focus, #container > header a:hover {
		 border-bottom-color: transparent;
	}
	 .roof a.wordmark, .roof form {
		 display: inline-block;
		 width: 25%;
		 -webkit-box-flex: 0 1 auto;
		 -moz-box-flex: 0 1 auto;
		 -webkit-flex: 0 1 auto;
		 -ms-flex: 0 1 auto;
		 flex: 0 1 auto;
	}
	/* Wordmark Image for all browsers except IE */
	 body:not(.ie) .roof a.wordmark {
		 background: url("../site-images/scs-wordmark-white.png") no-repeat left center scroll transparent;
		 background-size: contain;
	}
	 body:not(.ie) .roof.invert .wordmark {
		 background: url("../site-images/scs-wordmark-white.png") no-repeat left center scroll transparent;
		 background-size: contain;
	}
	/* IE doesn't scale images well =( */
	/* Doesn't seem critical to our usage - used to be ../site-images/cmu/cmu-wordmark-small.png */
	 body.ie .roof a.wordmark {
		 background: url("../site-images/scs-wordmark-white.png") no-repeat left center scroll transparent;
		 background-size: contain;
	}
	 body.ie .roof.invert .wordmark {
		 background: url("../site-images/scs-wordmark-white.png") no-repeat left center scroll transparent;
		 background-size: contain;
	}
	 .roof a.wordmark {
		 border-bottom: none 0;
		 min-height: 3em;
		 margin: 1em 0 .65em;
		 text-indent: -9999px;
		 width: 31.333%;
		 min-width: 300px;
	}
	 .roof.invert .wordmark {
		 margin: 6px 0 2px;
		 width:25%;
	}
	/* http://webaim.org/techniques/css/invisiblecontent/ */
	 #skipnav {
		 position:absolute;
		 left:-10000px;
		 top:auto;
		 width:1px;
		 height:1px;
		 overflow:hidden;
	}
	 .roof form {
		 position: relative;
		 left: 2em;
		 top: 0;
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
		 -moz-flex-flow: nowrap row;
		 -ms-flex-flow: nowrap row;
		 -webkit-flex-flow: nowrap row;
		 flex-flow: nowrap row;
		 -moz-align-items:stretch;
		 -ms-align-items:stretch;
		 -webkit-align-items:stretch;
		 align-items:stretch;
		 -moz-align-content:stretch;
		 -ms-align-content:stretch;
		 -webkit-align-content:stretch;
		 align-content:stretch;
		 -moz-justify-content: flex-start;
		 -ms-justify-content: flex-start;
		 -webkit-justify-content: flex-start;
		 justify-content: flex-start;
		 height: calc(100% - 1.6em);
		 padding: .8em 0;
		 max-width: 300px;
	}
	 .roof.invert form {
		 height: 100%;
		 padding: 0;
	}
	 .roof .menu-btn + form {
		 right: 3em 
	}
	 .search label {
		 height: 100%;
		/* for Safari */
		 width: 100%;
	}
	 .roof input[placeholder="Search"] {
		 background-color: #404040;
		 border: 1px solid rgb(128,128,128);
		 color: #fff;
		 height: 25px;
		 margin-top: 10px;
		 padding: 4px;
		 width: calc(100% - 38px);
		 -webkit-box-flex: 0 1 auto;
		 -moz-box-flex: 0 1 auto;
		 -webkit-flex: 0 1 auto;
		 -ms-flex: 0 1 auto;
		 flex: 0 1 auto;
		 box-shadow: 0 2px 4px #000;
	}
	 .roof input[placeholder="Search"]:focus {
		 outline: 0 none;
		 background-color: rgba(0,0,0,.5);
	}
	/* override webkit autocomplete ugly pastel yellow background color */
	 .roof input[placeholder="Search"]:-webkit-autofill {
		 -webkit-box-shadow: 0 0 0px 1000px #999 inset;
		 box-shadow: 0 0 0px 1000px #999 inset;
	}
	 .roof input::-webkit-input-placeholder {
		 color:#fff 
	}
	 .roof input:-moz-placeholder {
		 color:#fff;
		 opacity: 1 
	}
	 .roof input::-moz-placeholder {
		 color:#fff;
		 opacity: 1 
	}
	 .roof input:-ms-input-placeholder {
		 color:#fff 
	}
	 .search button {
		 background: url(../site-images/cmu/icon-magnify.png) scroll no-repeat transparent 50% 50%;
		 background-size: 50%;
		 height: calc(100% - 1.6em);
		 margin: .8em 0;
		 padding: 0 14px;
		 text-indent: -9999px;
		 width: auto;
		 display: none !important;
		/* not needed. was block*/
		 position: absolute;
		 right: 0;
		 top: 0;
		 border: 0 none;
		 background: green;
	}
	 .roof.invert .search button {
		 height: 100%;
		 margin: 0;
	}
	 .search button:focus, .search button:hover {
		 border: 0 none;
		 outline: 0 none;
	}
	/* hide hover state because clicking the menu button makes it focus. */
	 .search button:hover {
		 background-color: inherit 
	}
	 body:not(.mobile) #sitename {
		 display: block !important 
	}
	 #sitename div, #sitename a {
		 display: inline-block;
		 vertical-align: middle;
	}
	 #sitename, #sitename a {
		 box-sizing: border-box;
		 color: white;
		/* rgb(153,0,0);
		 */
		/* #222;
		 */
		/*font-size: 36px;
		 line-height: 36px;
		 */
		/* text-shadow: 1px 1px 9px rgb(255,255,255);
		 */
		 font-weight: 400;
		/* 200 */
		/*600*/
		 border: 0;
		 padding-top: 0;
		 padding-bottom: 0;
	}
	 #sitename {
		 padding-top: .5em;
		 padding-bottom: .5em;
		 text-shadow: 0 0 1px black;
	}
	 #sitename a:focus, #sitename a:hover {
		 color: #fff;
	}
	 #sitename > div {
		 padding-right: 2%;
		 width:66.666%;
	}
	 #sitename > a {
		 padding: .5em 0 0 0;
		 max-width: 31.333%;
		 width: 100%;
		 text-align: right;
	}
	 #sitename img {
		 max-height: 150px 
	}
	/* Should match #content .hero > div.text h1 & h2 */
	 #sitename h1, #sitename h2 {
		 font-size: 3.15em;
		 padding:.15em 0;
		 clear: none;
		 line-height: 1.25em;
	}
	 #sitename h2 {
		 font-size: 1.65em;
		 padding-top:0;
		 color: #FFF;
		 opacity: 85%;
	}
	 nav h1 {
		 font-size: 1.65em;
		 padding: 0;
	}
	/* Quick Links in Roof */
	 .roof .quicklinks {
		 display: block;
		 position: absolute;
		 top: 2em;
		 right: 4em;
		 font-size: 14px;
		 color: rgb(204, 204, 204) 
	}
	 .roof .quicklinks a {
		 color: white;
		 padding: .5em;
		 border-left: solid 1px #555;
	}
	 .roof .quicklinks a:first-of-type {
		 border-left: none 
	}
	 .roof .quicklinks a:hover {
		 text-decoration: underline 
	}
	 .menu-on .roof .quicklinks {
		 right: -0.5em 
	}
	/* move over because menu button has moved into the menu */
	/* ======================= Primary, Header Navigation (The Horizontal Navigation thing) =========================== */
	 header nav {
		 clear: both;
		 padding-top: 0;
		 padding-bottom: 0;
		 overflow: visible;
		 background: rgba(0,102,119,.5);
		 z-index: 100;
		 width: 100%;
		 margin-left: 0;
		 box-sizing: border-box;
		 box-shadow: 0 0 32px rgba(0,0,0,0.2);
	}
	 #sitename + nav {
		 padding-top: 0 
	}
	 header .ancestor, header .active {
		 border-bottom-color:transparent;
	}
	/* for sites w/o a sitename */
	 .roof + nav ul li a {
		 padding-top: 0;
	}
	 #greatest-hits, #greatest-hits li {
		 list-style: none;
		 margin: 0;
		 padding: 0;
		 
		 display: block;
		 text-indent: 0 !important;
	}
	#greatest-hits li {
	    padding-left: 2em;
	    border-top: solid 1px rgba(0,60,100,.5);
	}
	#greatest-hits li:first-of-type {
	    border-top: none !important;
	}
	 #greatest-hits li.menuparent a {  /* was label */
		 display: block;
		 box-sizing: border-box;
		/*background: #d00;
		*/
		 width: 100%;
		 /*height: 3em;
		 line-height: 3em; 7-31-18 */ line-height: 2em; padding-left:.5em; padding-right: .5em;
		 color: #FFF;
		 font-weight: 600;
		 cursor: pointer;
	}
	 #greatest-hits a {
		 color: #FFF !important;
	}
	 #greatest-hits ul.menuchild {
		 display:block;
		 box-sizing: border-box;
		 width: 100%;
		 max-height: 0px;
		 overflow: hidden;
		 transition: max-height .25s ease-in-out;
		 background: rgb(0,102,119);
		 box-shadow: inset 1px 6px 10px -6px rgba(0,0,0,.5), inset 0px -3px 10px -8px rgba(0,0,0,.5);
		 padding-left: 3em;
		 z-index: 100;
		 position: relative;
		 font-weight: 600;
	}
	 ul.menuchild li {
		 line-height: 3em !important;
	}
	 #greatest-hits a:hover {
		 text-decoration: underline;
	}
	 #greatest-hits .menuparent>a {
		 display: none;
	}
	 #greatest-hits input[type=checkbox]:checked ~ .menuchild {
		 max-height: 300px;
	}
	 #greatest-hits .topnav-open::before {
		/* the triangle */
		 content: ' ';
		 display: inline-block;
		 border-top: 5px solid transparent;
		 border-bottom: 5px solid transparent;
		 border-left: 5px solid currentColor;
		 vertical-align: middle;
		 margin-right: .7rem;
		 margin-left: 1rem;
		 transform: translateY(-2px);
		 transition: transform .2s ease-out;
	}
	 #greatest-hits input[type=checkbox]:checked + .topnav-open::before {
		 transform: rotate(90deg) translateX(-3px);
	}
	/* desktop top nav style */
	@media only screen and (min-width: 768px) {
		 #greatest-hits {
			 /* height: 3em; 7-30-18 */
			 display: flex;
            flex-direction: row;
            flex-flow: row nowrap;
            flex-wrap: nowrap;
		}
		 #greatest-hits li {
		     border-top: none;
		 }
		 #greatest-hits li.menuparent label {
			 display: none;
		}
		 #greatest-hits input[type=checkbox] {
			 display: none;
		}
		 #greatest-hits input[type=checkbox]:checked ~ .menuchild {
			 max-height: 0px;
		}
		 #greatest-hits .menuparent {
		     display: flex;
            flex-basis: auto;
            flex-grow: 1;
            flex-shrink: 1;
			 /*float: left;
			 position: relative;
			 box-sizing: border-box;
			 width: 20%; */
			 /*height: 3em;
			 line-height: 3em; 7-31-18 */ padding-top: .5em; padding-bottom: .5em;
			 font-weight: 700;
			 text-align: center;
			 padding-left: 0;
		}
		 #greatest-hits .menuparent a {
			 display: block;
		}
		 #greatest-hits ul.menuchild {
			 box-shadow: 0px -3px 10px -8px rgba(0,0,0,.5);
			 padding-left: 0;
			 box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
			 transition: max-height .25s ease-in-out;
			 background: rgb(153,0,0);
		}
		 #greatest-hits .menuparent:hover .menuchild {
			 position: absolute;
			 max-height: 600px !important;
		}
		 #greatest-hits .menuchild li:first-of-type {
			 display: none;
		}
	}
	 @media only screen and (max-width: 767px) {
		 header nav {
			 padding: 0 !important;
		}
		#greatest-hits li.menuparent a {
		    line-height: 3em; /* 7-31-18 */
		}
	}
	/* ====================================== Side Navigation ========================================= */
	 .menu-btn {
		 color: #555;
		 display: block;
		 font-size: 2.5em;
		 line-height: .85em;
		 float: right;
		 right: 0;
		 top: 0;
		 margin-top: 13px;
		 display: block;
		 position: absolute;
		 z-index: 102;
		/* transition: right linear 0.2s;
		 stop making me dizzy! */
	}
	 div.invert .menu-btn {
		 margin-top:12px 
	}
	/* the inverted roof's menu-btn */
	 .menu-on .menu-btn {
		/* the "X" */
		 color: #ddd;
		 right: 11px;
		 margin-top: 13px !important;
		/* OVERRULED so it's always is the same place when opened, even with the changed mobile roof layout. */
		 position: fixed;
		 font-size: 2em;
	}
	 nav.tree form, 
	/* the mobile menu search box */
	 nav.tree .menu-btn {
		/* the mobile "X" */
		/* display: none;
		 keep this */
	}
	 .menu-btn:visited, .menu-btn:focus, .menu-btn:hover {
		 color: inherit;
	}
	 .menu-on .menu-btn:focus, .menu-on .menu-btn:hover {
		 color: #fff;
	}
	 .menu-on .roof form {
		 display: none;
		/* hide this when menu open */
		 right: 0;
	}
	 .menu-btn b {
		 display: block;
		 font-weight: normal;
		 line-height: 7px;
	}
	 .invert .menu-btn, .invert .menu-btn:focus, .invert .menu-btn:hover {
		 color:#fff !important;
		 text-shadow: none !important;
	}
	 #container {
		 position: relative;
		/* transition: width 0.3s ease;
		 stop making me dizzy! */
		 width: 100%;
		 z-index: 100;
	}
	 #overlay {
		 position: fixed;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100vh;
		 background-color: transparent;
		 z-index: 99;
		 transition: background-color ease 0.3s;
	}
	 .menu-on #container {
		 width: calc(100% - 300px);
		 z-index: 101;
	}
	 .menu-on footer {
		 border-right:1px solid rgba(255,255,255,.15) 
	}
	/* This controls the Navigation Side Bar */
	 nav.tree {
		 position: fixed;
		 top: 0;
		 z-index: 101;
		/* I'm on top of the world! */
		 right: -300px;
		 width: 300px;
		 height: 100vh;
		 background-color: rgb(51,51,51) !important;
		 overflow: hidden;
		 box-sizing: border-box;
		 opacity: 0;
		 padding-top: 3.25em;
		/* transition: right 0.2s ease;
		 stop making me dizzy! */
		/* for touch */
		 box-shadow: -2px 0px 15px rgba(0,0,0,0.4);
	}
	/* Added this search box... */
	 nav input {
		 background: #404040;
		 border: 1px solid rgb(128,128,128);
		 color: #fff;
		 height: 25px;
		 margin: 0px !important;
		 margin-top: 5px !important;
		 margin-left: 1em !important;
		 margin-right: 5em !important;
		 padding: 4px;
		 width: calc(75%);
		 -webkit-box-flex: 0 1 auto;
		 -moz-box-flex: 0 1 auto;
		 -webkit-flex: 0 1 auto;
		 -ms-flex: 0 1 auto;
		 flex: 0 1 auto;
		 box-shadow: 0 2px 4px #000;
		 font-size: .8em !important;
		 position: absolute;
		 top: .5em;
	}
	 nav input:focus {
		 background: #000;
	}
	 .menu-on > nav.tree {
		 right: 0;
		 opacity: 1;
	}
	 nav.tree h1 {
		 padding: 0 1em .35em 
	}
	 nav.tree li.active:not(.ancestor):not(.arrow) > a, nav.tree li > a:hover:not(.arrow), nav.tree li > a:focus:not(.arrow), .no-js footer nav li.active > a, .no-js footer nav li > a:hover, .no-js footer nav li > a:focus {
		 background-color: #666;
	}
	 nav div > ul > .ancestor, nav div > ul > .active.parent {
		 background-color:rgba(255,255,255,.1);
	}
	 nav a {
		 border: none !important;
		 display: block;
		 transition: background-color 0.1s ease;
	}
	 .nav nav li ul {
		 display: none 
	}
	 .no-js .nav nav li ul {
		 display: block 
	}
	 .nav nav li li a, footer nav li a, nav.tree li a {
		 padding: .5em 2em;
		 padding-bottom: .5em !important;
		 line-height: 1.5em;
	}
	 footer nav li a {
		 margin-left: -1em 
	}
	 .nav nav li li li a, footer nav li li a, nav.tree li li a {
		 padding-left: 3em 
	}
	 .nav nav li li li a, footer nav li li li a, nav.tree li li li a {
		 padding-left: 4.5em 
	}
	 .nav nav li li li li a, footer nav li li li li a, nav.tree li li li li a {
		 padding-left: 6em 
	}
	 .nav nav li li li li li a, footer nav li li li li li a, nav.tree li li li li li a {
		 padding-left: 7.5em 
	}
	 .nav nav li li li li li li a, footer nav li li li li li li a, nav.tree li li li li li li a {
		 padding-left: 9em 
	}
	 footer nav li li li li li li li a, nav.tree li li li li li li li a {
		 padding-left: 10.5em 
	}
	 nav.tree li a {
		 padding-right: 220px 
	}
	 nav.tree div > ul > li > a:not(.arrow), footer nav > ul > li > a {
		 font-weight: 700;
	}
	 nav.tree li:not(.ancestor):not(.active) > ul {
		 display: none;
	}
	 nav.tree div {
		 position: relative;
		 overflow: hidden;
	}
	 nav.tree div > ul {
		 border-top: 1px solid rgba(255,255,255,.15);
		 font-size: 85%;
		 width: 500px;
		 overflow: auto;
		 position: relative;
	}
	 nav.tree ul {
		 display: block;
	}
	 nav.tree div > ul > li:last-child {
		 margin-bottom: 2em 
	}
	 nav.tree ul li, nav.tree ul li ul li {
		 padding: 0;
		 margin-left: 0;
		/*unlike regular content li's */
	}
	 .grid.nav nav h1 {
		 font-size: 100%;
		 text-transform: none;
	}
	 nav.tree div > ul > li:not(.secondary) > a {
		 letter-spacing: .05em 
	}
	 nav.tree div > ul > li, nav.tree div > ul > li.active {
		 border-bottom: 1px solid rgba(255,255,255,.15);
	}
	 nav.tree div > ul > li.secondary {
		 border:none;
		 transition: padding-top 0.3s ease;
	}
	 nav.tree div > ul > li.secondary > a:not(.arrow) {
		 font-weight:normal 
	}
	/* li:not(.secondary) + li.secondary {
		 padding-top: .65em 
	}
	 li.expand:not(.secondary) + li.secondary {
		 padding-top: 1em 
	}
	 */
	 nav a {
		 -webkit-tap-highlight-color: transparent 
	}
	 nav.tree li.parent {
		 overflow: hidden;
		 position: relative;
	}
	 nav.tree a.arrow {
		 font-size: 200%;
		 padding: 0;
		 position: absolute;
		 top: 0;
		 left: 260px;
		 display: block;
		 background-color: transparent !important;
		 transition: color 0.3s ease, transform 0.2s ease;
		 width: 40px;
		 height: 40px;
		 box-sizing: border-box;
	}
	 nav.tree a.arrow:after {
		 content:'\203a';
		 display:block;
		 text-indent: 0;
		 line-height: 0;
		 position: absolute;
		 left: 20px;
		 top: 14px;
		 transition: left 0.2s ease;
	}
	 nav.tree .expand > a.arrow {
		 transform: rotate(90deg) 
	}
	 nav.tree .expand > a.arrow:after {
		 left:13px 
	}
	 nav.tree .scrolldown {
		 transition: opacity 0.3s ease;
		 opacity: 0;
		 color: #555 !important;
	}
	 nav.tree .scrolldown:hover, nav.tree .scrolldown:focus {
		 background-color: #fff;
		 color: #555 !important;
		 text-shadow: none;
	}
	 nav.tree div.top .scrolldown.up, nav.tree div.bottom .scrolldown {
		 opacity: 0;
		 z-index: 0;
	}
	 nav.tree div.top .scrolldown, nav.tree div.middle .scrolldown, nav.tree div.bottom .scrolldown.up {
		 opacity: 1;
		 z-index: 1;
	}
	 .scrolldown.up {
		 transform: rotate(180deg) 
	}
	/* ================ Main page #content ================== */
	 .breadcrumbs {
		 font-size: 90%;
		/* was 80 */
		 letter-spacing: .025em;
		 color: #9FF;
		/* d66 */
		 text-shadow: 0 0 1px black;
	}
	 .breadcrumbs a, .breadcrumbs a:visited {
		 color: #BFF;
		/* f99 */
	}
	 .breadcrumbs a:hover {
		 color: white;
		 text-decoration: underline;
	}
	 .breadcrumbs + div.boxes:not(.grey):not(.darkgrey):not(.red):not(.gold):not(.teal):not(.blue):not(.green):not(.darkgreen), .breadcrumbs + div:not(.grey) {
		 padding-top: 0;
	}
	 #content > div, form, table {
		 line-height: 1.65em 
	}
	 #content > div.content:first-child, #content > div.grid:first-child:not(.invert) {
		 padding-top:3em 
	}
	 header.float + #content {
		 height: 100vh 
	}
	/* ======================== Rules for Hero Height Fullscreen - height: 100vh Float - height: 75vh - min-height: 500px Non-float (always 2:1) - height: 50vw Non-float Mobile - min-height: 400px ======================== */
	 #content .hero, #content > .js-flickityCustom:first-child {
		 background-color: #000;
		 background-position: center center;
		 background-repeat: no-repeat;
		 background-size: cover;
		 height: 49.5vw;
		/* .5 is to compensate for scroll bar */
		 overflow: hidden;
		 position: relative;
		 z-index: 1;
	}
	 header.float + #content .hero, header.float + #content > .js-flickityCustom:first-child {
		 background-position: center 0;
		 height: 75vh;
		 min-height: 500px;
	}
	 .tall .flickity-viewport, header.float + #content .tall .hero, header.float + #content > .js-flickityCustom.tall:first-child, header.float + #content .tall {
		 height: 100vh;
		 max-height: 1500px;
	}
	 .scrolldown {
		 position: absolute;
		 left: calc(50% - 25px);
		 bottom: 0;
		 background-color: rgba(255,255,255,.75);
		 z-index: 20;
		 padding: 0 10px 5px;
		 font-size: 250%;
		 color: #858585;
		 border: 0 none;
	}
	 .scrolldown:hover, .scrolldown:focus {
		 color:#333;
		 background-color: #fff;
	}
	 .scrolldown.up {
		 bottom: auto;
		 top: 0;
	}
	 nav .scrolldown {
		 font-size: 200%;
		 padding: 0 .25em .15em;
		 transform-origin: center;
	}
	 #content .hero .text {
		 bottom: 0;
		 box-sizing: border-box;
		 color: #fff;
		 position: absolute;
		 text-align: center;
		 text-shadow: 0 0 1em #000;
		 width: 100%;
		 z-index: 10;
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
		 -moz-flex-flow: wrap row;
		 -ms-flex-flow: wrap row;
		 -webkit-flex-flow: wrap row;
		 flex-flow: wrap row;
		/* For IE 10? https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx http://stackoverflow.com/questions/18711282/ie10-and-flexboxes-nightmare */
		 -moz-align-items:center;
		 -ms-align-items:center;
		 -ms-flex-align: center;
		 -webkit-align-items:center;
		 align-items:center;
		 -moz-align-content:center;
		 -ms-align-content:center;
		 -ms-flex-pack:center;
		 -webkit-align-content:center;
		 align-content:center;
	}
	 header.float + #content .hero .text {
		 bottom: 8% 
	}
	 header:not(.float) + #content .hero > div.text {
		 height: 100% 
	}
	/* Trick to tame Tubular YouTube iframe inspired by ... https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/ */
	 #content .hero iframe {
		 max-width: none;
		 position: absolute;
		 width: 100%;
		 height: 100%;
		 left: calc((100% - 100vw) * -.5) !important;
		/* 100% of container - 100% of viewport * -.5 = centered */
	}
	 #tubular-container {
		 opacity: 1;
		 overflow: hidden;
		 z-index: 1;
		 position: relative;
		 top: 0;
		 height: 75vh;
		 min-height: calc(100vw * .5625);
		/* ensure 16:9 */
		 width: calc(75vh * 1.78);
		/* 1.78? ... don't ask why;
		 it just works! */
		 min-width: 100vw;
	}
	 .tall #tubular-container {
		 height: 100vh;
		 width: calc(100vh * 1.78);
	}
	 #tubular-shield {
		 width: 100%;
		 height: 100%;
		 z-index: 2;
		 position: absolute;
		 left: 0;
		 top: 0;
	}
	 #content .hero > div.text h1, #content .hero > div.text h2 {
		 -webkit-box-flex: 0 0 100%;
		 -moz-box-flex: 0 0 100%;
		 -webkit-flex: 0 0 100%;
		 -ms-flex: 0 0 100%;
		 flex: 0 0 100%;
		 padding: 0;
	}
	/* Should match #sitename h1 & h2 */
	 #content .hero > div.text h1 {
		 font-size: 3.15em 
	}
	 #content .hero > div.text h2 {
		 font-size: 1.65em 
	}
	 #content .hero .box {
		 background-color: rgba(255,255,255,.9);
		 bottom: 3.5em;
		 color: #555;
		 padding: .65em 1em;
		 position: absolute;
		 border-bottom-color: transparent;
		 width: calc(41% - 2em);
		 z-index: 10;
	}
	 #content .hero .small {
		 width:calc(33.333% - 2em) 
	}
	 #content .hero .large {
		 width:calc(66.666% - 2em) 
	}
	 #content .tall .box {
		 bottom: 20% 
	}
	 #content .hero .box.right {
		 right: 9% 
	}
	 #content .hero .box.left {
		 left: 9% 
	}
	 .menu-on #content .hero .box.right {
		 right: 2% 
	}
	 .menu-on #content .hero .box.left {
		 left: 2% 
	}
	 #content .hero .box h1 {
		 line-height: 1.25em;
		 margin: 0;
		 padding: 0;
		 border-bottom-color: transparent;
	}
	 #content .hero .box p {
		 padding: .65em 0 0;
		 margin: 0;
	}
	 #content .hero a.box:hover, #content .hero a.box:focus {
		 background-color: #fff;
	}
	 #content .hero a.box:hover h1, #content .hero a.box:focus h1 {
		 color: #c00;
	}
	 .hero .caption, #content .hero caption {
		 background-color: rgba(255,255,255,.9);
		 bottom: 8%;
		 display: block;
		 font-size: 80%;
		 left: 0;
		 padding: .5em 1em .35em 9%;
		 position: absolute;
		 font-style: italic;
		 z-index: 50;
		 width: 50%;
		 box-sizing: border-box;
	}
	/* ================== Grid Areas ===================== */
	 .grid {
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
		 -moz-flex-flow: wrap row;
		 -ms-flex-flow: wrap row;
		 -webkit-flex-flow: wrap row;
		 flex-flow: wrap row;
		 -moz-align-items:stretch;
		 -ms-align-items:stretch;
		 -webkit-align-items:stretch;
		 align-items:stretch;
		 -moz-align-content:stretch;
		 -ms-align-content:stretch;
		 -webkit-align-content:stretch;
		 align-content:stretch;
	}
	 .grid > h1 {
		 -webkit-box-flex: 0 0 100%;
		 -moz-box-flex: 0 0 100%;
		 -webkit-flex: 0 0 100%;
		 -ms-flex: 0 0 100%;
		 flex: 0 0 100%;
		 line-height: 1.15em;
	}
	 .grid > div {
		 display: inline-block;
		 overflow: hidden;
		 padding-top: 1.5em;
		 padding-bottom: 1.5em;
		 padding-right: 3%;
		 position: relative;
		 vertical-align: top;
	}
	 .column2 > div {
		 width:48% 
	}
	 .column2 > div:nth-of-type(2n-1) {
		 padding-right: 4% 
	}
	 .column3 > div {
		 width: 31.333% 
	}
	 .column4 > div {
		 width: 22.75% 
	}
	/* Photo Grid */
	 div.photo {
		 background-color: #000;
		 margin: 1.5em 0;
		 padding:0 !important;
		 /*height: 100%;*/
		 min-height: 100px;
		 overflow: hidden;
	}
	 .column2 div.photo {
		 margin-right: 4% 
	}
	 .column3 div.photo, .column4 div.photo {
		 margin-right: 3% 
	}
	 .photos div.photo {
		 margin: 0 
	}
	 .column2.photos div.photo {
		 -webkit-box-flex: 0 1 50%;
		 -moz-box-flex: 0 1 50%;
		 -webkit-flex: 0 1 50%;
		 -ms-flex: 0 1 50%;
		 flex: 0 1 50%;
	}
	 .column3.photos div.photo {
		 -webkit-box-flex: 0 1 33.333%;
		 -moz-box-flex: 0 1 33.333%;
		 -webkit-flex: 0 1 33.333%;
		 -ms-flex: 0 1 33.333%;
		 flex: 0 1 33.333%;
	}
	 .column4.photos div.photo {
		 -webkit-box-flex: 0 1 25%;
		 -moz-box-flex: 0 1 25%;
		 -webkit-flex: 0 1 25%;
		 -ms-flex: 0 1 25%;
		 flex: 0 1 25%;
	}
	 .grid > div.photo div, .grid.photos > div div {
		 background: linear-gradient(transparent, rgba(0,0,0,.65), #000);
		 bottom: 0;
		 color: #fff;
		 padding: 3em 1.5em 1.15em;
		 position: absolute;
		 width: calc(100% - 3em + 1px);
		/* add extra pixel for bug in Safari */
		 z-index:1;
	}
	 .photo a, .invert .photo a, .photo a:focus, .photo a:hover {
		 border-color: transparent;
		 border: 0 none !important;
		 color: #fff;
	}
	 .grid > div.photo > a:hover h2, .grid > div.photo > a:focus h2 {
		 color: #fff;
	}
	 .grid > div.photo > a:hover span, .grid > div.photo > a:focus span {
		 opacity: .5;
		 z-index:0;
		 position:relative;
	}
	 .grid > div.photo div h2, .grid > div.photo div p {
		 line-height: 1.35em;
		 padding: 0;
		 border: 0 none;
		 z-index:1;
		 position:relative;
		 color: #FFF !important;
		/* override the red headers everywhere else */
	}
	 .grid > div.photo > div {
		 padding: 1.5em 
	}
	 .grid div.photo img {
		 max-width: 100%;
		 width: 100%;
	}
	/* this is how columns work */
	 .column2 > div:nth-of-type(2n), .column3 > div:nth-of-type(3n), .column4 > div:nth-of-type(4n) {
		 margin-right: 0;
		 padding-right:0;
	}
	
/* = = = = Special Dean's Homepage Grid overrides = = = = */
    .homepage .grid > div.photo {
        box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
    }

	 .homepage .grid > div.photo div, .homepage .grid.photos > div div {
		 background: rgba(255,255,255,.9);
		 bottom: 0;
         top: 0;
		 padding: 2em 0em 2em;
		 position: absolute;
		 width: 100%;
         height: 3em;
         margin-top: auto;
         margin-bottom: auto;
		 z-index:1;
	}
    .homepage .grid > div.photo div h2 {
		color: #b00 !important;
        text-align: center;
        font-size: 2.1em;
	}
	 .homepage .grid > div.photo div p {
		color: #000 !important;
        text-align: center;
	}

    .homepage #nav-block > :not(.photo) {
        background-color: #52646F;
        margin: 1.25em 0;    /* 1.5em 0 */
        padding: 1.667em !important; /* 2em */
        box-sizing: border-box;
        overflow: hidden;   
        box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
        color: #FFF !important;
        font-size: 120%;
    }
    .homepage #nav-block > :not(.photo) > h1, .homepage #nav-block > :not(.photo) > h2, .homepage #nav-block > :not(.photo) > h3, .homepage #nav-block > :not(.photo) > a {
        color: #FFF !important;
    }

	/* ========= Events ========= */
	 .events ul {
		 list-style: none;
		 padding: 0;
		 margin: 0;
	}
	 .events li {
		 position: relative;
		 padding: 0;
		 text-indent: 0;
		/* override the base style */
	}
	 .events ul li a, .events ul li i {
		 display: block;
		 font-weight: 400;
		 margin-bottom: 1em;
		 min-height: 4.15em;
		 text-transform: none;
		 width: auto;
		 border-bottom-color: transparent;
		 padding: 0 .25em .25em 85px;
		 font-style: normal;
	}
	 .events ul li a:hover, .events ul li a:focus {
		 background-color: rgba(0,0,0,.1);
	}
	 .invert .events ul li a:hover, .invert .events ul li a:focus {
		 background-color: rgba(0,0,0,.5);
	}
	 .events ul li a:after {
		 display: none 
	}
	 .events ul li a > span, .events ul li i > span {
		 left: 0;
		 position: absolute;
		 top: .5em;
		 text-shadow:none;
	}
	 .events ul li a:hover > span, .events ul li a:focus > span {
		 left: .5em;
		 box-shadow: 0 0 5px rgba(0,0,0,.2);
	}
	 .events li span {
		 background-color: rgba(255,255,255,.9);
		 border: 1px solid rgba(0,0,0,.2);
		 color: #c00;
		 display: block;
		 font-size: 90%;
		 padding: 0 0 .5em;
		 line-height: 1em;
		 text-align: center;
		 width: 70px;
	}
	 .invert .events li span {
		 border: none 
	}
	 .events li span span {
		 background-color: #ccc;
		 border:0 none;
		 color: #555;
		 font-size: inherit;
		 margin-bottom: .5em;
		 padding-top: .5em;
		 width: 100%;
	}
	/* Boxes: Fixed-height Grids */
	 .boxes {
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
		 -moz-flex-flow: wrap row;
		 -ms-flex-flow: wrap row;
		 -webkit-flex-flow: wrap row;
		 flex-flow: wrap row;
		 -moz-align-items:stretch;
		 -ms-align-items:stretch;
		 -webkit-align-items:stretch;
		 align-items:stretch;
		 -moz-align-content:stretch;
		 -ms-align-content:stretch;
		 -webkit-align-content:stretch;
		 align-content:stretch;
		 -moz-justify-content: flex-start;
		 -ms-justify-content: flex-start;
		 -webkit-justify-content: flex-start;
		 justify-content: flex-start;
		 padding-bottom: 0;
	}
	 .boxes > div {
		 background-color: #fff;
		 border: 1px solid rgba(0,0,0,.2);
		 box-sizing: border-box;
		 margin: 0 2% 2em 0;
		 padding: 1vw !important;
		 font-size:90%;
		 -webkit-box-flex: 0 0 auto;
		 -moz-box-flex: 0 0 auto;
		 -webkit-flex: 0 0 auto;
		 -ms-flex: 0 0 auto;
		 flex: 0 0 auto;
	}
	 .column2.boxes > div {
		 width:49% 
	}
	 .column4.boxes > div {
		 width:23.5% 
	}
	 .column2.boxes > div:nth-of-type(2n), .column3.boxes > div:nth-of-type(3n), .column4.boxes > div:nth-of-type(4n) {
		 margin-right:0 
	}
	 .column3.boxes > div {
		 margin-right:0;
		 width: 32%;
	}
	 .column3.boxes > div:nth-of-type(3n-1) {
		 margin-left:2%;
		 margin-right:2%;
	}
	 .boxes > div:last-child {
		 margin-right: 0 
	}
	/* Footer Nav */
	 .grid.nav {
		 font-size: 100% 
	}
	 .grid.nav > div {
		 padding-top:0;
		 padding-bottom:0;
	}
	 .grid.nav nav h1 {
		 font-size: 1em;
		 font-weight: 700;
		 letter-spacing: 1px;
		 padding-top: .2em;
		 padding-bottom: .8em;
		 text-transform: uppercase;
	}
	 .grid.nav nav ul li:first-child {
		 padding-top:0 
	}
	 .grid.nav nav ul li:last-child {
		 padding-bottom: 0;
		 margin-bottom: 1px;
	}
	 .grid.nav nav ul li a {
		 border-bottom-color: transparent 
	}
	 .grid.nav nav ul li a:hover, .grid.nav nav ul li a:focus {
		 border-bottom: 1px solid 
	}
	/* Grid & Sidebar Lists */
	 .content .sidebar .list {
		 padding-bottom: .5em;
	}
	 .content .sidebar div:not(.simple):not(.left-rule) {
		 box-shadow: 0 2px 4px rgba(0,0,0,0.4);
	}
	 .list ul {
		 list-style: none;
		 text-indent: 0;
		 padding: 0;
		 margin: 0;
	}
	 .list li {
		 border-top: 1px solid rgba(0,0,0,.2);
		 padding: 0;
		 position: relative;
		 margin: 0;
		 text-indent: 0;
	}
	 .sidebar .list > ul:first-child > li:first-child {
		 border:0;
		 margin-top: -1em;
	}
	 .invert.list li, .invert .list li {
		 border-top: 1px solid rgba(255,255,255,.5);
	}
	 .grid .list ul:last-child {
		 border-bottom: 1px solid rgba(0,0,0,.2) 
	}
	 .invert .list ul:last-child {
		 border-bottom: 1px solid rgba(255,255,255,.5) 
	}
	 .list li a, .list li a:visited {
		 border-bottom: 0 none;
		 color: rgba(0,0,0,.6);
		 display: block;
		 letter-spacing: .025em;
		 line-height: 1.35em;
		 margin: 0;
		 padding: 1.5em 0 !important;
		 width: 92%;
	}
	 .list li a:after {
		 content: " \25BA";
		 font-size: .65em;
		 position: absolute;
		 right: 0;
		 top: 39%;
	}
	 .list li a:focus:after, .list li a:hover:after, .list li a:focus, .list li a:hover {
		 border-bottom: 0 none;
		 color: #c00;
	}
	 .invert .list li a, .invert.list li a {
		 color: rgba(255,255,255,.85);
		 border-bottom:0 none;
	}
	 .invert .list li a:focus:after, .invert .list li a:hover:after, .invert .list li a:focus, .invert .list li a:hover, .invert.list li a:focus:after, .invert.list li a:hover:after, .invert.list li a:focus, .invert.list li a:hover {
		 color: #fff;
		 border-bottom:0 none;
	}
	/* Lists on the landing page items */
	 .landing .list {
		 margin-top: 5px;
	}
	 .landing .list li {
		 border-top: 0 none;
		 padding: 0;
		 position: relative;
		 margin: 0;
		 line-height: 1em !important;
	}
	 .landing .list ul:last-child {
		 border-bottom: 0 none;
	}
	 .landing .list li a, .landing .list li a:visited {
		 border-bottom: 0 none;
		 color: rgba(0,0,0,.6);
		 display: block;
		 letter-spacing: .025em;
		 line-height: 1em;
		 margin: 0;
		 padding: .5em 0 !important;
		 width: 92%;
		 text-decoration: underline;
	}
	 .landing .list li a:after {
		 content: " \25BA";
		 font-size: .65em;
		 position: static;
		 top: 39%;
		 margin-left: 1em;
		 display: inline-block;
		 text-decoration: none important;
	}
	 .landing .list li a:hover {
		 color: #c00 
	}
	
	/* "Get Help" list in wide areas */
    .gethelpwide ul {
	    width: 100%;
	    text-align: left;
	    margin-left: 1%;	
    }
    .gethelpwide ul li {
    	width: 30%;
	    display: inline-block;
    	margin-right: 1%;
	    margin-left: 1%;
    	vertical-align: text-top;
    }
    .gethelpwide.list li a, .gethelpwide.list li a:visited {padding: 1.1em 0 !important;}
    @media only screen and (max-width : 768px) {
	    .gethelpwide ul li {
		    width: 100%;
    		display: block;
	    	margin-left: 0;
    	}
    }
	
	/* News Grid! */
	 .news > div {
		 -webkit-box-flex: 0 0 auto;
		 -moz-box-flex: 0 0 auto;
		 -webkit-flex: 0 0 auto;
		 -ms-flex: 0 0 auto;
		 flex: 0 0 auto;
		 display: -webkit-box;
		 display: -moz-box;
		 display: -ms-flexbox;
		 display: -webkit-flex;
		 display: flex;
	}
	 .news > h1 {
		 padding-bottom:0;
		 z-index: 2;
	}
	 .news div.img {
		 background: scroll center center no-repeat #bbb;
		 background-size: cover;
		/* text-indent: -9999px;
		/* WHY was this -9999??????? */
		 width: 100%;
		 transition: filter 0.25s;
	}
	 .news.column2 div.img {
		 height: 300px 
	}
	 .news.column3 div.img {
		 height: 225px 
	}
	 .news.column4 div.img {
		 height: 150px 
	}
	 .news div a {
		 display: block;
		 border: 0 !important;
		 padding-bottom: 0 !important;
		 width: 100%;
	}
	 .news div a small, .news div a span {
		 color: #555;
		 line-height: 1.65em;
	}
	 .news div a small {
		 padding-top: .5em 
	}
	 .news:not(.boxes) a span {
		 padding-bottom: .65em 
	}
	 .news div a:hover, .news div a:focus {
		 border-color: transparent;
	}
	 .news div a:hover div.img, .news div a:focus div.img {
		/* News hover effect */
		/* opacity: .65;
		 */
		 filter: brightness(120%);
		 opacity: .95;
	}
}
 .news div a > :not(div) {
	 display: block 
}
 .news div a h2 {
	 padding: .5em 0 
}
 .news.globe a, .news.plaid a, .news.grey a, .news.darkgrey a, .news.red a, .news.gold a, .news.teal a, .news.blue a, .news.green a, .news.darkgreen a {
	 background-color: #fff;
}
 .news.globe:not(.boxes) a > :not(div), .news.plaid:not(.boxes) a > :not(div), .news.grey:not(.boxes) a > :not(div), .news.darkgrey:not(.boxes) a > :not(div), .news.red:not(.boxes) a > :not(div), .news.gold:not(.boxes) a > :not(div), .news.teal:not(.boxes) a > :not(div), .news.blue:not(.boxes) a > :not(div), .news.green:not(.boxes) a > :not(div), .news.darkgreen:not(.boxes) a > :not(div) {
	 padding-left: 4%;
	 padding-right: 4%;
}
	/* SCS news plain list */
	 .news-list>h2 {
		 padding-bottom: 0.5em;
	}
	 .news-list .newsdate {
		 color: #888;
		 font-style: oblique;
		 padding-left: 0.5em;
	}
	/* homepage specific */
	.homepage #news {
		 padding: 0px !important;
		 display: block;
		 width: calc(100% + 1.5em);
		 padding-right: 3%;
	}
	 .homepage .news > div {
		 width: 50% !important;
		 overflow: visible;
		 padding-bottom: 1.5em;
		 padding-right: 1.5em;
		 position: relative;
		 vertical-align: top;
		 display: inline-block;
		 box-sizing: border-box;
	}
	 .news > div > a {
		 box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	}
	 .homepage .news div.img {
		/*height: calc(20vw + 80px);
		 max-height: 300px;
		 */
		 height: 300px;
		 position: relative;
	}
	 .homepage .news > div:first-of-type {
		 width: 100% !important;
		 padding-top: 0;
	}
	 .homepage .news > div:nth-of-type(2n) {
		 padding-right: 1.5em;
		/* this is opposite how normal grids work... */
	}
	 .newstextwrapper {
		 position: absolute;
		 bottom: 0px;
		 background: rgba(0,0,0,.5);
		 z-index: 50;
		 width: 100%;
		 padding: .5em;
		 padding-top: 0;
		 box-sizing: border-box;
	}
	 .newstextwrapper * {
		 position: relative;
		 color: white !important;
		 margin-top: 0;
	}
	 .newstextwrapper h2 {
		 font-size: 22px !important;
		 font-weight: 700 !important;
		 -webkit-font-smoothing: antialiased;
		 -moz-font-smoothing: grayscale;
		 -moz-osx-font-smoothing: grayscale;
	}
	 .newstextwrapper span {
		 font-size: 13px !important;
		 font-weight: 400 !important;
		 -webkit-font-smoothing: antialiased;
		 -moz-font-smoothing: grayscale;
		 -moz-osx-font-smoothing: grayscale;
	}

 .homeside-top {
	 display: block;
	 float: right;
	 width: 300px;
	 padding-bottom: 2em;
}
 .homeside-bottom {
	 float: right;
	 width: 300px;
	 box-sizing: border-box;
	 position: absolute;
	 top: calc(3em + 26.5em);
	/* This has to change to match the height of the .homeside-top sidebar */
	 right: 9%;
	/* This has to change to match the responsive padding-right of the .content class - GUTTER */
}


 .tag {
	 display: inline-block;
	 height: 2em;
	 border-radius: 1em;
	 color: white;
	 padding: .4em;
	 padding-left: .7em;
	 padding-right: .7em;
	 font-size: 80%;
	 vertical-align: bottom;
	 box-sizing: border-box;
	 font-style: normal;
	 min-width: 4em;
	 text-align: center;
	 line-height: 1.25em;
	 margin-left: .5em;
	 text-indent: 0 !important;
	 margin-bottom: .25em;
}
.tag>a {color:white !important;text-decoration: underline;border-bottom: none}
 .dashboard-item {
	 display: block !important;
	 background: rgb(224,224,224);
	 box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	 padding: .5em !important;
	 margin-bottom: 1.5em !important;
}
/* ================== Content Areas ===================== */
 .content {
	/* Added this entirely. See next two comments. */
	 display: table;
	 box-sizing: border-box;
	 position: relative;
	 width: 100%;
}
 .content > div.content-body {
	 display: table-cell;
	/*inline-block */
	 vertical-align: top;
}
 .content > div:first-child {
	/* width: 60%;
	/* Why was this 60%, even when there are no sidebars??? Fixed with display: table */
}
 .content .sidebar {
	 padding-left: 5%;
	 width: 30%;
	 display: table-cell;
	 vertical-align: top;
}
 .content .sidebar div {
	 font-size: 90%;
	 margin-top: 2em;
	 padding: 1.5em;
	 width: auto;
}
 .content .sidebar div:after {
	/* to prevent float issues */
	 content:"";
	 display:block;
	 clear:both;
}
 .content .sidebar div.simple {
	 margin-top: 3em;
	 padding: 0 0 1.5em 0;
}
 .content .sidebar div:first-child {
	 margin-top: 0 
}
 .content .sidebar div.left-rule {
	 border-left: 1px solid rgba(0,0,0,.2);
	 padding: 0 0 0 1.5em;
}
 div.content:not(:first-of-type) {
	/* fix scroll position of content div's with anchor links. */
	 margin-top: -40px;
	 padding-top: calc(40px + 2em);
	/* maintain the 2em padding normally */
}
 .collapsed {
	 clear: both;
	 z-index: 1;
}
 .collapsed a:before {
	 color: #c00;
	 content: "\203a";
	 display: block;
	 float: left;
	 font-size: 135%;
	 margin-right: .35em;
	 margin-top: -2px;
	 transform: rotate(0);
	 transform-origin: 60% 60%;
}
 .collapsed.open a:before {
	 transform: rotate(90deg);
}
 .invert .collapsed a:before {
	 color: rgba(255,255,255,.85) 
}
 h2.collapsed {
	 padding-bottom:0 
}
 h2.collapsed + div {
	 margin-top:1em !important 
}
 .collapsed:hover a {
	 color: #f00;
	 border-bottom: 1px solid;
}
/* ================== News & Bio ===================== */
 .indicia {
	 display:inline-block 
}
 .content > div > .floatleft + h1, .content > div > .floatleft + h2 {
	 clear: none;
	 padding-top: 0;
}
 .contact {
	 clear: both;
	 position: relative;
	 margin: .65em 0;
	 min-height: 2em;
}
 .date + h1 {
	 padding-top:0 
}
 .contact > p {
	 display: inline;
	 font-style: italic;
	 width: calc(100% - 10em);
	 padding-top: 0;
	 padding-bottom: .35em;
}
 body .contact > p a {
	 font-style: normal 
}
 body:not(.no-js) .contact > p a {
	 display: inline-block;
	 text-indent: -9999px;
}
.bio.grid>div {box-shadow: 0 2px 4px rgba(0,0,0,0.2)}
.bio.grid .thumb {
	position: relative;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
}
.bio.grid .thumb img {
	position: absolute;
	top: 0;
	height: 100%;
	max-width: 2000px !important;
	width: auto;
	left: 50%;
	transform: translate(-50%,0);
}
.contact address {
	display: inline-block;
	padding: 2em 1em 0 0;
	font-style: normal;
	/*width: calc(50% - 1em);*/
	vertical-align: top;
}
p+a+.address > address {
	padding-top: 1em 
}
 address strong {
	 display:block 
}
 #contact ul, .contact address ul {
	 padding: 0;
	 margin-top: 0;
	 list-style-type: none;
	 margin: 0;
}
 .contact .collapsed {
	 position: absolute;
	 top: 0;
	 right: 0;
	 border: none;
}
 .inquiry.open:before {
	 transform: rotate(90deg);
}
 .no-js .inquiry {
	 display: none 
}
/* Remove link border & padding for AddThis */
 .atss a, .addthis_toolbox a, .addthis-smartlayers a, #at3win a {
	 border:0;
	 padding:0;
}
 .no-js .loadmore {
	 display: none 
}
 .loadmore {
	 display: block;
	 margin: 1.5em auto 0;
	 padding: 0 25%;
	 width: 50%;
	 z-index: 2;
}
/* I know that this is ridiculous, and I'm sorry. */
 .darkgrey .loadmore .btn, .red .loadmore .btn, .gold .loadmore .btn, .teal .loadmore .btn, .blue .loadmore .btn, .green .loadmore .btn, .darkgreen .loadmore .btn {
	 color: #fff;
	 border-color: #fff;
}
 .darkgrey .loadmore .btn:focus, .darkgrey .loadmore .btn:hover, .red .loadmore .btn:focus, .red .loadmore .btn:hover, .gold .loadmore .btn:focus, .gold .loadmore .btn:hover, .teal .loadmore .btn:focus, .teal .loadmore .btn:hover, .blue .loadmore .btn:focus, .blue .loadmore .btn:hover, .green .loadmore .btn:focus, .green .loadmore .btn:hover, .darkgreen .loadmore .btn:focus, .darkgreen .loadmore .btn:hover {
	 color: #fff;
	 border-color: #fff;
	 background-color: rgba(0,0,0,.35);
}
 .boxes > h1.collapsed:not(.open) {
	 padding-bottom:1.6em 
}
 .boxes > h1.collapsed {
	 padding-bottom:.65em 
}
 .content > div > h1.collapsed:not(.open) {
	 padding-bottom:.5em 
}
 .tags {
	 margin-top: 1.5em 
}
 .tags .btn {
	 margin-right: .5em 
}
 .no-js .tags {
	 display: none 
}

.bioPronouns {
    font-style: italic;
    padding: 0;
    color: #555;
}
/* ========== Contact Icons ============== */
 .icon {
	 position: relative;
	 margin-left: 40px;
}
 .icon:before {
	 background: url(../site-images/cmu/sprites-icons-contact.png) 0 -5px no-repeat;
	 background-size: auto 90%;
	 content: "";
	 display: block;
	 height: 31px;
	 width: 32px;
	 position: absolute;
	 left: -39px;
	 bottom: -5px;
}
/* Adds padding to empty a.icon tags */
 .icon:after {
	 content: "";
	 display: inline-block;
}
 address .icon.email {
	 text-indent: -9999px 
}
 .icon.tel:before {
	 background-position: -32px 0 /*-36*/
}
 .icon.fax:before {
	 background-position: -74px 0 /*-82*/
}
 .icon.loc:before {
	 background-position: -106px 0 /*-116*/
}
/* ======= Links ======= */
 a {
	 color: #b00;
	 border-bottom: 1px solid #faa;
	 text-decoration: none;
}
 #content a:not(.btn):not(.cta):not(.box):not(.scrolldown) {
	 padding-bottom:1px 
}
 .grey a {
	 border-bottom-color: #f77 
}
 a:visited {
	 color: #800;
	 border-bottom-color: #c99;
}
 a:hover, a:focus {
	 color: #f00;
	 border-bottom-color: #f00;
}
/* =================================== Section Background Colors =================================== */
 .grid {
	 background-attachment: scroll;
	 background-position: center center;
	 background-repeat: no-repeat;
}
 .invert thead, .invert h1, .invert h2, .invert h3, .invert h4, .invert h5, .invert h6, .invert b, .invert strong, .invert i, .invert em {
	 color: #fff !important;
}
 .invert a, .invert h1 a:not(.btn):not(.cta), .invert h2 a:not(.btn):not(.cta), .invert h3 a:not(.btn):not(.cta), .invert h4 a:not(.btn):not(.cta), .invert h5 a:not(.btn):not(.cta), .invert h6 a:not(.btn):not(.cta), .invert p a:not(.btn):not(.cta), .invert blockquote a:not(.btn):not(.cta), .invert li a {
	 color:rgba(255,255,255,.85);
	 border-bottom: 1px solid rgba(255,255,255,.75);
}
 .invert a:focus, .invert a:hover {
	 color: #fff !important;
	 text-shadow:0 0 5px rgba(0,0,0,.5);
}
 .invert {
	 background-color:#666;
	 color:rgba(255,255,255,.85);
}
 .invert:not(footer) li {
	 color:rgba(255,255,255,.85) 
}
 .invert .rule-bottom {
	 border-bottom: 1px solid rgba(255,255,255,.65) 
}
/* Keep page dot color
.invert .flickity-page-dots .dot {
	 background-color: rgba(255,255,255,.75) 
}
 .invert .flickity-page-dots .dot.is-selected {
	 background-color: #fff 
} */
/* the grey background doesn't need the invert class */
 .grey:not(.plaid), .js-flickityCustom.grey .grid, .grey .flickity-viewport {
	 background-color: #e0e0e0 
}
/* all other background colors NEED the invert class */
/* Red has been changed from #b00 to SCS red, because we can. */
 .darkgrey, .js-flickityCustom.darkgrey .grid, .darkgrey .flickity-viewport {
	 background-color: #666 
}
 .red, .js-flickityCustom.red .grid, .red .flickity-viewport {
	 background-color: rgb(153,0,0) 
}
 .gold, .js-flickityCustom.gold .grid, .gold .flickity-viewport {
	 background-color: #a60 
}
 .gold.invert, .gold.invert a {
	 color: #fff !important 
}
/* make text #fff to pass http://webaim.org/resources/contrastchecker/ */
 .teal, .js-flickityCustom.teal .grid, .teal .flickity-viewport {
	 background-color: #067 
}
 .blue, .js-flickityCustom.blue .grid, .blue .flickity-viewport {
	 background-color: #247 
}
 .green, .js-flickityCustom.green .grid, .green .flickity-viewport {
	 background-color: #085 
}
 .darkgreen, .js-flickityCustom.darkgreen .grid, .darkgreen .flickity-viewport {
	 background-color: #243 
}
/* override Christmas combinations ... maybe we should retire this rule? */
 .red + .green, .red + .darkgreen {
	 background-color: #067 
}
 .green + .red, .darkgreen + .red {
	 background-color: #555 
}
/* Don't forget to invert for first h1 in colored grids (for .news and .boxes). I know that I should have added a theme class to prevent this. Sorry. */
 .darkgrey > h1, .red > h1, .gold > h1, .teal > h1, .blue > h1, .green > h1, .darkgreen > h1, .darkgrey > h1 a, .red > h1 a, .gold > h1 a, .teal > h1 a, .blue > h1 a, .green > h1 a, .darkgreen > h1 a, .darkgrey > h1 a:before, .red > h1 a:before, .gold > h1 a:before, .teal > h1 a:before, .blue > h1 a:before, .green > h1 a:before, .darkgreen > h1 a:before {
	 color:#fff;
	 border-color: #fff;
}
 .darkgrey > h1:hover a, .red > h1:hover a, .gold > h1:hover a, .teal > h1:hover a, .blue > h1:hover a, .green > h1:hover a, .darkgreen > h1:hover a, .darkgrey > h1 a:focus, .red > h1 a:focus, .gold > h1 a:focus, .teal > h1 a:focus, .blue > h1 a:focus, .green > h1 a:focus, .darkgreen > h1 a:focus {
	 color:#fff;
	 border-color: #fff;
	 text-shadow:0 0 5px rgba(0,0,0,.5);
}
/* ========= Footer ========= */
 footer.grid {
	 background-color: #333;
	 color: rgba(255,255,255,.5);
	 font-size: 90%;
	 letter-spacing: .05em;
	 overflow: hidden;
}
 footer.grid h1, footer.grid a, footer.grid a:visited {
	 border-bottom-color: transparent;
}
 footer.grid a:focus, footer.grid a:hover {
	 border-bottom: 1px solid;
}
 footer ul {
	 margin: 0;
	 padding: 0;
}
 footer div:first-child ul li {
	 display: inline 
}
 footer div:first-child ul li:after {
	 content: " | ";
	 padding: 0 .5em;
}
 footer div:first-child ul li:last-child:after {
	 content: none;
	 padding: 0;
}
/* ============= SCS Footer Stuff ============= */
 footer {
	/* since we don't have the optional red footer here */
	/* only on homepage for SCSCF site, everywhere for building */
	 box-shadow: 0px -2px 10px rgba(0,0,0,0.5) 
}
.contactscs {
    width: 100% !important;
    overflow: visible !important;
}
.contactscs ~ div:not(.legal) {
	/* nav if noJS */
	margin-left: auto;
	margin-bottom: -3em;
}
 .contactscs h2 {
	 font-size: 15px;
	 font-weight: bold;
	 padding: 0;
}
 .contactscs p {
	 font-size: 14px;
	 color: #FFF;
	 padding: 0;
}
 .contactscs description {
	 font-size: 12px;
	 display: block;
	 color: #888;
	 margin-bottom: 7px;
}
 .contactscs section {
	 box-sizing: border-box;
	 display: inline-block;
	 padding-right: 25px;
	 padding-bottom: 25px;
	 vertical-align: top;
}
 .specialhours {
	 color: #FF0 !important;
	 font-weight: bold;
}
footer .legal {
	 display: block;
	 width: 100%;
	 padding-top: 0;
}
footer .university-wordmark {
	 position: absolute;
	 right: 1em;
	 bottom: -2em;
	 width: 40%;
	 margin-bottom: 0 !important;
	 display: block;
	 z-index: 5;
	 text-align: right;
	 border-bottom: none !important;
}
.university-wordmark:hover img {
	opacity: 0.6;
	 border-bottom: solid 1px rgba(255,255,255,.6) !important
}
.university-wordmark img {
	 border-bottom: solid 1px rgba(0,0,0,0) !important;
	 padding-top: 1em;
	 opacity: .4;
}
@media only screen and (max-width: 768px) {
	footer .university-wordmark {
		right: 2em;
		bottom: -4.8em;
		width: 50%;
	}
}
/* ===================== Social Icons (Three Sizes) Full Size 1/2 Size 1/3 Size ===================== */
 ul.social {
	 margin: 0;
	 padding: 0;
}
 .social a, .social span {
	 background:url(../site-images/cmu/sprites-social.png) 0 0 scroll transparent no-repeat;
	 background-size:auto 100%;
	 border-bottom: 0 none !important;
	 display:inline-block;
	 height:80px;
	 margin: 0 6px 6px 0;
	 padding-bottom: 0 !important;
	 text-indent: -9999px;
	 width:80px;
}
 .social a:hover, .social a:focus {
	 opacity:.5;
	 border-bottom: 0 none;
}
 ul.social li {
	 display:inline-block;
	 padding:0;
	 vertical-align: top;
}
 .social .twitter {
	 background-position: -86px 0 
}
 .social .googleplus {
	 background-position: -172px 0 
}
 .social .linkedin {
	 background-position: -258px 0 
}
 .social .youtube {
	 background-position: -344px 0 
}
 .social .itunesu {
	 background-position: -430px 0;
	 border-radius: 50% 
}
 .social .rss {
	 background-position: -516px 0 
}
 .social .tumblr {
	 background-position: -602px 0 
}
 .social .instagram {
	 background-position: -688px 0 
}
 .social .flickr {
	 background-position: -774px 0 
}
 .social .weibo {
	 background-position: -860px 0 
}
 .social .pinterest {
	 background-position: -946px 0;
	 width: 31px 
}
 .social .vimeo {
	 background-position: -1032px 0;
}
 .social .more {
	 background-position: -1204px 0;
	 position: relative;
	 width: 43px;
}
 .invert .social .more {
	 background-position: -1118px 0;
}
 .social.half a, .social.half span {
	 height:40px;
	 width:40px;
}
 .social.half .twitter {
	 background-position: -43px 0 
}
 .social.half .googleplus {
	 background-position: -86px 0 
}
 .social.half .linkedin {
	 background-position: -129px 0 
}
 .social.half .youtube {
	 background-position: -172px 0 
}
 .social.half .itunesu {
	 background-position: -215px 0 
}
 .social.half .rss {
	 background-position: -258px 0 
}
 .social.half .tumblr {
	 background-position: -301px 0 
}
 .social.half .instagram {
	 background-position: -344px 0 
}
 .social.half .flickr {
	 background-position: -387px 0 
}
 .social.half .weibo {
	 background-position: -430px 0 
}
 .social.half .pinterest {
	 background-position: -472px 0;
	 width: 41px 
}
 .social.half .vimeo {
	 background-position: -516px 0 
}
 .social.half .more {
	 background-position: -602px 0;
	 width: 22px;
}
 .invert .social.half .more {
	 background-position: -559px 0 
}
 .social.third a, .social.third span {
	 height:30px;
	 width:30px;
}
 .social.third .twitter {
	 background-position: -32px 0 
}
 .social.third .googleplus {
	 background-position: -65px 0 
}
 .social.third .linkedin {
	 background-position: -97px 0 
}
 .social.third .youtube {
	 background-position: -129px 0 
}
 .social.third .itunesu {
	 background-position: -161px 0 
}
 .social.third .rss {
	 background-position: -193px 0 
}
 .social.third .tumblr {
	 background-position: -226px 0 
}
 .social.third .instagram {
	 background-position: -258px 0 
}
 .social.third .flickr {
	 background-position: -290px 0 
}
 .social.third .weibo {
	 background-position: -322px 0 
}
 .social.third .pinterest {
	 background-position: -354px 0 
}
 .social.third .vimeo {
	 background-position: -387px 0 
}
 .social.third .more {
	 background-position: -451px 0;
	 width: 17px;
}
 .invert .social.third .more {
	 background-position: -419px 0 
}
/* =============== Form elements =============== */
 input, textarea {
	 background: #fff;
	 border: 1px solid rgba(0,0,0,.35);
	 font-size: 1em;
	 margin: .25em 0;
	 padding: .35em .5em;
	 position:relative;
	 display: inline-block;
	 max-width: calc(100% - 6px - .5em);
}
 input[type=submit] {
	 margin: 0 
}
 input[type="radio"], input[type="checkbox"] {
	 margin-left: 2px;
}
 input:not([type="radio"]), textarea, select {
	 border-radius:0;
}
 select {
	 background:#fff;
	 border: 1px solid rgba(0,0,0,.35);
	 color:#777;
	 margin: .25em 0;
	 padding: .25em;
	 max-width: 100%;
}
 select:focus, input:focus, textarea:focus {
	 background-color:#e5e5e5;
	 outline: none;
}
 textarea {
	 max-height: 20em;
	 min-height: 5em;
	 min-width: 50%;
	 max-width:calc(100% - 2px - .5em);
	 overflow: auto;
	 width: 100%;
}
/* ================ Buttons & CTAs =============== */
 a.btn, a.btn:visited, button, input[type=submit] {
	 background-color: rgba(0,0,0,.6);
	 border: 0 none;
	 border-top: 2px solid transparent;
	/* so regular .btn is as tall as ghost */
	 border-bottom: 2px solid rgba(0,0,0,.35);
	 border-radius:0;
	/* override browsers who round teh buttons */
	 color: #fff;
	 display: inline-block;
	 line-height: 1.15em;
	 margin-bottom:1em;
	 padding:1em 1.35em;
	 outline: none;
}
 a.btn.small, a.btn.small:visited, button.small, input[type=submit].small {
	 padding: .35em .5em;
}
 a.btn:last-child, button:last-child, input[type=submit]:last-child {
	 margin-bottom:0 
}
 a.btn.wide {
	 display: block;
	 padding: 1.5em;
	 text-align: center;
}
 a.btn.featured {
	 display: block;
	 margin: 2em auto;
	 text-align: center;
	 width: 300px;
	 background-color: #067;
	/* the teal color*/
	 box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}
 a.btn:hover, a.btn:focus, button:hover, button:focus, input[type=submit]:hover, input[type=submit]:focus {
	 background-color: rgba(0,0,0,.8);
}
 a.btn.featured:hover, a.btn.featured:focus, button.featured:hover, button.featured:focus {
	 background-color: #045;
}
 a.btn.ghost, a.btn.ghost:visited, button.ghost, input[type=submit].ghost {
	 background-color: transparent;
	 border: 2px solid rgba(0,0,0,.5);
	 color: rgba(0,0,0,.6);
}
 a.btn.ghost:hover, a.btn.ghost:focus, button.ghost:hover, button.ghost:focus, input[type=submit].ghost:hover, input[type=submit].ghost:focus {
	 color: #c00;
	 border-color: #c00;
}
 .invert a.btn.ghost, .invert a.btn.ghost:visited, .invert button.ghost, .invert input[type=submit].ghost {
	 color: #fff;
	 border-color: #fff;
}
 .invert a.btn.ghost:hover, .invert a.btn.ghost:focus, .invert button.ghost:hover, .invert button.ghost:focus, .invert input[type=submit].ghost:hover, .invert input[type=submit].ghost:focus {
	 color: #fff;
	 border-color: #fff;
	 background-color: rgba(0,0,0,.35);
}
 .cta, a.cta {
	 border-bottom-color: transparent;
	 color: #555;
	 display: inline-block;
	 font-size: 90%;
	 font-weight: 700;
	 margin-right: .15em;
	 text-transform: uppercase;
}
 .cta:after {
	 content: " \25BA";
	 display: inline;
	 position: relative;
	 font-size: 75%;
	 top: -1px;
	 margin-left: .15em;
}
 .cta:focus, a.cta:focus, .cta:hover, a.cta:hover, a:focus .cta, a:hover .cta {
	 color: #c00;
}
 .invert .cta {
	 border-bottom: none;
	 color: #fff;
}
/* ================================ Helper Classes =============================== */
 .circle img, img.circle {
	 border-radius: 50% 
}
 .pointer {
	 cursor:pointer;
	 display: block;
}
 .hr {
	 border-bottom: 1px solid rgba(0,0,0,.2);
	 clear:both;
	 display:block;
	 margin-bottom: 1em;
	 max-width: 100% !important;
}
 .border {
	 border: 1px solid rgba(0,0,0,.2) 
}
 .noborder, .noborder td, .noborder th {
	 border: none !important;
	 padding-left: 0;
}
 .noborder td:last-child, .noborder th:last-child {
	 padding-right: 0;
}
 .rule-top {
	 border-top: 1px solid rgba(0,0,0,.2);
}
 .rule-bottom, p.rule-bottom {
	 border-bottom: 1px solid rgba(0,0,0,.2);
	 padding-bottom: .125em;
}
 .invert .hr, .invert .border, .invert .rule-top, .invert .rule-bottom {
	 border-color: rgba(255,255,255,.5);
}
 .invert noscript, .invert div[role="alert"], .invert .alert {
	 background-color: #fff;
	 padding: .5em .65em;
}
 noscript, noscript a, noscript a:visited, noscript a:hover, noscript a:focus, div[role="alert"], p[role="alert"], p[role="alert"] a, p[role="alert"] a:visited, p[role="alert"] a:hover, p[role="alert"] a:focus, .alert, .alert p, .alert a, .alert a:visited, .alert a:hover, .alert a:focus {
	 color:red !important;
	 text-shadow: none;
}
 noscript a, p[role="alert"] a, .alert a {
	 border-bottom: 1px solid !important 
}
 div:not(.hero) > .caption {
	 max-width:36%;
	 font-size:90%;
}
 .caption img {
	 width:100% 
}
 .floatleft, img.floatleft, .floatleft img, .floatleft.caption {
	 float:left;
	 margin:0 15px 15px 0;
	 padding-bottom: 0;
}
 .floatright, img.floatright, .floatright img, .floatright.caption {
	 float:right;
	 margin:0 0 15px 15px;
	 padding-bottom: 0;
}
 .caption.thumb, .thumb img {
	 margin-bottom:0 
}
 .aligncenter {
	 text-align:center !important 
}
 .alignright {
	 text-align:right !important 
}
 .clear {
	 clear:both 
}
 .hide {
	 display: none !important 
}
 .show {
	 display: block !important 
}
 .fixed {
	 position: fixed 
}
 .overflow-hidden {
	 overflow: hidden !important 
}
 .overflow-auto {
	 overflow: auto !important 
}
 .error {
	 background: #fdd;
	 padding: 1em;
	 box-sizing: border-box;
	 display: block;
	 border: 1px solid;
}
/* a.external:after {
	 background: url(../site-images/cmu/icon-leave-site.png) no-repeat -9999px;
	 content: url(../site-images/cmu/icon-leave-site-grey.png);
	 padding-left: 5px;
	 display: inline;
	 vertical-align: top;
	 border: none;
	 position: relative;
	 top: 0;
	 width: 9px;
}
 a.external:hover:after, a.external:focus:after {
	 content: url(../site-images/cmu/icon-leave-site.png);
	 opacity: 1;
} */
 nav.tree a.external:hover:after, nav.tree a.external:focus:after, nav.tree a.external:after {
	 content: url(../site-images/cmu/icon-leave-site-white.png);
	 opacity: .75;
}
/* ========================================================================== Flickity v2.1.2 - http://flickity.metafizzy.co ========================================================================== */
/*! Flickity v2.1.2
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: #333;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
  z-index: 100;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
  padding: 1px;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}
/* ===== end of standard flickity ===== */
/* SCS Carousel behavior */
.carousel {
  /*background: #333;*/
  box-shadow: 0 0 40px rgba(0,0,0,.3) inset;
  margin-bottom: 20px;
}

.carousel-slide img, .carousel-slide .words {
  display: block;
  height: 300px;
  box-shadow: 0 0 20px rgba(0,0,0,.3);
  max-width: none !important;
}
.carousel-slide {
  position: relative;
   margin-right: 30px;
  margin-left: 30px;
  color: #FFF;
}
.carousel-slide not(img) {
  padding: 10em;
}
.carousel-caption {
 background: linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4em 1em 1em;
  color: #FFF;
}

@media screen and ( min-width: 768px ) {
 .carousel img, .carousel-slide .words {
    height: 600px;
  }
}

 @media screen and ( max-width: 500px ) {
  .carousel img, .carousel-slide .words {
    height: 200px;
  }
  .carousel-slide {
      font-size: 80%;
  }
 }


/* HIDING CAMPUS BEHAVIOR
 .js-flickityCustom .flickity-viewport:after {
	 content: ".";
	 display: block;
	 clear: both;
	 visibility: hidden;
	 line-height: 0;
	 height: 0;
}
 .js-flickityCustom {
	 background-color:transparent;
	 position: relative;
	 width: 100%;
	 -ms-touch-action: pan-y;
}
 .no-js .js-flickityCustom {
	 cursor: auto;
	 display: block;
	 width: auto;
	 height: auto !important;
}
 .js-flickityCustom .flickity-viewport {
	 position: relative;
	 -webkit-transform: translate3d(0px, 0px, 0px);
}
 .js-flickityCustom .flickity-viewport {
	 -webkit-backface-visibility: hidden;
	 -moz-backface-visibility: hidden;
	 -ms-backface-visibility: hidden;
	 -webkit-transform: translate3d(0,0,0);
	 -moz-transform: translate3d(0,0,0);
	 -ms-transform: translate3d(0,0,0);
}
 .js-flickityCustom {
	 border-color: transparent;
	 margin: 0 auto;
	 padding:0;
	 transition:none !important;
}
 .js-flickityCustom:not(.invert) + div:not(.invert), div:not(.invert):not(.breadcrumbs) + .js-flickityCustom:not(.invert) {
	 border-top: 1px solid rgba(0,0,0,.2);
}
 #content > div:first-child + div:not(.js-flickityCustom) {
	 border-top: 0 none 
}
 .js-flickityCustom .grid > div {
	 padding-top:0;
	 padding-bottom:0;
}
 .js-flickityCustom .grid > div:first-child img {
	 width:100% 
}
 .js-flickityCustom .grid {
	 padding: 0;
	 width: 100%;
	 max-width: none;
	 margin: 0;
	 font-size: 100%;
}
 .js-flickityCustom .grid > div:nth-of-type(2n-1) {
	 padding-right: 1.25%;
	 width: 50%;
}
 .js-flickityCustom .grid > div:nth-of-type(2n) {
	 padding: 1em 0 5em;
	 width: 39%;
}
 #content > .js-flickityCustom.tall:first-child, #content > .js-flickityCustom:first-child .flickity-viewport, #content > .js-flickityCustom:first-child .hero {
	 width: 100%;
}
 #content > .js-flickityCustom:first-child .flickity-page-dots {
	 padding: 0;
	 left: auto;
	 right: 9%;
	 bottom: 0;
	 background-color: rgba(255,255,255,.75);
	 padding: 10px;
	 cursor:default;
	 position: absolute;
	 line-height: 0;
	 transition: background-color 0.3s ease, right 0.3s ease;
}
 #content > .js-flickityCustom:first-child .flickity-page-dots:hover {
	 background-color: #fff 
}
 .menu-on #content > .js-flickityCustom:first-child .flickity-page-dots {
	 right: 2% 
}
 #content > .js-flickityCustom:first-child .flickity-page-dots .dot:last-child {
	 margin-right: 0 
}
 #content > .js-flickityCustom:first-child + div.boxes {
	 padding-top: 3.65em 
}
 .no-js #content > .js-flickityCustom.tall:first-child, .no-js #content > .js-flickityCustom:first-child .flickity-viewport {
	 height: auto;
	 max-height: none;
}
 .no-js #content > .js-flickityCustom:first-child .hero {
	 height: auto;
	 min-height: 700px;
}

END BIG SKIP */

/* Carousels on larger touch devices ... Be sure to update media query version also (around line 2430)! */
 .touch .js-flickityCustom .grid > div:nth-of-type(2n) {
	 padding-bottom: 2em 
}
 .touch #content > .js-flickityCustom:first-child + div:not(.breadcrumbs) {
	 padding-top: 1.5em 
}
/* ========================================== Special CSS Effects for all devices ========================================== */
 @media not print {
	 iframe {
		/* can you not? transition: height 0.3s ease;
		 */
		 max-width: 100%;
		/* prevent horizontal scrolling */
	}
	 a.arrow, .collapsed a:before, .inquiry:before {
		 -webkit-transition: -webkit-transform 0.3s ease;
		 -moz-transition: -moz-transform 0.3s ease;
		 -o-transition: -o-transform 0.3s ease;
		 transition: transform 0.3s ease;
	}
	/* HOW ABOUT NO! Stop animating all of the things and making the website swim before my eyes... body:not(.touch) h1, body:not(.touch) header, body:not(.touch) div, body:not(.touch) nav, body:not(.touch) span, body:not(.touch) input, body:not(.touch) button, body:not(.touch) a, body:not(.touch) img, body:not(.touch) p, body:not(.touch) strong, body:not(.touch) b, body:not(.touch) em, body:not(.touch) i {
		 transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, margin 0.3s ease, min-height 0.3s ease, max-width 0.3s ease, opacity 0.3s ease, padding-left 0.3s ease, padding-right 0.3s ease, left 0.3s ease, right 0.3s ease, text-shadow 0.3s ease, width 0.3s ease;
	}
	 nav h1, #sitename h1, #sitename h2 {
		 transition: font-size 0.3s ease, height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
	}
	 */
	 body:not(.touch) a.external:after {
		 transition: opacity 0.2s ease 
	}
	 body:not(.touch) .events li a > span {
		 transition: left 0.3s ease, box-shadow 0.3s ease;
	}
	 body:not(.touch) .flickity-page-dots, body:not(.touch) .icon:before {
		 transition: ease background-color .3s, ease box-shadow .3s;
	}
	 body:not(.touch) .flickity-prev-next-button .arrow {
		 transition: fill .3s ease 
	}
	 .videothumbnail img {
		 transition: filter 0.25s;
		 width: 100%;
	}
	 .videothumbnail img:hover {
		 filter: brightness(120%);
	}
}
/* ============== Campus Alerts ============== */
 .campusAlertOn p {
	 background-color: #b00 
}
 .campusAlertOff p {
	 background-color: #0b0 
}
 #campusAlert p {
	 color: #fff;
	 font-size: 90%;
	 padding: .5em 1em .36em;
	 margin: .35em 0 1em;
}
 #campusAlert p:before {
	 border-radius: 100%;
	 border: 3px solid #fff;
	 color: #fff;
	 display: block;
	 float: left;
	 font-weight: 700 !important;
	 height: 30px;
	 padding: 10px 0 0;
	 position: relative;
	 width: 40px;
}
 .campusAlertOn p:before {
	 background-color: #f00;
	 content:'!';
	 font-size: 200%;
	 left: -.25em;
	 text-align: center;
	 top: -.5em;
}
 .campusAlertOff p:before {
	 background-color: #0f0;
	 content:"\2713";
	 font-size: 150%;
	 left: -.35em;
	 text-indent: .49em;
	 top:-.65em;
}
 #campusAlert a {
	 color: #fff;
	 border-bottom: 1px solid;
}
 #campusAlert strong {
	 letter-spacing: 1px;
	 text-transform: uppercase;
}
/* ============================= Media Queries ============================= */
/* Only load fonts and background images for screens tablet-sized and larger */
 @media only screen and (min-width: 300px) {
	/* 768? A little harsh? Let's shrink that... */
	 html, button, input, select, textarea {
		 font-family:'Open Sans', 'Helvetica', sans-serif 
	}
	 .globe {
		 background-image:url(../site-images/cmu/bg-globe.png) 
	}
	 .plaid, .tartan {
		 position: relative;
		 overflow: hidden;
		 z-index: 1;
	}
	/* http://www.sitepoint.com/css3-transform-background-image/ */
	 .plaid:before {
		 content: "";
		 position: absolute;
		 width: 9999px;
		/* to make sure the plaid repeats over tall grids */
		 height: 9999px;
		/* to make sure the plaid repeats over short, wide grids */
		 z-index: 0;
		 margin: 0 auto;
		 left:0;
		 top:0;
		 background-image: url(../site-images/cmu/bg-plaid-big.png);
		 background-repeat: repeat;
		 background-position: center center;
		 background-size: auto;
		 transform: rotate(41.35deg) translateX(-50%);
	}
	/* text on light grey plaid is very difficult to read, so turn the opacity down */
	 .plaid:not(.invert):not(.boxes):not(.news):before {
		 opacity:.65 
	}
	.tartan:before {   /* When you want to go FULL plaid! */
		 content: "";
        position: absolute;
        width: 9999px;
        height: 9999px;
        z-index: 0;
        margin: 0 auto;
        left: 0;
        top: 0;
        background-image: url(../site-images/cmu/cmu-tartan-digital.png);
        background-repeat: repeat;
        background-position: center center;
        background-size: 600px; /* Shrink to approx. 20-30% size */
        transform: rotate(41.35deg) translateX(-50%);
	}
	/* "visual enhancement overlay" makes low-res visuals look crisp (faux-chrispness) */
	 #content .mask:before {
		 content: "";
		 background: url(../site-images/cmu/overlay.png) repeat 0 0 scroll transparent;
		 display: block;
		 position: absolute;
		 top: 0;
		 left: 0;
		 height: 100%;
		 width: 100%;
		 z-index: 5;
	}
}
/* For BIG screens */
 @media only screen and (min-width: 1700px) {
	 .roof, header > div, header nav, .hero > .text, .hero .caption, .grid, .breadcrumbs, .content, .needs-gutter-padding  {
		/* GUTTER */
		 padding-left: 15%;
		 padding-right: 15%;
	}
	 .homeside-bottom {
		right:15%
	}
	/* to match above GUTTER */
	 .alerts {
		 margin-right: 15%;
		 width: 35%;
	}
	 .menu-on .roof, .menu-on header > div, .menu-on header nav, .menu-on .hero > .text, .menu-on .hero .caption, .menu-on .grid, .menu-on .breadcrumbs, .menu-on .content {
		/*GUTTER*/
		 padding-left: 10%;
		 padding-right: 10%;
	}
	 .menu-on .homeside-bottom {
		right:10%
	}
	/* to match above GUTTER */
	 .menu-on .alerts {
		 margin-right: 10%;
		 left: 55%;
	}
	 .menu-on #container {
		 width: calc(100% - 450px) 
	}
	 nav.tree {
		 right: -450px;
		 width: 450px;
	}
	 nav.tree li a {
		 padding-right: 70px 
	}
	 nav.tree a.arrow {
		 left: 412px 
	}
	 .roof.invert .wordmark {
		 width:23% 
	}
	 header.float + #content .hero {
		 background-position: center center 
	}
	 #content .hero .box {
		 width:calc(35% - 2em) 
	}
	 #content > .js-flickityCustom:first-child .flickity-page-dots, #content .hero .box.right {
		 right:15% 
	}
	 #content .hero .box.left {
		 left:15% 
	}
	 .menu-on #content > .js-flickityCustom:first-child .flickity-page-dots, .menu-on #content .hero .box.right{
		 right: 10% 
	}
	 .menu-on #content .hero .box.left {
		 left: 10% 
	}
	 #content .hero .small {
		 width:calc(27.222% - 2em) 
	}
	 #content .hero .large {
		 width:calc(54.444% - 2em) 
	}
	/* v5.2 nav doesn't play nice with Flickity. The easy fix was to comment out the max-width. This is why slideshows are huge on large screens. */
	/* #content > .js-flickityCustom {
		 max-width: 70% 
	}
	 */
	 #content > .js-flickityCustom:not(:first-child):not(.invert):not(.grey) {
		 border: 1px solid rgba(0,0,0,.2) 
	}
	 .invert + .js-flickityCustom {
		 border: 0 none 
	}
	 .js-flickityCustom .grid > div:nth-of-type(2n) {
		 width: 47.35% 
	}
	 .js-flickityCustom .grid > div:nth-of-type(2n-1) {
		 padding-right: 1.5% 
	}
	 .js-flickityCustom:not(.invert) + div:not(.invert):not(.js-flickityCustom) {
		 border-top: 0 none 
	}
}
/* For smaller, desktop-sized screens */
 @media only screen and (max-width: 1300px) {
	 .roof, header > div, header nav, .hero > .text, .hero .caption, .grid, .breadcrumbs, .content, .needs-gutter-padding  {
		/*GUTTER*/
		 padding-left: 2%;
		 padding-right: 2%;
	}
	 .homeside-bottom {
		right:2%
	}
	/* to match above GUTTER*/
	 .alerts {
		 margin-right: 2%;
		 width: 42%;
		 left: 56%;
		/* different than usual to avoid overlapping the title if multiple */
	}
	 .roof a.wordmark, .roof form {
		 width: 25%;
	}
	 .roof.invert .wordmark {
		 width: 25% 
	}
	/* nav.tree.b is the alternate style for sites with inverted roof */
	 nav.tree.b {
		 padding-top: 3.5em 
	}
	 #content .hero {
		 min-height: 400px 
	}
	 #content .hero .box {
		 font-size: 90%;
		 width:calc(48% - 2em);
	}
	 #content > .js-flickityCustom:first-child .flickity-page-dots, #content .hero .box.right {
		 right:2% 
	}
	 #content .hero .box.left {
		 left:2% 
	}
	 #content .hero .small {
		 width:calc(37.222% - 2em) 
	}
	 #content .hero .large {
		 width:calc(74.444% - 2em) 
	}
	 .js-flickityCustom .grid > div:nth-of-type(2n) {
		 width: 46.5% 
	}
	 .js-flickityCustom .grid > div:nth-of-type(2n-1) {
		 padding-right: 1.45% 
	}
	/* #sitename h1,*/
	 #content .hero > div.text h1 {
		 font-size: 2.15em 
	}
	 nav h1, 
	/* #sitename h2,*/
	 #content .hero > div.text h2 {
		 font-size: 1.5em 
	}
}
/* For tablet-sized screens */
 @media only screen and (max-width: 960px) {
	 .roof .quicklinks {
		 right: -0.5em;
		/* move over because menu button has moved down */
	}
	 #sitename h1 {
		 font-size: 2.15em 
	}
	 #sitename h2 {
		 font-size: 1.5em 
	}
	 .breadcrumbs {
		 font-size: 80%;
	}
	 nav.tree {
		 padding-top: 4.5em 
	}
	 nav.tree form {
		 display: block;
		 position: absolute;
		 width: 100%;
		/* was calc(100%-4.5em) */
		/*padding: 13px 0 0 1.5em;
		 */
		 margin: 0;
		 top: 0;
	}
	 nav.tree input[placeholder=Search] {
		/*margin: 0;
		 border: none;
		 /width: 100%;
		 padding-right: 10px;
		 color: #fff;
		 background-color: rgba(255,255,255,.15);
		 */
	}
	 nav.tree input[placeholder=Search]:focus {
		/*color: #fff;
		 background-color: #666;
		 */
	}
	 nav.tree label.siteSearch {
		 display: none;
		 position: relative;
		 width: auto;
		 left: 0;
		 text-align: left;
		 top: 2px !important;
	}
	 nav.tree input[name=site] {
		 float: left;
		 padding: 0;
		 margin: .45em 0 0 0;
	}
	 nav.tree button {
		 height: auto;
		 padding: 6px 14px;
	}
	 nav.tree h1 {
		 display: none;
		 height: 0;
		 line-height: 0;
		 padding:0;
	}
	 .menu-btn {
		/* Menu Button */
		 margin-top: 62px !important;
	}
	 nav.tree.b .menu-btn {
		 margin-top: 13px 
	}
	 nav.tree li > a:hover:not(.arrow) {
		 background-color: transparent 
	}
	 .menu-on #container {
		 width: 100%;
		/* This was auto, I'm unclear why */
		 position: fixed;
	}
	/* .menu-on .menu-btn {
		 display: none 
	}
	 keep this visible */
	/* fixes odd page resize on mobile */
	 .menu-on table {
		 width: 80vw 
	}
	 .menu-btn, .menu-on nav.tree .menu-btn {
		 display: block 
	}
	 .menu-on #overlay {
		 display: block;
		 background-color: rgba(255,255,255,.65);
		 z-index: 101;
	}
	 .menu-on > nav.tree {
		 z-index: 102;
	}
	 .roof a.wordmark {
		 width: 42% 
	}
	 .roof.invert .wordmark {
		 width: 33.333% 
	}
	 .grid, .content {
		/*not breadcrumbs */
		 padding-top: 1.5em;
		 padding-bottom: 1.5em;
	}
	/* #content > .js-flickityCustom:first-child + div:not(.breadcrumbs) {
		 padding-top: 1.5em 
	}
	 */
	 #container > header .wordmark img {
		 max-width: 33.333% 
	}
	 header nav {
		 font-size: 90% 
	}
	 a.external:after {
		 top: auto 
	}
	/* .content > div:first-child {
		 width: 64.666% I don't think we want this anymore... 
	}
	*/
	 .content .sidebar {
		 margin-left: 4% 
	}
	 a.btn.wide {
		 padding: .65em 
	}
	 .ios .cta:after {
		/* prevent emoji on ios */
		 content: " \25B8";
		 font-size: 100%;
		 margin-left: 0;
	}
	 .column4 > div, .column4 > div:nth-of-type(4n) {
		 padding-right: 3%;
		 width: 31.333%;
	}
	 .column4 > div:nth-of-type(3n) {
		 padding-right: 0 
	}
	 .boxes {
		 padding-bottom: 0 
	}
	 .boxes > div {
		 margin-bottom: 1.5em 
	}
	 .column4.boxes > div {
		 margin: 0 0 1.5em;
		 width:32%;
	}
	 .column4.boxes > div:nth-of-type(3n-1) {
		 margin-left: 2%;
		 margin-right: 2%;
	}
	 .column4.photos div.photo {
		 flex-basis: 50% 
	}
	 .column4 > div.photo:nth-of-type(3n) {
		 margin-right: 0 
	}
	 .content .sidebar div h1, .grid h1 {
		 font-size: 2em 
	}
	 .grid .floatleft, .grid .floatright {
		 float: none 
	}
	 .news.column2 div.img {
		 height: 225px 
	}
	 .news.column3 div.img, .news.column4 div.img {
		 height: 150px 
	}
	 .js-flickityCustom .grid {
		 font-size: 90% 
	}
	 .js-flickityCustom .grid > div {
		 padding: 1.5em 2% 
	}
	 .js-flickityCustom .grid > div:nth-of-type(2n) {
		 padding-top: 1em;
		 width: 42%;
		/* to make room for controls */
	}
	 .js-flickityCustom .grid > div:nth-of-type(2n-1) {
		 padding-right: 3%;
		 width: 47%;
	}
	 header:not(.float) + #content .hero > div.text, #content .js-flickityCustom .hero > div.text {
		 padding: 0 2%;
		 height: 100%;
	}
	 #content .hero iframe {
		 display: none 
	}
	 .grid.nav nav ul li:first-child, .grid.nav nav ul li:last-child {
		 padding: .35em 0;
	}
	 .contact > p {
		 display: block 
	}
	/* Added, probably overrides things above */
	 .roof {
		 position: sticky;
		 top: -49px;
		 right: 0;
		 height: 103px;
		/* added */
	}
	 .roof a.wordmark {
		 width: 170px;
		/* changed */
		 margin: 10px 0 6px;
		 min-width: 0;
	}
	 .roof form {
		 display: block;
		 padding-top: 0;
		 top: auto;
		 width: calc(100% - 20px);
		 padding: 0;
		 margin: 0;
		 max-width: none;
		 position: absolute;
		 left: 0;
	}
	 .roof div {
		 display: block;
		 padding-bottom: .5em;
	}
}
/* For small, mobile-sized screens */
 @media only screen and (max-width: 767px) {
	 body, html {
		 height: auto 
	}
	 body {
		 background-image: none !important 
	}
	/* h1 {
		 font-size: 2em 
	}
	 */
	 .roof {
		/*position: sticky;
		 top: -50px;
		 height: 125px;
		 already added above */
	}
	 .mobile header > div nav {
		 display: none;
		 z-index: 1;
	}
	 .roof.fixed {
		 box-shadow: 0 0 1em rgba(0,0,0,.2);
	}
	 #sitename > div, #sitename.large > div {
		 width: auto;
	}
	 #sitename > a, #sitename.large > a {
		 padding: 1em 0 .5em;
		 display: block;
		 max-width: 100%;
		 width: auto;
		 text-align: left;
	}
	 #sitename img, #sitename.large img {
		 max-width: 50%;
		 width: auto;
	}
	 #sitename h1 {
		 line-height: 1.15em;
		 padding-bottom: 5px;
	}
	 .roof.fixed + #sitename, header:not(.float) .roof.fixed + #sitename {
		 padding-bottom: 0;
	}
	 .roof.fixed + #sitename h2 {
		 padding-bottom: 0;
	}
	 #sitename, #content {
		 padding-top: 1em;
		 transition: none;
	}
	 #content > .breadcrumbs:first-child {
		 padding-top: 0 
	}
	 #content > .js-flickityCustom:first-child, header.float + #content > .js-flickityCustom:first-child, #content > .js-flickityCustom:first-child .flickity-viewport, #content > .js-flickityCustom:first-child .hero, #content > .js-flickityCustom.tall:first-child, #content .hero, #content > .tall, header.float + #content, header.float + #content .hero {
		 background-position: center center;
		 height: auto !important;
		 min-height: 400px;
	}
	 #content .hero .box h1 {
		 font-size:1.5em 
	}
	/* header nav {
		 display: none NO! Who asked you, anyway? ugh... 
	}
	*/
	 #container > header.float {
		 position: initial 
	}
	 .roof:not(.invert) {
		 background-color: #fff 
	}
	 .roof div {
		 display: block;
		 padding-bottom: .5em;
	}
	 .roof.invert .wordmark, .roof a.wordmark {
		 width: 40%;
		/* 170px */
		/* changed */
		/* margin: 10px 0 6px;
		 */
		 min-width: 0;
	}
	/* .roof form {
		 display: block;
		 padding-top: 0;
		 top: auto;
		 width: 85%;
		 padding: 0;
		 max-width: none;
		 position: absolute;
		 right: 0;
	}
	 */
	 .roof .menu-btn + form {
		 right: 0 
	}
	 input[placeholder="Search"] {
		 background-image: url(../site-images/cmu/icon-magnify.png);
		 background-repeat: no-repeat;
		 background-position: 98% center;
		 background-size: auto 75%;
		 font-size: 16px;
		/* prevents browser zoom on iOS */
	}
	 .roof input[placeholder="Search"] {
		 padding-bottom: .35em;
		 padding-top: .35em;
		 background-image: url(../site-images/cmu/icon-magnify.png);
		 background-repeat: no-repeat;
		 background-position: 98% center;
		 background-size: auto 80%;
		 font-size: 13px;
		/* prevents browser zoom on iOS */
	}
	 .search button {
		 height: 100%;
		 margin: 0;
		 display: none;
	}
	 .search input[name=site] {
		 float: left;
		 margin-top: .45em;
	}
	 a.external:after {
		 content: url(../site-images/cmu/icon-leave-site-grey.png);
		 opacity:1;
	}
	 .grid.nav nav h1 {
		 font-size: 100%;
		 text-transform: none;
	}
	 nav ul a {
		 letter-spacing: .05em 
	}
	 nav.tree div > ul > li:not(.secondary) > a {
		 letter-spacing: .075em 
	}
	 .float .roof.fixed:not(.invert) {
		 border-bottom: 1px solid rgba(0,0,0,.2);
	}
	 header:not(.float) #sitename {
		 padding-left: 0;
		 padding-right: 0;
		 margin: 0 2%;
	}
	 nav a {
		 -webkit-tap-highlight-color: transparent 
	}
	 nav.tree {
		/*right: -85%;
		 width: 85%;
		 */
	}
	 nav.tree li a {
		 padding-right: 3em 
	}
	 .scrolldown {
		 display: none 
	}
	 nav.tree div > ul {
		 width: 100% 
	}
	 nav.tree.b .menu-btn, div.invert .menu-btn {
		 margin-top:73px;
		/* was 13 */
	}
	 nav.tree a.arrow {
		 left: auto;
		 right: 0;
	}
	 #content .hero > div.text {
		 bottom: auto !important;
		/* overrides JS */
		 height: calc(100% - 1em);
		 padding-top: .5em;
	}
	 #content .hero .box.left, #content .hero .box.right {
		 background-color: rgba(255,255,255,.85);
		 bottom: 0;
		 display: block;
		 left: auto;
		 right: auto;
		 width: auto;
	}
	 #content > .tall p.caption {
		 bottom: 0;
		 padding-right: 2%;
		 width: 100%;
	}
	 .grid, .grid > div, .content {
		 display: block;
		 padding-bottom: 2em;
		 padding-top: 2em;
	}
	 .column2 > div, .column2 > div:nth-of-type(2n-1), .column3 > div, .column4 > div, .column2.boxes > div, .column3.boxes > div, .column3.boxes > div:nth-of-type(3n-1), .column4.boxes > div, .column4.boxes > div:nth-of-type(3n-1), .content .sidebar, .content > div:first-child, .js-flickityCustom .grid > div:nth-of-type(2n), .js-flickityCustom .grid > div:nth-of-type(2n-1) {
		 display: block;
		 -webkit-box-flex: none;
		 -moz-box-flex: none;
		 -webkit-flex: none;
		 -ms-flex: none;
		 flex: none;
		 margin: 0;
		 padding-right: 0;
		 padding-left: 0;
		 width: auto;
	}
	 .column2 > div:nth-of-type(2n-1), .column4 > div:nth-of-type(2n-1), .column4 > div:nth-of-type(4n) {
		 padding-right: 0;
		 margin-right: 0;
		 width: auto;
	}
	 .grid .list {
		 padding:0 
	}
	 .grid .list:not(:first-child) h2 {
		 padding-top:1em 
	}
	 .grid div:not(.list) + .list ul, .grid .list:not(:last-child) ul {
		 border-bottom: 0 none 
	}
	 .boxes {
		 display: block;
		 padding-top: 1em;
		 padding-bottom: 0;
		 overflow: hidden;
	}
	 .boxes > div {
		 margin-bottom: 1em !important;
		 padding: 1em 4% !important;
		 font-size: inherit;
	}
	 .column4.boxes > div:nth-of-type(2n-1), .column4.boxes > div {
		 margin-right: 0 
	}
	 .grid:not(.boxes) > div:first-child {
		 padding-top: 0 
	}
	 .grid:not(.boxes) > div:last-child {
		 padding-bottom: 0 
	}
	 .grid.photos {
		 padding: 2em 0 0;
		 width: auto;
	}
	 .column2:not(.photos) div.photo, .column3:not(.photos) div.photo, .column4:not(.photos) div.photo {
		 margin:1em 0 !important;
	}
	 .grid.photos h1 {
		 padding-left: 2%;
		 padding-right: 2%;
	}
	 .grid > div.photo > a div, .grid.photos > div > a div {
		 padding: 1.15em 5%;
		 width: 90%;
	}
	 .grid.nav > div {
		 padding-bottom: 2em 
	}
	 .js-flickityCustom {
		 border: 0 none 
	}
	 .js-flickityCustom .grid > div:nth-of-type(2n) {
		 padding: 0 2% 3em;
		 font-size: 100%;
	}
	 .js-flickityCustom .grid > div:nth-of-type(2n-1) {
		 padding: 1em 2% !important;
	}
	 #content > div.content:first-child, #content > div.grid:first-child:not(.invert) {
		 padding-top:0 
	}
	 .content .sidebar {
		 margin-top: 2em 
	}
	 .content .sidebar div {
		 font-size:inherit 
	}
	 .content .sidebar div.left-rule {
		 border-left: 0 none;
		 padding: 0;
	}
	 .content .sidebar div.simple {
		 margin-top: 2em;
		 padding: 0;
	}
	 div:not(.hero) > .caption {
		 max-width:100%;
		 margin-left: 0;
		 margin-right: 0;
		 float: none;
	}
	 div:not(.hero) > .caption img {
		 margin-left: 0;
		 margin-right: 0;
	}
	 .collapsed a:focus, .collapsed a:hover {
		 color:#c00;
	}
	 .news.column2 div.img, .news.column3 div.img, .news.column4 div.img {
		 height: 225px;
	}
	 .news.grey a > :not(div), .news.darkgrey a > :not(div), .news.red a > :not(div), .news.gold a > :not(div), .news.teal a > :not(div), .news.blue a > :not(div), .news.green a > :not(div), .news.darkgreen a > :not(div) {
		 padding-left: 3%;
		 padding-right: 3%;
	}
	 .news > div {
		 padding-bottom: 0;
	}
	 .grid.nav nav ul li:first-child, .grid.nav nav ul li:last-child {
		 padding: 0;
	}
	 .loadmore {
		 padding: 0;
		 width: auto;
	}
	 body:not(.no-js) .contact > p a {
		 text-indent:0;
		 margin-bottom: 1em;
	}
	 .contact span {
		 /* display: block */
	}
	 .contact address {
		 display: block;
		 padding: 1em 0 0;
		 width: auto;
	}
	 .thumb img {
		 margin-bottom:15px 
	}
	.flickity-page-dots {
		/* display:none */ 
	}
	/* mobile view for mobile homepage layout */
	 .homeside-top {
		 display: block;
		 float: none;
	}
	 .homeside-bottom {
		 display: block;
		 position: static;
		 float: none;
		 padding-top: 2em;
	}

	 .homepage header {
		 background-image: url("../site-images/dragon-watermark.png"), linear-gradient(to right, rgba(0,102,119,1) 20%, rgba(0,102,119,0) 95%), url("../site-images/dean-header.jpg") !important;
		 background-repeat: no-repeat, no-repeat, no-repeat;
		 background-position: 20px 10px, 50% 50%, 50% 0px !important;
		 background-size: 240px, 100%, auto 500px !important;
		/* background-size: 30vw, 100%, auto 500px !important;
		 */
	}
	/* Active Alerts */
	 .alerts {
		 min-height:50px;
		 width: calc(100% - 2em ) !important;
		 margin-bottom: 0em;
		 position: static !important;
		 box-sizing: border-box;
		 margin-left: 1em;
		 margin-right: 1em;
		 padding-left: 0;
	}
}
/* =========================================== very small =============================*/
 @media only screen and (max-width: 600px) {
	 .content .float-right {
		 display: block;
		 float: none;
		 margin-left: auto;
		 margin-right: auto;
		 margin-bottom: 2em;
		 padding-top: 1em;
		 max-width: 75% !important;
	}
	 .content .float-left {
		 display: block;
		 float: none;
		 margin-left: auto;
		 margin-right: auto;
		 margin-bottom: 2em;
		 padding-top: 1em;
		 max-width: 75% !important;
	}
}
/* ========================================================================== More Helper Classes (these need to go after the Media Queries) ========================================================================== */
 .hidden {
	 display: none !important;
	 visibility: hidden !important;
}
 .invisible {
	 visibility: hidden !important 
}

	/* ================== Print styles ================== */
	 #wordmarkPrint, img[alt='print'] {
		 display:none 
	}
	 @page {
		 size: auto;
		/* auto is the initial value */
		/* this affects the margin in the printer settings */
		 margin: 15mm 10mm 15mm 12mm;
	}
	 @media print {
		 * {
			 color:#333 !important;
			 line-height:normal !important;
			 /*margin:0px !important;*/
			 /*padding:0px !important;*/
			 /*height:auto !important;*/
			 min-height:0px !important;
			 max-height:none !important;
			 /*width:auto !important;*/
			 min-width:0px !important;
			 max-width:8in !important;
			 -moz-transition: none !important;
			 -o-transition: none !important;
			 -webkit-transition: none !important;
			 transition: none !important;
			 position:relative;
			 float:none !important;
			 box-sizing:border-box !important;
		}
		
		/* let's be more selective */
		header, footer {background: none transparent !important;}
		
		
		 a:not(.btn) {
			 text-decoration:none !important;
			 border-bottom: none !important;
		}
		
		/* a:after{content:" [" attr(href) "] ";font-size:0.8em;font-weight:normal;color: #444;} */
		 header, div, section, article, aside {
			 display:block;
		}
		 header > nav, #nav, .hero .cta, .menu-btn, .icon:before, iframe, #scrolldown, .roof, .loadmore, #navContainer {
			 display:none !important;
		}
		 #sitename h1 {
			 font-size:2.0em !important;
			 padding-top:30px !important;
			 color: #000 !important;
		}
		 body>header.float {
			 position: relative 
		}
		 header > div {
			 display:none !important;
		}
		 #wordmarkPrint {
			 display:block;
			 height:24px !important;
		}
		/*.breadcrumbs {
			 padding:20px 0px 20px 0px !important;
		}
		 */
		 .hero {
			 margin-bottom: 1.5em !important;
			 left: 0 !important;
		}
		 header.float + #content > .js-flickityCustom:first-child .flickity-viewport, #content > .js-flickityCustom.tall:first-child, #content > .js-flickityCustom:first-child .flickity-viewport, #content > .js-flickityCustom:first-child .hero, .flickity-slider {
			 height: auto !important;
		}
		 .hero .text {
			 position:relative !important;
			 display:block !important;
			 text-align:left !important;
			 margin-top:20px !important;
		}
		 .hero h1 {
			 text-shadow:none !important;
			 margin-bottom: 0 !important;
		}
		 .hero h2 {
			 text-shadow:none !important;
			 margin-bottom:4px !important;
		}
		 .hero p.caption {
			 position:relative !important;
			 font-size:1.0em !important;
		}
		 .content, .grid {
			 margin-bottom:20px !important;
		}
		 h1 {
			 margin-bottom:20px !important;
			 font-size:1.6em !important;
		}
		 h2 {
			 margin-bottom:20px !important;
			 font-size:1.4em !important;
		}
		 .sidebar {
			 display:none !important;
		}
		 .grid {
			 display:block !important;
			 page-break-inside:avoid;
		}
		 .grid.column2 {
			 display:block !important;
			 page-break-inside:auto;
		}
		 .grid.column2.grey > div > p > img {
			 width:100% !important;
		}
		 .grid.column2.red.invert > div {
			 width:50% !important;
			 padding:20px !important;
			 float:left;
		}
		 .grid.column3.boxes > div {
			 width:33% !important;
			 padding:20px !important;
			 float:left;
			 clear:both;
		}
		 .grid.column3.boxes > div > img {
			 width:100% !important;
		}
		 .grid.column4 > div {
			 width:25% !important;
			 padding:20px !important;
			 float:left;
		}
		 .grid.column4.boxes > div {
			 width:25% !important;
			 padding:20px !important;
			 float:left;
		}
		 .grid.column4.boxes > div > img {
			 width:100% !important;
		}
		 .grid.column4 > div > h2 {
			 font-size:1.0em !important;
		}
		 .grid div {
			 overflow:visible !important;
		}
		 .js-flickityCustom, .flickity-viewport {
			 width: auto !important;
			 overflow: visible !important;
			 overflow-y: visible !important;
			 overflow-x: visible !important;
			 transform: translate3d(0px, 0px, 0px) !important;
			 overflow: visible !important;
			 clear: both;
		}
		 .flickity-slider .grid, .hero .text, .hero .box {
			 position: relative !important;
			 left: 0 !important;
			 right: auto !important;
			 bottom: auto !important;
			 top: auto !important;
		}
		 .flickity-slider, .flickity-slider .hero {
			 position: relative !important;
			 transform: translateX(0) !important;
		}
		/* .grid.column4.boxes > div {
			 width: 25% !important;
			 margin: 1em !important;
			 display:block !important;
			 float:left !important;
		}
		 */
		 .grid.column4.boxes > div > h2 > img {
			/* width:40px !important;
			 */
			/* float:left !important;
			 */
			/* margin-right:20px !important;
			 */
			 margin-bottom:20px !important;
			 max-width: 100% !important;
		}
		 .grid.column4.boxes > div .hr {
			 margin-bottom:10px !important;
		}
		 .grid {
			 clear:both !important;
			 float:left !important;
		}
		 .photo {
			 transform:rotate(180deg);
			 max-width:50% !important;
		}
		 .photo h2 {
			 font-size:14px !important;
		}
		 .photo img {
			 transform:rotate(180deg);
			 max-width:100% !important;
		}
		 .photo div {
			 transform:rotate(180deg);
			 position:relative !important;
		}
		 .news {
			 margin-top:30px !important;
		}
		 .news > .photo {
			 width:33% !important;
			 padding:4px !important;
		}
		 .grid.column4 .photo {
			 width:25% !important;
		}
		 .grid.column4.nav {
			 display:none !important;
		}
		 .grid.column3.nav {
			 display:none !important;
		}
		 .events span {
			 position:relative !important;
			 border:1px solid #eee !important;
			 top:0px !important;
			 padding:6px;
			 margin-bottom:10px !important;
			 text-align:center !important;
		}
		 .events span > span {
			 position:relative !important;
			 border:0px !important;
			 top:0px !important;
			 background-color:#fff !important;
			 display:inline;
			 text-align:center !important;
		}
		 .events ul li {
			 display:block !important;
			 margin-bottom:10px !important;
			 padding:20px !important;
			 border:1px solid #ccc;
			 text-align:center !important;
		}
		 footer {
			 border-top: 1px solid #cccccc;
			 display:none !important;
			 clear:both;
		}
		 footer > div:nth-child(1) {
			 width: 100%;
		}
		 footer > div:nth-child(2) {
			 background-color: #00ff00;
			 display: none;
		}
		 .list {
			 display: block !important;
		}
		 .list li a {
			 padding: 6px !important;
		}
		 .grid.column2.boxes {
			 display: flex;
			 flex-wrap: wrap;
		}
		 .grid.column2.boxes div {
			 width: 40% !important;
			 border: 1px solid #ccc;
			 margin: 10px !important;
			 padding: 10px !important;
		}
		 .grid.column2.boxes div img {
			 margin: 0px 10px 10px 0px !important;
		}
		 .content > div:not(.sidebar) {
			 display: block !important;
			 vertical-align: top;
		}
		 .content p {
			 padding: 1em 0 !important 
		}
		 .content > div h2.collapsed {
			 margin-top: 20px !important;
			 font-weight: bold;
		}
		 .sidebar > div {
			 padding: 1em 0 !important 
		}
		 .sidebar img {
			 max-width: 50% !important 
		}
		 .left-rule {
			 border: none !important 
		}
		
		/* now override a LOT....
		#content {max-width: 8in !important;} */
		.menu-on #container {width: 100% !important} /* No, no, no! */
		.feedback-section, .feedback-section.grid.column2, footer > .legal, .contactscs > .university-wordmark
		{display: none !important;}

		header, footer 
		{box-shadow: none !important;}

		.contactscs, .contactscs h2 {padding-top: 0 !important; color: #333 !important; width: 100%}
		.contactscs > section {display: inline-block !important; width: 45%}

		.content p.note {
			padding-left: 3em !important;
			padding-right: 1em !important;
		}
		.note:before {color: #888 !important;}
		/* open things */
		.collapsed div[style] {display: block !important;}
		.collapsed a::before {transform: rotate(90deg);}
		
		th, .subtable td {background-color: #333 !important; color: #FFF !important}
		tr {border-bottom: solid 1px #CCC !important}
		
		.av-table-row.closed {height: 400px !important}
		
		a.pdflink:after{content:" - https://computing.cs.cmu.edu/desktop/" attr(href);font-size:1em;font-weight:normal;}
		
		.homeside-top, .news, .homeside-bottom {width: 100% !important}
		table.dashboard tr {height: 3em !important;}
		.dashboard tbody tr td:last-child {bottom: 5px !important}
		
	}

/* * * * * * * * * * * ]|o|[ SPECIAL-CASE STYLES ]|o|[ * * * * * * * * * * */
 .tablewrapper {
	 width: 100%;
	 overflow-x: scroll;
}