/*!
Launched: 2016-12-22
Authors: Taylor Packet, Shawn Maust
Marketing Communications:Web

CONTENTS
-----------------------------------------
1. Common Styles
2. Screen Styles
3. Media Queries
4. Themes
5. Print Styles

BRANDING
-----------------------------------------
1. COLORS
	 - Black (Headings):#111

2. FONT STACKS
	 - Headings:GP,"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif
	 - Body:font-family:Lora, "Times New Roman", Times, serif
*/

@import url('https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i');

/*************************************************************************************
 * 1. Common Styles
 ************************************************************************************/
*, *:before, *:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
@-ms-viewport {width:device-width; zoom:1;}
@-o-viewport {width:device-width; zoom:1;}
@viewport {width:device-width; zoom:1;}

html {width:100%; margin:0; padding:0; font-size:100%; overflow-y:scroll;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	text-size-adjust:100%;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	font-smoothing:antialiased;
}
body {width:100%; margin:0; padding:0; color:#383838; font:1em/1.5em Lora, "Times New Roman", Times, serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display:block;}
audio, canvas, video {max-width:100%; width:100%; display:inline-block; *display:inline; *zoom:1;}
audio:not([controls]) {display:none;}
[hidden] {display:none;}
p {margin:0 0 1.5em; font-size:1.2em; line-height:1.8em;}
a {color:#888; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-transition:all 125ms ease;
		 -moz-transition:all 125ms ease;
			 -o-transition:all 125ms ease;
					transition:all 125ms ease;
}
a:visited {color:#000; text-decoration:none; }
a:hover {color:#aaa;}
a:active {color:#888;}
a:focus {outline:thin dotted;}
a.tapped {background-color:rgba(220,179,57,0.5);}
::-moz-selection,
::selection {background:#0058cf; color:#fff; text-shadow:none;}
strong, b {font-weight:bold;}
em, i {font-style:italic;}
h1,h2,h3,h4,h5,h6 {margin:1.4em 0 0.25em; line-height:1.4em; color:#111; font-weight:600; text-rendering:optimizeLegibility; font-family:GP, "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {text-decoration:none;}
h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited {color:#004da3;}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {text-decoration:underline;}
h1 {margin-top:0; font-size:1.45em;}
h2 {margin:0 0 0.25em; font-size:2.4em; }
h3 {font-size:1.563em;}
h4 {font-size:1.375em;}
h5 {font-size:1.188em;}
h6 {font-size:1em;}
h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5 {margin-top:0;}
ol, ul {margin:1em 0; padding:0 0 0 2em;}
li {margin:0 0 0.25em;}
nav ul {margin:0; padding:0; list-style:none;}
nav li {margin:0; padding:0;}
nav a {text-decoration:none;}
iframe, embed {width:100%;}
sup {vertical-align:super; font-size:smaller;}
sub {vertical-align:sub; font-size:smaller;}
pre, code, kbd, samp {font-family:monospace, sans-serif;}
hr {clear:both; width:100%; margin:1em 0; border:1px solid #dadada; border-width:1px 0 0;}

/* Quotes
----------------------------------------------------*/
blockquote { position:relative; margin:3rem 0; padding:4em 1.5em; font-size:1.1em; font-family:GP, "Helvetica Nueue", Helvetica, Arial, sans-serif; line-height:1em; text-align:left; background:url(images/blockquote-top.svg) 50% 0 / 33% auto no-repeat, url(images/blockquote-bottom.svg) 50% 100% / 33% auto no-repeat; }
blockquote p {margin:0; font-weight:700; line-height:1.4em; text-align:center; }

.s2 blockquote {font-size: 1em; background: url(images/quote1.svg) no-repeat; text-indent: -9999px; background-size: contain; display: block;}

/* Images
----------------------------------------------------*/
figure {margin:0;}
figcaption {clear:both; margin:0.5em 0 0; font-size:0.95rem; text-align:left; width:98%; color:#555; line-height:1.4em; font-family:GP, "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; }
figcaption a { padding:0 4px 2px; color:#fff; background:#000; text-decoration:none; }
figcaption a:hover { color:#fff; background:#444;}
figcaption a:visited { color:#fff; }
img {max-width:100%; width:auto; height:auto; border:none; vertical-align:bottom; -ms-interpolation-mode:bicubic;
	-webkit-box-sizing:content-box;
		 -moz-box-sizing:content-box;
					box-sizing:content-box;
	-webkit-transition:all 125ms ease;
		 -moz-transition:all 125ms ease;
			 -o-transition:all 125ms ease;
					transition:all 125ms ease;
}
.bgvid {position:relative; overflow:hidden; padding-top:55.505%;}
	.bgvid img {position:absolute; top:0; left:0; right:0; bottom:0;}

.embed-inner,
.embed-outer { position:absolute; top:0; bottom:0; left:0; right:0; }

/* General Classes
----------------------------------------------------*/
.noborder {border:none !important;}
.ndmark {display:block; width:200px; max-width:100%; text-decoration:none;}

.cf:before, .cf:after {content:"\0020"; display:block; height:0; overflow:hidden;}
.cf:after {clear:both;}
.cf {zoom:1;}

.skip-links {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}
.skip-links:active, .skip-links:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;}

.visibility-hidden {display:none !important;}

.no-margin {margin:0;}

.stories-cta {margin:2.25em 0; padding:1.25em 0; border-top:4px solid #111; border-bottom:4px solid #111; font-family:GP, "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;}
.stories-cta p {margin-bottom:1em; font-size:1.25rem; line-height:1.475em;}
.stories-cta img {margin-bottom:0.5em;}
.stories-cta a,
.stories-cta a:visited {padding:0 0.15em; color:#fff; background:#111; text-decoration:none;}
.stories-cta a:hover {background:#555;}

@-webkit-keyframes fadeInHold {
	from { bottom:-0.7rem; opacity:0; }
	to	 { bottom:0; opacity:1; }
}
@-moz-keyframes fadeInHold {
	from { bottom:-0.7rem; opacity:0; }
	to	 { bottom:0; opacity:1; }
}
@-ms-keyframes fadeInHold {
	from { bottom:-0.7rem; opacity:0; }
	to	 { bottom:0; opacity:1; }
}
@-o-keyframes fadeInHold {
	from { bottom:-0.7rem; opacity:0; }
	to	 { bottom:0; opacity:1; }
}
@keyframes fadeInHold {
	from { bottom:-0.7rem; opacity:0; }
	to	 { bottom:0; opacity:1; }
}

/*************************************************************************************
 * 2. Screen Styles
 ************************************************************************************/
@media screen,projection {
	body { background:#edeae9 url('images/bg.jpg') 50% 50% repeat; }
	figure {margin:2em auto;}
		.figure-2up img {margin-bottom:1rem;}
		.figure-3up img { margin:2em 0; }
	.wrapper {height:100%; overflow-x:hidden; }
	.row {width:100%; margin:0 auto; *zoom:1;}
	.row:before, .row:after {content:" "; display:table;}
	.row:after {clear:both;}

	.drop {float:left; display:inline-block; vertical-align:text-top; margin:0 0.5em 0.25em 0; width:4em; height:4em; text-indent:-9999px; overflow:hidden; background-position:bottom center; background-repeat:no-repeat; background-size:auto 100%;}
		.drop-a {background-image:url('images/dropcap-a.svg');}
		.drop-k {background-image:url('images/dropcap-k.svg');}
		.drop-s {background-image:url('images/dropcap-s.svg');}
		.drop-t {background-image:url('images/dropcap-t.svg');}
		.drop-w {background-image:url('images/dropcap-w.svg');}

	.video {position:relative; display:block; text-align:center;}
		.bgvid .video { text-indent:-999em; position:absolute; top:0; left:0; right:0; bottom:0; z-index:999; }
		.embed-outer,
		.embed-inner,
		.embed-inner iframe { position:absolute; top:0; left:0; right:0; bottom:0; }
		.video .play {position:absolute; top:0; left:0; width:100%; height:100%; margin:0 auto; background:url('images/play-icon.svg') center center no-repeat; background-size:100px auto;}

	.embed-inner iframe,
	.embed-inner object,
	.embed-inner embed {position:absolute; top:0; left:0; width:100%; height:100%;}

	progress {position:fixed; left:0; top:0; z-index:10; width:100%; height:5px; border:none; color:#000; background-color:transparent;
		-webkit-appearance:none;
			 -moz-appearance:none;
						appearance:none;
	}
	progress::-webkit-progress-bar {background-color:transparent;}
	progress::-webkit-progress-value {background-color:#000;}
	progress::-moz-progress-bar {background-color:#000;}

	.video-link {text-indent:-9999px;}

	/* Header
	----------------------------------------------------*/
	.site-header {position:relative; z-index:1; margin:0; }
	.brandbar,
	.titlebar {}
		.brandbar li {margin:0 -0.9375em; padding:0;}
		.brandbar a {display:block;	margin:0 auto; text-decoration:none; height:50px; text-indent:-9999px; overflow:hidden; background-repeat:no-repeat;}
		.dept-nd img {display:none;}
			.dept-nd a {background-position:left 0;}
			.dept a {background-position:right 0;}
	.titlebar {position:relative; z-index:9999; text-align:center; color:#fff; font-family:Lora, "Times New Roman", Times, serif; }
		.titlebar,
		.titlebar.row {max-width:none;}

			.i {opacity:0; position:absolute; bottom:0; left:0; width:100%;}
			.i strong {font-weight:700;}
			.i1 {
				-webkit-animation:fadeInHold 3s forwards;
					 -moz-animation:fadeInHold 3s forwards;
						-ms-animation:fadeInHold 3s forwards;
						 -o-animation:fadeInHold 3s forwards;
								animation:fadeInHold 3s forwards;
				-webkit-animation-delay:0.35s;
								animation-delay:0.35s;
			}

		.header-overlay { width:46vw; height:46vw; position:absolute; top:calc(50% - 25vw); left:calc(50% - 24vw); background:url(images/title.svg) 50% 50% / contain no-repeat; z-index:999; }

	/* Content
	----------------------------------------------------*/
	.site-content {position:relative; padding:0; }

	.section {position:relative; padding:2rem;}
	 .section.intro { text-align:left; padding:1rem 2rem 0;}

	.v-decorated { position:relative; }
		.v-decorated:before,
		.v-decorated:after { content:''; position:absolute; display:block; left:0; right:0; padding-top:4%; }
		.v-decorated:after { bottom:-1.3vw; background:url(images/divtexture-bottom.svg) 50% 100% / cover no-repeat;}

	.byline:before {content:''; margin-bottom:1.5em; display:block; height:3px; width:80px; background:#caa246;}
	.byline {margin:3.5em 0 0; font-style:italic; color:#0C2340; }
	.byline p {margin:0; font-size:1.1em; font-family:Lora, "Times New Roman", Times, serif;}
	.byline ul {padding:0; list-style:none; font-size:0.9em; font-family:"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; font-style:normal; color:#555}
	.byline ul strong {color:#555;}
	.byline a {color:#1a324e;}

	 /* Dividers
	----------------------------------------------------*/
	.divider { position:relative; padding-top:56.3%; margin:1em 0 2em; background-position:center center; background-size:cover; background-repeat:no-repeat; box-shadow:inset 0px 0px 95px rgba(0,0,0,0.5);}
	/*.divider:before,
	.divider:after,
	.header-image:before { content:''; position:absolute; display:block; left:0; right:0; padding-top:4%; }
	.divider:before { top:-1vw; background:url(images/divtexture-top.svg) 50% 100% / cover no-repeat;}
	.divider:after { bottom:-1vw; background:url(images/divtexture-bottom.svg) 50% 100% / cover no-repeat;}*/

	.plan {background-image:url('images/video_the-plan.jpg');}
	.teams {background-image:url('images/video_the-team.jpg');}
	.side-by-side {background-image:url('images/video_side-by-side.jpg');}

	.plan .video .play { background:url('images/play-icon-plan.svg') center center no-repeat; background-size:250px auto; }
	.teams .video .play { background:url('images/play-icon-teams.svg') center center no-repeat; background-size:250px auto; }
	.side-by-side .video .play { background:url('images/play-icon-side.svg') center center no-repeat; background-size:250px auto; }

	/* Footer
	----------------------------------------------------*/
	.site-footer {position:relative; clear:both; overflow:hidden; margin:0 auto; padding:1em 0; color:#222; text-align:center; font-family:"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; background:#f9f9f9; border-top:1px solid #ccc;}
		.footer-inner {position:relative; margin:0 auto; padding:1em 0;}
		.site-footer p {overflow:hidden; margin:0; font-size:0.875em;}
	.site-info {margin:1em 0;}
	.site-info li {display:inline-block; margin:0 2%;}
	.site-footer a {color:#002b5c; text-decoration:underline;}
	.geo,
	.country-name {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}
	.address {display:block; margin:0;}
	.site-link,
	.org,
	.tel {display:block;}
	.ndmark {width:200px; height:70px; margin:2em auto;}

}

/* Fonts
	 https://dev.conductor.nd.edu/fonts/
----------------------------------------------------*/
@font-face {
		font-family: GP;
		font-weight: 300;
		font-style: normal;
		src: url('//static.nd.edu/fonts/gp-min/gp-light.woff') format('woff'),
				 url('//static.nd.edu/fonts/gp-min/gp-light.ttf') format('truetype');
}
@font-face {
		font-family: GP;
		font-weight: 400;
		font-style: normal;
		src: url('//static.nd.edu/fonts/gp-min/gp-book.woff') format('woff'),
				 url('//static.nd.edu/fonts/gp-min/gp-book.ttf') format('truetype');
}
@font-face {
		font-family: GP;
		font-weight: 700;
		font-style: normal;
		src: url('//static.nd.edu/fonts/gp-min/gp-bold.woff') format('woff'),
				 url('//static.nd.edu/fonts/gp-min/gp-bold.ttf') format('truetype');
}

/*************************************************************************************
 * 3. Media Queries
 ************************************************************************************/

/* 580px
----------------------------------------------------*/
@media only screen and (min-width:36.25em) {
	.image-right,
	.image-left {max-width:40%;}
	.image-right { float:right; margin:0 0 1.2em 1.2em; }
	.image-left { float:left; margin:0 1.2em 1.2em 0; }
	.content-video {margin:2em 0; padding-top:45%;}
}

/* 700px
----------------------------------------------------*/
@media only screen and (min-width:43.75em) {
	html {background-attachment:fixed;}
	h1 {font-size:1.85em;}
	h2 {font-size:2.3em;}
	h3 {font-size:1.75em;}
	h4 {font-size:1.5em;}
	h5 {font-size:1.25em;}
	h6 {font-size:1.125em;}

	 .titlebar-share {position:absolute; bottom:0.5rem; right:3rem;}

	 .video .play {background-size:200px auto;}

		figure {margin:3.5em auto;}

	figure {margin-left:-4rem; margin-right:-4rem;}
		.figure-has-caption { overflow:auto; }
		.figure-has-caption img { width:50%; float:left; }
		.figure-has-caption figcaption { width:50%; padding:2em 1em 1em 2em; font-size:1em; line-height:1.6em;	clear:none; float:right; }

		.figure-2up img {display:inline-block; width:49%;}
		.figure-2up img:first-child {margin-right:1%;}

		.figure-3up { overflow:auto; }
		.figure-3up img {display:block; width:45%; margin:0; float:left;}
		.figure-3up img:first-child { width:50%; margin-right:5%;}
		.figure-3up img:last-child { margin-top:4%; }

		.bgvid.animation {float:left; width:48%; padding-top:35%;}
		.section.intro { text-align:left; padding:4rem 5rem 0;}

	.row {max-width:90vw;}
	.brandbar li {margin:0 auto;}
	.drop { width:4.5em; height:4.5em;}

	/* Header
	----------------------------------------------------*/
	.site-header {text-align:left; }
	.brandbar {padding:0;}
		.brandbar li {float:left;}

	.header-overlay { width:40vw; height:40vw; top:calc(50% - 21vw); left:calc(50% - 20.5vw); }

	/* Navigation
	----------------------------------------------------*/
	.nav-page { display:block; position:fixed; top:0; left:0; right:0;
	 -webkit-transition:all 0.5s ease-in-out;
			-moz-transition:all 0.5s ease-in-out;
					 transition:all 0.5s ease-in-out;
		-webkit-transform:translateY(-100%);
			 -moz-transform:translateY(-100%);
						transform:translateY(-100%);

	}
	.nav-page.visible {
		-webkit-transform:translateY(0);
			 -moz-transform:translateY(0);
						transform:translateY(0);

	}
	/* Content
	----------------------------------------------------*/
	.section {padding:5rem; background-size:320px auto;}

	.stories-cta {padding-bottom:5.5rem;}
	.stories-cta img {margin-right:1em; width:30%; float:left;}

	 .plan .video .play { background-size:450px auto; }
	 .teams .video .play { background-size:450px auto; }
	 .side-by-side .video .play { background-size:450px auto; }

	/* Footer
	----------------------------------------------------*/
	.site-footer {text-align:left;}
		.footer-inner {padding:1em 0 2em;}
		.ndmark {position:absolute; right:0; top:2.2em; margin:0;}
		.site-link {display:block;}
		.org {display:inline;}
}

/* 1000px
----------------------------------------------------*/
@media only screen and (min-width:62.5em) {
	figure {margin-left:-15rem; margin-right:-15rem;}
	.brandbar {padding:0;}
	.tagline { font-size:1.6em; }
	.image-right {margin-right:-12vw;}

	.figure-split {overflow:hidden;}
	.figure-split .bgvid {float:left; width:60%; padding-top:56.25%}
	.figure-split figcaption {float:left; width:40%; clear:none; padding:9rem 0 0 2rem;}

	.header-overlay { width:34vw; height:34vw; top:calc(50% - 20vw); left:calc(50% - 17.1vw); }

	blockquote.pull {font-size:6em;}

	/* Navigation
	----------------------------------------------------*/
	.nav-page .title { width:33%; float:left; }
	.nav-page ul { width:66%; float:left; }

	/* Content
	----------------------------------------------------*/
	.section {width:62vw; margin:0 auto;}
		.s-decorated {margin:10em auto 0; width:72vw;}

	.stories-cta {padding-bottom:0;}
	.stories-cta img {margin-right:0; width:100%; float:none;}

	.pull.pull-left {margin:0 -11vw 0.25em 0.25em; float:right; width:26vw; padding:0;}

	/* Footer
	----------------------------------------------------*/
	.contact-info {margin:0;}
	.site-link,
	.address,
	.site-link,
	.tel,
	.email {float:left; margin:0 1em 0 0;}
	.site-link {margin-right:0.5em;}
	.phone {clear:left;}
}

/* 1200px
----------------------------------------------------*/
@media only screen and (min-width:75em) {
	blockquote {font-size:1.2em;}
	.row {max-width:80vw;}
	.pull {width:20vw; margin-left:-20vw;}
	.titlebar-share {bottom:2rem;}
	.s-decorated {padding:7.5rem 8rem 0; background-size:370px auto;}
	.figure-split figcaption {padding-top:14rem;}
	.stories-cta { margin:1em -25% 2em 1.5em; width:50%; float:right; }
}


/* 1600px
----------------------------------------------------*/
@media only screen and (min-width:100em) {
	.image-right, .image-left {max-width:30%;}
	.image-right {margin-right:-5vw;}
}

/* Hi-res
----------------------------------------------------*/
@media
	(-webkit-min-device-pixel-ratio:1.5),
	only screen and (min--moz-device-pixel-ratio:1.5),
	(min-resolution:144dppx){
		.dept-nd a,
		.dept a {background-size:auto 50px;}
}

/*************************************************************************************
 * 4. Themes
 ************************************************************************************/
@media screen, projection {

	/* Brand Bar
	----------------------------------------------------*/
	.dept-nd a	 {width:301px; background-image:url('https://static.nd.edu/images/brandbar/dept-nd-white.png');}
	.brandbar {background:#111; }
	.brandbar.theme-bb-blue {background:#002b5c; border-bottom:1px solid #001123;}

}

/* Hi-res
----------------------------------------------------*/
@media
	(-webkit-min-device-pixel-ratio:1.5),
	only screen and (min--moz-device-pixel-ratio:1.5),
	(min-resolution:144dppx){
		.dept-nd a {background-image:url('https://static.nd.edu/images/brandbar/dept-nd-white@2x.png');}
		body { background-image:url('images/bg@2x.jpg'); background-size:275px auto;}

}

/*************************************************************************************
 * 5. Print Styles
 ************************************************************************************/
@media print {

	@page {margin:0.5cm;}
	body {font-family:Georgia, "Times New Roman", Times, serif; color:#000;}
	img, tr {page-break-inside:avoid;}
	p, h2, h3 {orphans:3; widows:3;}
	h2, h3 {page-break-after:avoid;}

	/* Styles
	----------------------------------------------------*/
	a[href^="javascript:"]:after,
	a[href^="#"]:after {content:"";}
	.ndmark {width:150px;}
	.image-right img {float:right; margin:0 0 1em 2em;}
	.image-left img {float:left; margin:0 2em 1em 0;}

	/* HIDDEN
	----------------------------------------------------*/
	progress,
	.breadcrumbs,
	.header-util,
	.skip-links,
	.nav-mobile,
	.nav-site,
	.nav-page,
	.content-video,
	.nav-skip,
	.titlebar,
	.figure-has-caption,
	.pull.pull-left {display:none;}

	/* STRUCTURE
	----------------------------------------------------*/
	.site-header {overflow:hidden; position:relative; margin:0 0 20px; padding:0 0 20px; border-bottom:1px solid gray;}
		.brandbar {font-size:12px; text-transform:uppercase; font-family:"Adobe Garamond", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;}
			.brandbar i {text-transform:none;}
		.site-title,
		.subline {margin:0; display:block; font-family:"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;}
		.site-header a,
		.site-title a,
		.subline a {color:#000;}
		.site-title {margin:4px 0 2px; font-size:2em;}
		.subline {font-size:1em;}

	figure.full { margin-bottom:1.5em; width:100%; }
		figure img { width:100%; }
	.figgroup {float:left; width:100%; }
		.figgroup figure {float:left; width:49%; margin-left:1%; margin-right:1%;}
		.figgroup-3 figure {width:32%; margin-left:1%; margin-right:1%;}
		.figgroup figure:first-child {margin-left:0;}
		.figgroup figure:last-child {margin-right:0;}

	.site-content a:link:after {content:" [link:" attr(href) "] "; font-size:11px; font-family:inherit;}
	.site-content abbr:after {content:" (" attr(title) ")";}

	.site-footer {position:relative; clear:both; margin:20px 0 0; padding:20px 0 0; border-top:1px solid gray;}
		.site-footer p {margin:0;}
		.geo,
		.country-name {display:none;}
		.tel {display:block;}
		.site-footer .ndmark {position:absolute; top:20px; right:0;}
}