@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic|Source+Sans+Pro:700,600,400,300,300italic|Rajdhani:400,700);

/* --------------------------------

Icon colors

-------------------------------- */

.nc-icon {
    display: inline-block;
	/* icon primary color */
	color: #f7f7f7;
}

/* --------------------------------

Icon basic style

-------------------------------- */

.nc-icon.grid-16 {
	height: 16px;
	width: 16px;
}

.nc-icon.grid-24 {
	height: 24px;
	width: 24px;
}

.nc-icon.grid-32 {
	height: 32px;
	width: 32px;
}

.nc-icon.grid-48 {
	height: 48px;
	width: 48px;
}

.nc-icon.grid-64 {
	height: 64px;
	width: 64px;
}

.nc-align-to-text {
	/* scale and align icon to the text element */
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	position: relative;
	top: -0.0625em;
	stroke: none;
	fill: none;
}

.nc-align-to-text use {
	color: inherit;
}

.nc-icon.glyph,
.nc-align-to-text.glyph  {
	fill: currentColor;
	stroke: none;
}

/* Small Screens */
/* Define mobile styles */
@media only screen {
	body {
		font-family: 'Open Sans', Calibri, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: auto;
		-moz-osx-font-smoothing: auto;
	}

	h1 {
		font-family: Rajdhani, Tahoma, Verdana, Segoe, sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: -0.075rem;
		line-height: 1;
		margin-bottom: 1.5rem;
		font-size: 2.25rem;
	}

	h1 small {
		color: #A5A5A5;
		font-weight: 400;
		display: block;
		line-height: 1;
	}

	p.lead {
		font-family: 'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif;
		font-weight: 600;
		color: #565656;
	}

	header, footer {
		background: #232323;
		font-size: 0.75rem;
		color: rgba(255, 255, 255, 0.5);
	}

	header a {
		color: inherit;
		-webkit-transition: all 300ms;
		-moz-transition: all 300ms;
		-o-transition: all 300ms;
		transition: all 300ms;
	}

	header a:hover {
		color: #fff;
	}

	header a,
	header .menu > li > a {
		padding: 7px 8px;
	}

	header .menu {
		float: right;
	}

	.owner {
		display: block;
		max-width: 220px;
		margin: 4px 0 2px;
		padding: 0;
		color: #fefefe;
		font-family: 'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif;
		font-weight: 300;
		letter-spacing: 0.075rem;
		text-transform: uppercase;
		line-height: 1;
	}

	header#heroes {
		background: #0f0f1b;
	}

	header#heroes a.title {
		font-family: 'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif;
		background: #f68e1e;
		padding: 0px 1rem;
		color: inherit;
		font-size: 1.75rem;
		text-transform: uppercase;
		display: block;
		margin: 0 auto;
		line-height: 0;
		width: 100%;
		position: relative;
		font-weight: 600;
		-webkit-transition: all 300ms;
		-moz-transition: all 300ms;
		-o-transition: all 300ms;
		transition: all 300ms;
	}

	header#heroes a.title:after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	header#heroes a.title:hover {
		background: #49cfce ;
	}

	nav {
		margin: 0 0 -0.5rem 0;
		background: #0F0F1B;
		color: #fefefe;
		font-family: Rajdhani, Tahoma, Verdana, Segoe, sans-serif;
		text-transform: uppercase;
	}

	nav a {
		color: inherit;
		margin-bottom: 1rem;
	}

	nav .lead-in {
		font-family: 'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif;
		font-weight: 300;
		font-style: italic;
		font-size: 12px;
		text-align: right;
		padding: 4px 16px 0 0;
		letter-spacing: 0.05rem;
		color: rgba(255, 255, 255, 0.8);
		line-height: 1;
	}

	nav a {
		padding: 32px 1rem 30px;
		-webkit-transition: all 300ms;
		-moz-transition: all 300ms;
		-o-transition: all 300ms;
		transition: all 300ms;
		color: rgba(255, 255, 255, 0.7);
		font-size: 22px;
	}

	nav a:hover {
		background: #333333;
		color: #FFFFFF;
	}

	nav a.students:hover {
		background: #f68e1e;
	}

	nav a.educators:hover {
		background: #375390;
	}

	nav a.alumni:hover {
		background: #49cfce;
	}

	#nav-mobile-trigger {
		display: block;
		position: fixed;
		right: 1rem;
		bottom: 1rem;
		background: #375390;
		color: inherit;
		padding: 0.25rem 0.5rem;
		margin: 0;
		font-size: 1.5rem;
		z-index: 100;
	}

	#nav-mobile-trigger:hover,
	#nav-mobile-trigger:active {
		background: #fff;
		color: #000;
	}

	#nav-mobile-trigger span {
		font-size: 20px;
	}

	#nav-mobile {
		padding: 3rem;
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		z-index: 1000;
		overflow: hidden;
		background: inherit;
		color: inherit;
	}

	#nav-mobile a {
		font-size: 2rem;
		color: rgba(255, 255, 255, 0.8);
	}

	#nav-mobile a:hover,
	#nav-mobile a:active {
		background: #282828;
		color: #fff;
	}

	#nav-mobile .title {
		margin: 2rem 0 .5rem;
		font-family: 'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif;
		color: rgba(255, 255, 255, 0.5);
		letter-spacing: 0.025rem;
	}

	#nav-mobile .social a {
		display: inline-block;
		font-size: 1.5rem;
		padding: 0.25rem;
	}

	#hero-image,
	#hero-video {
		background: #0F0F1B;
	}

	#hero-video .flex-video {
		margin-bottom: 0;
	}

	#hero-image .contain {
		position: relative;
	}

	#hero-image .contain:before {
		position: absolute;
		display: block;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: rgba(68, 73, 197, 0.7);
		content: '';
	}

	#hero-image.alumni .contain:before {
		background: rgba(55, 83, 144, 0.6);
	}

	#hero-image.students .contain:before {
		background: rgba(246, 142, 30, 0.7);
	}

	#hero-image img {
		width: 100%;
	}

	#homepage h2 {
		font-family: Rajdhani, Tahoma, Verdana, Segoe, sans-serif;
		font-size: 1.5rem;
		font-weight: 700;
		text-transform: uppercase;
	}

	main {
		background: #EAEAEA;
	}

	article {
		padding: 1rem;
		background: #fefefe;
		border-left: 0.5rem #375390 solid;
		overflow-x: hidden;
	}

	#alumni article,
	#alumni #related-articles {
		border-color: #375390;
	}

	#students article,
	#students #related-articles {
		border-color: #f68e1e;
	}

	#educators article,
	#educators #related-articles {
		border-color: #49cfce;
	}

	article > p:last-of-type:after {
		position: relative;
		display: inline-block;
		background: rgba(0, 0, 0, 0.1);
		content: '';
		width: 12px;
		height: 12px;
		transform: rotate(-15deg);
		margin-left: 8px;
	}

	.breadcrumbs li {
		font-family: 'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif;
		font-weight: 600;
		font-size: 12px;
	}

	.breadcrumbs a {
		color: rgba(0, 0, 0, 0.4);
	}

	.breadcrumbs a:hover {
		color: rgba(0, 0, 0, 0.8);
	}

	.media img {
		margin-left: -1rem;
		max-width: 100vw;
	}

	.media .caption {
		font-family: 'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif;
		font-size: 80%;
		font-weight: 300;
		font-style: italic;
		margin-top: .5rem;
	}

	blockquote {
		border: none;
		font-family: Rajdhani, Tahoma, Verdana, Segoe, sans-serif;
		font-size: 200%;
		text-transform: uppercase;
		line-height: 1.25;
	}

	#alumni blockquote {
		color: #375390;
	}

	#students blockquote {
		color: #f68e1e;
	}

	#educators blockquote {
		color: #49cfce;
	}

	#related-articles {
		font-family: 'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif;
		border-top: 8px #375390 solid;
		padding-top: .5rem;
		margin-bottom: .5rem;
	}

	#related-articles h2 {
		font-family: Rajdhani, Tahoma, Verdana, Segoe, sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		color: rgba(0, 0, 0, 0.6);
		line-height: 1;
		margin: 0;
	}

	#related-articles a {
		color: rgba(0, 0, 0, 0.4);
		-webkit-transition: all 300ms;
		-moz-transition: all 300ms;
		-o-transition: all 300ms;
		transition: all 300ms;
	}

	#related-articles a svg {
		fill: rgba(0, 0, 0, 0.2);
		-webkit-transition: all 300ms;
		-moz-transition: all 300ms;
		-o-transition: all 300ms;
		transition: all 300ms;
	}

	#related-articles a:hover {
		color: rgba(0, 0, 0, 0.6);
	}

	#related-articles a:hover svg {
		margin-right: 0.5rem;
		fill: rgba(0, 0, 0, 0.6);
	}

	footer {
		padding: .5rem 0;
	}

	footer a {
		color: inherit;
		margin-right: 1rem;
		-webkit-transition: all 300ms;
		-moz-transition: all 300ms;
		-o-transition: all 300ms;
		transition: all 300ms;
		text-decoration: underline;
	}

	footer a:hover {
		color: #fff;
	}

	.tsus-logo {
		display: block;
		margin: 0 auto;
		width: 260px;
		max-width: 100%;
		fill: rgba(255, 255, 255, 0.5);
		-webkit-transition: all 300ms;
		-moz-transition: all 300ms;
		-o-transition: all 300ms;
		transition: all 300ms;
	}

	.tsus-logo:hover {
		fill: #fff;
	}

	section.light,
	section.dark {
		padding: 0.5rem 0;
	}

	section.light {
		background: #e8e8e8;
	}

	section.dark {
		background: #0F0F1B;
		color: #fefefe;
	}

	section.game {
		padding: 1rem 0;
		background: rgba(134, 196, 206, 0.58);
	}

	section.game h2 small {
		color: #fff;
	}

	section.game iframe {
		display: block;
		margin: 0 auto 1rem;
		padding: 1rem;
		background: #fefefe;
		-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		color: rgba(0, 0, 0, 0.6);
	}

	a.story {
		background: #fefefe;
		display: block;
		padding: 1rem;
		margin-bottom: 2rem;
		-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		color: rgba(0, 0, 0, 0.6);
	}

	a.story:hover {
		color: #282828;
		-webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.3);
		-webkit-transform: translateY(-4px);
		-moz-transform: translateY(-4px);
		-ms-transform: translateY(-4px);
		-o-transform: translateY(-4px);
		transform: translateY(-4px);
	}

	a.story > * {
		
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	a.story h3 {
		font-family: Rajdhani, Tahoma, Verdana, Segoe, sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		font-size: 1.75rem;
		color: #282828;
		line-height: 1;
	}

	a.story .media {
		position: relative;
	}

	a.story .media:after {
		content: '';
		background: rgba(246, 142, 30, 0.7);
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	a.story.blue .media:after {
		background: rgba(55, 83, 144, 0.6);
	}

	a.story.teal .media:after {
		background: rgba(73, 207, 206, 0.7);
	}

	a.story:hover .media:after {
		background: rgba(255, 255, 255, 0.5);
	}

	a.story .media img {
		margin: 0;
		max-width: 100%;
		position: relative;
		-webkit-filter: grayscale(1);
		-webkit-filter: grayscale(100%);
		filter: gray;
		filter: grayscale(100%);
		filter: url(/heroes/img/desaturate.svg);
	}

	a.story p:last-of-type {
		margin-bottom: 0;
		float: right;
		font-size: 0.875rem;
	}

	a.story:hover h3,
	a.story:hover p:last-of-type {
		color: #f68e1e;
	}

	a.story.blue:hover h3,
	a.story.blue:hover p:last-of-type {
		color: #375390 ;
	}

	a.story.teal:hover h3,
	a.story.teal:hover p:last-of-type {
		color: #49cfce ;
	}

	.button {
		font-family: 'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif;
		padding: 16px 0;
		text-transform: uppercase;
		margin: 0.5rem 0;
		padding: 1rem;
		display: block;
		font-size: 18px;
		color: #fefefe;
	}

	.button.orange:hover {
		background: #f68e1e !important;
	}

	.button.blue:hover {
		background: #375390 !important;
	}

	.button.teal:hover {
		background: #49cfce !important;
	}

	.button:hover {

	}

	.light-weight {
		font-weight: 300;
	}

	.heavy-weight {
		font-weight: 700;
	}

	.no-margin {
		margin: 0;
	}

}

/* Small Screens Only */
/* min-width 0 | max-width 639 */
@media screen and (min-width: 0em) and (max-width: 39.9375em) {
	.owner {
		margin: 7px 0;
	}

	nav {
		margin: 0;
	}
}

/* Medium Screens Up */
/* min-width 639 */
@media screen and (min-width: 40em) {

	header#heroes a.title {
		max-width: 140px;
	}

	h1 {
		font-size: 2.75rem;
	}

	nav a.title {
		font-size: 42px;
	}

	article {
		padding: 1.5rem 2rem 1.5rem 1.5rem;
	}

	.media img {
		margin-left: -1.5rem;
	}

	.media.right {
		display: inline-block;
		width: 50%;
		float: right;
		margin-right: -2rem;
		margin-left: 2rem;
	}

	.media.left {
		display: inline-block;
		width: 50%;
		float: left;
		margin-right: 2rem;
		margin-left: -2rem;
	}

	.media.right img,
	.media.left img {
		max-width: 100%;
		margin: 0;
	}

	.media.left .caption {
		margin-left: 2rem;
	}

	article {
		border-width: 0.75rem;
	}

	#related-articles {
		border-width: 12px;
		padding-top: 1rem;
	}

	#related-articles h2 {
		font-size: 1.75rem;
	}

	section.light,
	section.dark {
		padding: 1rem 0;
	}
}

/* Medium Screens Only */
/* min-width 639 | max-width 1023 */
@media screen and (min-width: 40em) and (max-width: 63.9375) {

}

/* Large Screens Up */
/* min-width 1024 */
@media screen and (min-width: 64em) {

	header#heroes a.title {
		max-width: 160px;
	}

	h1 {
		font-size: 3.25rem;
	}

	article {
		padding: 2rem 6rem 2rem 2rem;
	}

	.media img {
		margin-left: -2rem;
	}

	.media.right {
		margin-right: -6rem;
	}

	#students article,
	#alumni article {
		margin-top: -5.25rem;
	}

	#related-articles {
		padding-top: 2.25rem;
		border: none;
	}

	#related-articles h2 {
		font-size: 1.25rem;
		margin-bottom: .5rem;
	}

	.tsus-logo {
		margin: 0;
		float: right;
	}

	a.story .media {
		margin-bottom: 1rem;
	}
}

/* Large Screens Only */
/* min-width 1024 | max-width 1199 */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {

}

/* X-Large Screens Up */
/* min-width 1200 */
@media screen and (min-width: 75em) {
	article {
		padding: 2rem 8rem 2rem 2rem;
		border-left-width: 1rem;
	}

	.media.right {
		margin-right: -8rem;
	}
}

/* XX-Large Screens Up */
/* min-width 1366 */
@media screen and (min-width: 85.375em) {
	article {
		padding: 2rem 10rem 2rem 2rem;
		border-width: 1.25rem;
	}

	#students article,
	#alumni article {
		margin-top: -11rem;
	}

	.media.right {
		margin-right: -10rem;
	}
}

/* XXX-Large Screens Up */
/* min-width 1600 */
@media screen and (min-width: 99.9em) {
	article {
		padding: 2rem 16rem 2rem 2rem;
		border-width: 1.5rem;
	}

	#students article,
	#alumni article {
		margin-top: -12.5rem;
	}

	.media.right {
		margin-right: -16rem;
	}
}