/* general styles */

body
{
	margin: 0;
}

a
{
	color: #e51937;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

h2 a
{
	color: black;
}

h2 a:hover
{
	color: #e51937;
}

.screenreader-only
{
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.small-print
{
	font-size: 75%;
}

.legend, ul.see-also li.legend
{
	font-size: 75%;
	text-transform: uppercase;
}

img.fill
{
	width: 100%;
	height: auto;
}

ul.no-bullets
{
	list-style-type: none;
	padding-left: 0;
}

ul.see-also li
{
	text-align: center;
	font: 18px "Proxima Nova", sans-serif;
	padding: 12px 0;
	white-space: nowrap;
	text-align: center;
}

ul.inline-bullets li
{
	display: inline-block;
	margin: 0;
}

ul.inline-bullets li:after
{
	content: "\00A0\2022\00A0";
	display: inline;
}

ul.inline-bullets li:last-child:after
{
	display: none;
}

.cap-links a:first-of-type
{
	text-transform: uppercase;
	font-size: 95%;
}

/* column layouts */

.row
{
	overflow: auto;
}

.row .col
{
	float: left;
	box-sizing: border-box;
	padding-right: 25px;
}

.row .col:last-child
{
	padding-right: 0;
}

.row.two .col
{
	width: 50%;
}

.row.three .col
{
	width: 33%;
}

.row.four .col
{
	width: 25%;
}

/* panel layouts */

.panel
{
	margin: 0 auto;
	width: 100%;
	height: 75vh;
	position: relative;
	overflow: hidden;

	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.panel.sm
{
	height: 50vh;
}

.panel.full
{
	height: 100vh;
}

.panel.natural-size
{
	height: auto;
}

.panel.text
{
	max-width: 80rem;
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 1.5em;
	padding-bottom: 1em;
	box-sizing: border-box;
}

.panel.subhead
{
	color: white;
	background-color: #007799;
	padding-left: 25px;
	padding-right: 25px;
	box-sizing: border-box;
}

.panel.subhead > *
{
	font-size: 32px;
	line-height: 160%;
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
}

.panel.subhead strong
{
	font-size: 125%;
}

.panel.subhead .caps
{
	text-transform: uppercase;
	font-family: "Proxima Nova", sans-serif;
	font-size: 24px;
}

.panel.subhead .caps:first-child
{
	margin-bottom: 0;
}

.panel.subhead .caps:first-child + p
{
	margin-top: 0;
}

.panel.subhead .caps:last-child
{
	margin-top: 0;
}

.panel.subhead .small-print
{
	font-size: 40%;
	line-height: 120%;
}

.panel.subhead a
{
	color: white;
	border-bottom: 1px solid hsla(0, 0%, 100%, 0.5);
	text-align: center;
	text-decoration: none;
}

.panel.subhead a:hover
{
	border-bottom-color: white;
}

.panel.image-picker
{
	background: white;
	text-align: center;
	padding: 25px;
	box-sizing: border-box;
}

.panel.image-picker .choice
{
	border: none;
	background: none;
	display: inline-block;
	position: relative;
	width: 28vw;
	height: 28vw;
	background-size: cover;
	background-position: 50% 50%;
	margin-bottom: 25px;
	transition: transform 0.25s, box-shadow 0.25s;
	-webkit-transition: transform 0.25s, box-shadow 0.25s;
	cursor: pointer;
}

.panel.image-picker .choice:hover
{
	transform: scale(1.0125);
	-webkit-transform: scale(1.0125);
	box-shadow: 0 0 8px hsl(0, 0%, 30%);
}

.panel.image-picker .choice + .choice
{
	margin-left: 25px;
}

.panel.image-picker .choice:nth-child(4)
{
	margin-left: 0;
}

.panel.image-picker .choice p,
.overlay .caption
{
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	right: 0;
	font: bold 2.5vw "Proxima Nova", sans-serif;
	color: white;
	margin: 0;
	padding: 0.5em 0;
	background: url('http://catalog.pharmacy.umaryland.edu/img/header-shield.png');
	background-size: auto 100%;
	text-align: center;
}

/* text with a sidebar */

.with-aside .main,
.with-aside aside
{
	display: table-cell;
	vertical-align: middle;
}

.with-aside .main
{
	padding-right: 25px;
	box-sizing: border-box;
}

.with-aside aside
{
	padding: 25px 0 25px 25px;
	margin-left: 0;
	border-left: 1px solid hsla(0, 0%, 0%, 0.15);
}

/* tabs */

ul.tabs
{
	display: table;
	table-layout: fixed;
	width: 100%;
	list-style-type: none;
	margin-left: 0;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	text-align: center;
	border-bottom: 1px solid hsl(0, 0%, 75%);
	border-spacing: 0.5rem 0;
}

ul.tabs li
{
	display: table-cell;
	border-top: 1px solid hsl(0, 0%, 75%);
	border-left: 1px solid hsl(0, 0%, 75%);
	border-right: 1px solid hsl(0, 0%, 75%);
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

ul.tabs li + li
{
	margin-left: 0.5rem;
}

ul.tabs li.active
{
	background: #f2f9fb;
}

ul.tabs li a
{
	display: block;
	padding: 0.75em;
	font-family: "Proxima Nova", sans-serif;
	text-transform: uppercase;
	color: hsl(0, 0%, 65%);
}

ul.tabs li:first-child a
{
	padding-left: 0;
}

ul.tabs li:last-child a
{
	padding-right: 0;
}

ul.tabs li a:hover
{
	color: #6b8f99;
	text-decoration: none;	
}

ul.tabs li.active a
{
	color: #007799;
}

.tabContent > div
{
	display: none;
}

/* top header panel */

body > header .panel
{
	height: 70vh;
}

body > header .panel:after
{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 200px;
	background: url('http://catalog.pharmacy.umaryland.edu/img/header-shield.png');
	z-index: 1;
}

body > header nav
{
	position: relative;
	z-index: 2;
	line-height: 100%;
	margin-top: -10px;
}

body > header .panel h1
{
	position: absolute;
	z-index: 2;
	color: white;
	right: 25px;
	bottom: 10px;
	font-size: 14vw;
	font-weight: normal;
	text-align: right;
	letter-spacing: -0.025em;
	width: auto;
	margin: 0;
}

@media screen and (min-width: 928px)
{
	body > header .panel h1
	{
		font-size: 130px;
	}
}

body > header .panel h1 .title
{
	opacity: 0;
	animation: riseFade 1s forwards;
	-webkit-animation: riseFade 1s forwards;
}

html.no-cssanimations body > header .panel h1 .title
{
	opacity: 1;
}


body > header nav a
{
	text-transform: none;
	font: bold 20% "Proxima Nova", sans-serif;
	color: white;
	text-decoration: none;
	letter-spacing: 0.075em;
}

body > header nav a:first-child
{
	float: left;
	opacity: 0;
	animation: leftFade 1s 0.25s forwards;
	-webkit-animation: leftFade 1s 0.25s forwards;
}

html.no-cssanimations body > header nav a:first-child
{
	opacity: 1;
}

body > header nav a:last-child
{
	float: right;
	opacity: 0;
	animation: rightFade 1s 0.25s forwards;
	-webkit-animation: rightFade 1s 0.25s forwards;
}

html.no-cssanimations body > header nav a:last-child
{
	opacity: 1
}

body > header nav a.prev:only-child
{
	float: left;
	animation: leftFade 1s 0.25s forwards;
	-webkit-animation: leftFade 1s 0.25s forwards;
}

body > header nav a:hover
{
	text-shadow: 0 0 5px hsla(0, 100%, 100%, 0.5);
	text-decoration: none;
}

/* top left image */

#home
{
	position: absolute;
	top: 25px;
	left: 25px;
	width: 300px;
	height: 80px;
	z-index: 9;
}

#home a
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 10;
}

#home a span
{
	display: none;
}

#home.black a
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/soplogo-black.png');
}

#home.white a
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/soplogo-white.png');
}

#home:after
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: -66px -66px;
	z-index: 9;
}

#home.white:after
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/soplogo-shield-black.png');
}

#home.black:after
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/soplogo-shield-white.png');
}

/* scroll cue */

#scrollCue
{
	position: fixed;
	display: none;
	z-index: 100;
	bottom: 25px;
	left: 25px;
	right: 25px;
	text-align: center;
	animation: 3s pulse ease-in-out infinite;
	-webkit-animation: 3s pulse ease-in-out infinite;
	cursor: pointer;
}

#scrollCue.hide
{
	animation: 0.3s fade ease-out reverse;
	-webkit-animation: 0.3s fade ease-out reverse;
}

#scrollCue.hidden
{
	opacity: 0;
}

#scrollCue div
{
	display: inline-block;
	text-transform: uppercase;
	font: 100% "Proxima Nova", sans-serif;
	background: hsla(0, 0%, 0%, 0.8);
	color: white;
	padding: 1em;
	border-radius: 0.5em;
	text-align: center;
}

/* scroll to top */

#backToTop
{
	position: fixed;
	z-index: 100;
	bottom: 25px;
	right: 25px;
	width: 5vw;
	height: 5vw;
	min-width: 50px;
	min-height: 50px;

	padding: 0;
	text-align: center;
	border: none;
	border-radius: 0.5em;
	background: hsla(0, 0%, 0%, 0.5);
	color: white;
	font-size: 24px;
	cursor: pointer;
}

#backToTop.hide
{
	display: none;
}

/* footer */

body > footer
{
	background: #ffd204;
	color: black;
	text-align: center;
	padding-bottom: 25px;
}

body > footer a
{
	color: black;
	text-decoration: underline;
}

body > footer address, body > footer p
{
	font-size: 14px;
}

body > footer nav
{
	background-color: black;
	overflow: auto;
	margin-bottom: 25px;
	padding: 12px;
}

body > footer nav a
{
	color: #ffd204;
	text-decoration: none;
	font: 18px "Proxima Nova", sans-serif;
	text-transform: uppercase;
	width: 50%;
	float: left;
}

body > footer nav a:hover
{
	color: white;
	text-decoration: none;
}

body > footer nav a:first-child
{
	text-align: left;
}

body > footer nav a:last-child
{
	text-align: right;
}

body > footer nav a.prev:only-child
{
	text-align: left;
}

body > footer nav a.next:only-child
{
	margin-left: 50%;
}

body > footer ul.social
{
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}

body > footer ul.social li
{
	display: inline;
	font-size: 28px;
}

body > footer ul.social a
{
	text-decoration: none;
}

body > footer address
{
	font-style: normal;
}

body > footer address .mailing
{
	display: block;
}

body > footer a.logo img
{
	width: 300px;
	height: auto;
	border: none;
}

body > footer .disclaimerNote a
{
	text-decoration: underline;
}

#disclaimer
{
	position: relative;
}

#disclaimer > p
{
	width: 45em;
	margin: 1em auto;
	text-align: left;
}

#disclaimer .detail
{
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 25px;
	right: 25px;
	padding: 40px 25px 25px 25px;
	background: white;
	box-shadow: 0 0 8px black;
	border-radius: 2px;
	display: none;
}

#disclaimer .detail.show
{
	display: block;
}

#disclaimer .detail button
{
	position: absolute;
	top: 10px;
	right: 10px;
	border: none;
	background: none;
	font: bold 18px "Proxima Nova", sans-serif;
	padding: 10px;
	text-transform: uppercase;
	color: #e51937;
	cursor: pointer;
}

#disclaimer .detail p
{
	text-align: left;
}

#disclaimer .detail p:first-child
{
	margin-top: 0;
}

#disclaimer .detail p:last-child
{
	margin-bottom: 0;
}

.reveal:before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #007799;
	opacity: 0.9;
	transition: 2s opacity;
	-webkit-transition: 2s opacity;
}

.no-cssanimations .reveal:before
{
	opacity: 0;
}

.reveal.revealed:before
{
	opacity: 0;
}

.overlay
{
	display: none;
	background-color: white;
	position: fixed;

	/* IE9 uses vm instead of vmin */
	width: 85vm;
	height: 85vm;
	top: calc((100% - 85vm) / 2);
	left: calc((100% - 85vm) / 2);

	width: 85vmin;
	height: 85vmin;
	top: calc((100% - 85vmin) / 2);
	left: calc((100% - 85vmin) / 2);
	z-index: 100;
	box-shadow: 0 0 25px black;
	background-size: cover;
	background-position: 50% 50%;
	transition: none;
	-webkit-transition: none;
	will-change: transform;
	overflow: hidden;
}

.overlay .caption
{
	will-change: transform;
}

.overlay a
{
	color: white;
}

.overlay .main
{
	display: table-cell;
	vertical-align: middle;
	height: 85vmin;
	width: 85vmin;
	padding: 25px;
	box-sizing: border-box;
}

.overlay .detail
{
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	right: -1px;
	bottom: 0;
	background-color: #007799;
	background-color: rgba(0, 119, 153, 0.85);
	color: white;
	opacity: 0;
	will-change: opacity;
	display: table;
	overflow: auto;
}

.no-cssanimations .overlay .detail
{
	opacity: 1;
}

.overlay .detail.appear
{
	animation: 0.5s fade forwards;
	-webkit-animation: 0.5s fade forwards;
}

.overlay .detail.disappear
{
	opacity: 1;
	animation: 0.5s fade reverse forwards;
	-webkit-animation: 0.5s fade reverse forwards;
}

.overlay .detail h2
{
	margin-top: 0;
	text-align: center;
}

.overlay .detail p
{
	text-align: left;
	max-width: 40em;
	margin: 0 auto;
	line-height: 130%;
}

.overlay .detail p:last-child
{
	margin-bottom: 0;
}

.overlay.active
{
	display: block;
	transition: 0.25s transform ease-in-out;
	-webkit-transition: 0.25s transform ease-in-out;
	overflow-y: auto;
}

.overlay ul.see-also li
{
	padding: 15px 0;
}

.overlay ul.see-also li a
{
	display: block;
	border: 1px solid white;
	padding: 10px;
	border-radius: 8px;
	width: 17em;
	margin: 0 auto;
	background: rgba(0, 119, 153, 0.7);
}

.overlay ul.see-also li a:hover
{
	text-decoration: none;
	background: hsla(0, 0%, 100%, 0.1);
}

#overlayShield
{
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: hsla(0, 0%, 0%, 0.8);
	opacity: 0;
	transition: opacity 0.25s;
	-webkit-transition: opacity 0.25s;
	cursor: pointer;
}

#overlayShield.active
{
	opacity: 1;
}

#overlayShield .close
{
	position: fixed;
	top: 0;
	left: 0;
	padding: 25px;
	text-transform: uppercase;
	color: white;
	background: transparent;
	font: bold 18px "Proxima Nova", sans-serif;
	border: none;
	cursor: pointer;
}

#overlayShield .close:hover
{
	text-shadow: 0 0 10px hsla(0, 100%, 100%, 0.8);
}

#printDisclaimer
{
	display: none;
}

@keyframes pulse
{
	0% { opacity: 1 }
	50% { opacity: 0.8 }
	100% { opacity: 1 }
}

@keyframes fade
{
	from { opacity: 0 }
	to { opacity: 1 }
}

@-webkit-keyframes fade
{
	from { opacity: 0 }
	to { opacity: 1 }
}

@keyframes riseFade
{
	from
	{
		transform: translate(0, 25px);
		opacity: 0;
	}

	to
	{
		transform: none;
		opacity: 1;
	}
}

@-webkit-keyframes riseFade
{
	from
	{
		transform: translate(0, 25px);
		opacity: 0;
	}

	to
	{
		transform: none;
		opacity: 1;
	}
}

@keyframes leftFade
{
	from
	{
		transform: translate(25px, 0);
		opacity: 0;
	}

	to
	{
		transform: none;
		opacity: 1;
	}
}

@-webkit-keyframes leftFade
{
	from
	{
		transform: translate(25px, 0);
		opacity: 0;
	}

	to
	{
		transform: none;
		opacity: 1;
	}
}

@keyframes rightFade
{
	from
	{
		transform: translate(-25px, 0);
		opacity: 0;
	}

	to
	{
		transform: none;
		opacity: 1;
	}
}

@-webkit-keyframes rightFade
{
	from
	{
		transform: translate(-25px, 0);
		opacity: 0;
	}

	to
	{
		transform: none;
		opacity: 1;
	}
}

@media screen and (max-width: 600px)
{
	/* mobile */

	.desktop-only
	{
		display: none;
	}

	#home
	{
		top: 10px;
		left: 10px;
		width: 150px;
		height: 40px;
	}

	#home:after
	{
		display: none;
	}

	body > header .panel h1
	{
		right: 10px;
	}

	body > header nav a
	{
		padding-top: 8px;
		font-size: 14px;
	}

	body > footer nav a
	{
		font-size: 14px;
	}

	body > footer a.logo img
	{
		width: 200px;
	}
	
	.panel.subhead
	{
		padding-left: 10px;
		padding-right: 10px;
	}

	.panel.subhead > *
	{
		font-size: 16px;
	}

	.panel.subhead p
	{
		text-align: left;
	}

	.panel.subhead .caps
	{
		font-size: 14px;
	}

	.panel.subhead .small-print
	{
		font-size: 12px;
	}

	.panel.text
	{
		padding-left: 10px;
		padding-right: 10px;
	}

	.with-aside .main, .with-aside aside
	{
		display: block;
		padding: 0;
	}

	.with-aside aside
	{
		border-left: none;
		border-top: 1px solid hsla(0, 0%, 0%, 0.15);
	}

	ul.see-also li.legend
	{
		text-transform: none;
	}

	ul.see-also li.legend:after
	{
		content: ':';
	}

	ul.see-also li
	{
		font-size: 14px;
		display: inline;
	}

	ul.see-also li:after
	{
		content: ', ';
	}

	ul.see-also li:last-of-type:after
	{
		content: none;
	}

	.row .col
	{
		float: none;
		padding-right: 0;
		width: 100% !important;
	}
	
	.panel.image-picker
	{
		display: none;
	}

	.overlay
	{
		display: block;
		position: static;
		width: 100%;
		height: auto;
		box-shadow: none;
	}

	.overlay .detail
	{
		display: block;
		position: static;
		width: 100%;
		height: auto;
		opacity: 1;
		margin-top: 75vh;
		background-color: #007799;
	}

	.overlay .main
	{
		display: block;
		width: 100%;
		height: auto;
		position: static;
		padding: 15px;
	}

	.overlay .detail h2
	{
		font-size: 18px;
	}

	.overlay .detail p
	{
		text-align: left;
		font-size: 13px;
	}

	.overlay ul.see-also li:first-child:before
	{
		content: 'Learn more: ';
		display: block;
	}

	.overlay ul.see-also
	{
		text-align: center;
	}

	.overlay ul.see-also li
	{
		display: inline;
		padding: 0;
		font-family: "Franklin Gothic Book", Helvetica, Arial, sans-serif;
	}
	
	.overlay ul.see-also li a
	{
		display: inline;
		padding: 0;
		border: none;
		text-decoration: underline;
		background: none;
	}

	.overlay .with-aside aside
	{
		margin-top: 10px;
		padding-top: 10px;
	}

	#disclaimer .detail
	{
		left: 0px;
		right: 0px;
		padding: 25px 10px 10px 10px;
	}

	#disclaimer > p
	{
		width: auto;
		margin-left: 15px;
		margin-right: 15px;
	}

	#disclaimerDetail button.close
	{
		font-size: 14px;
		padding: 5px;
	}

	#disclaimerDetail p
	{
		font-size: 80%;
	}
}

@media print
{
	a
	{
		color: black !important;
	}

	a:after
	{
		content: " (" attr(href) ") ";
		text-transform: lowercase;
		color: black;

		/* http://www.dotnet-tricks.com/Tutorial/css/aGVW190612-CSS-to-force-long-text-and-urls-to-wrap-on-all-browser.html */
		white-space: pre;
		white-space: pre-wrap;
		white-space: pre-line;
		word-wrap: break-word;
	}

	#topMenu, #home, body > footer > nav, .reveal:before, #backToTop,
	body > header .panel:after, #scrollCue, body > header h1 nav,
	.panel.image-picker, .screen-only
	{
		display: none !important;
	}

	#printDisclaimer
	{
		display: block;
		border: 1px solid gray;
		padding: 1em;
		font-size: 80%;
	}

	.overlay
	{
		display: block;
		position: static;
		box-shadow: none;
		background: none !important;
		width: 100%;
		height: auto;
	}

	.overlay .detail
	{
		color: black;
		position: static;
		opacity: 1;
		background: none !important;
	}

	.overlay .detail h2 a
	{
		color: black;
	}

	.overlay .detail .delivery
	{
		color: gray;
	}

	.overlay .main
	{
		width: 100%;
		height: auto;
	}
	
	.with-aside .main
	{
		padding-right: 0;
	}

	.with-aside aside
	{
		display: block;
		border-left: none;
		padding: 0;
	}

	.panel.reveal
	{
		height: 200pt;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.panel.sm
	{
		height: 144pt;
	}

	body > header .panel
	{
		height: 216pt;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	body > header .panel h1
	{
		font-size: 80pt;
		line-height: 50pt;
		bottom: 0;
		margin: 0;
	}

	body > footer
	{
		background: none;
	}

	body > footer a.logo:after
	{
		display: block;
		padding-top: 0.5em;
		content: attr(href);
	}

	body > footer ul.social li
	{
		display: block;
		margin-bottom: 0.25em;
	}

	body > footer ul.social a
	{
		color: black !important;
	}
	
	body > footer ul.social a:after
	{
		content: attr(href);
		font-size: 10pt;
	}

	ul.see-also li
	{
		padding: 0.25em;
	}

	ul.see-also a:after
	{
		content: attr(href);
		display: block;
		font-weight: normal;
		font-size: 90%;
	}

	.panel.subhead
	{
		page-break-inside: avoid;
		color: black;
		background: white;
	}

	.panel.subhead a
	{
		color: #e51937;
	}

	.panel.subhead .caps
	{
		font-size: 12pt;
	}

	.panel.subhead > p,
	.panel.subhead > *,
	.panel.text,
	.overlay .detail p,
	ul.see-also li
	{
		font-size: 10pt;
	}

	.overlay ul.see-also li a
	{
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		background: none;
		color: black;
		padding: 0;
	}

	.panel.subhead .small-print
	{
		font-size: 9pt;
	}
}