html, body
{
	height: 100%;
	background: white;
	color: black;
	overflow: hidden;
	perspective: 80vw;
}

body.cover:after
{
	content: '';
	z-index: 2;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('http://catalog.pharmacy.umaryland.edu/img/cover/yellowcurve.svg') top right no-repeat;
	background-size: contain;
}

body.cover:before
{
	content: '';
	z-index: 1;
	background: hsla(0, 0%, 100%, 0.8);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 19vw;
}

#greeting
{
	position: absolute;
	z-index: 10;
	display: table-row;
	top: 75px;
	left: 50px;
}

#greeting img
{
	height: 100px;
	width: auto;
	float: left;
}

#greeting .text
{
	margin-left: 2em;
	border-left: 4px solid #ffd203;
	padding-left: 2em;
	float: left;
}

#greeting h1
{
	text-transform: none;
	font-size: 3vw;
}

#greeting h1 .date
{
	font-weight: normal;
	display: block;
}

#greeting a
{
	font-size: 2vw;
	font-style: italic;
	margin-left: 6em;
}

#greeting a img
{
	border: none;
}

#disclaimer
{
	position: absolute;
	z-index: 11;
	bottom: 0;
	left: 0;
	font-size: 90%;
	padding: 12px 25px 12px 12px;
}

#disclaimer > p a
{
	text-decoration: none;	
}

body.cover #disclaimer .detail
{
	z-index: 15;
	bottom: 50px;
	width: 80vw;
}

#skip
{
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	right: 0;
	background: hsla(0, 0%, 100%, 0.85);
	padding: 12px 25px 12px 0;
	text-align: right;
	font-size: 90%;
}

#skip ul
{
	display: inline;
	padding: 0;
}

#skip ul li
{
	padding: 0;
	display: inline;
}

#skip ul li + li:before
{
	content: "\00A0\2022\00A0";
	display: inline;
}

#collage
{
	position: absolute;
	top: 150px;
	left: -300px;
	width: 120vw;
	max-width: 2500px;
	height: 120vh;
	transform: rotateX(30deg) rotateY(0deg) rotateZ(10deg);
	-webkit-transform: rotateX(30deg) rotateY(0deg) rotateZ(10deg);
	perspective: 1000px;
}

#collage div
{
	position: absolute;
	background-size: cover;
	background-position: 50% 50%;
}

#collage div.rise
{
	animation: 0.5s rise ease-out forwards;
	-webkit-animation: 0.5s rise ease-out forwards;
}

/* sizes */

#collage .four-x-six
{
	width: 8.69%;
	height: 19.35%;
}

#collage .eight-x-fivethird
{
	width: 17.39%;
	height: 17.20%;
}

#collage .eight-x-twelve
{
	width: 17.39%;
	height: 38.71%;
}

#collage .nine-x-six
{
	width: 19.56%;
	height: 19.35%;
}

#collage .eleven-x-sixteenhalf
{
	width: 23.91%;
	height: 53.22%;
}

#collage .twelve-x-fivehalf
{
	width: 26.09%;
	height: 17.74%;
}

#collage .twelve-x-eleven
{
	width: 26.09%;
	height: 35.48%;
}

#collage .twelve-x-eighteen
{
	width: 26.09%;
	height: 58.06%;
}

#collage .fourteen-x-sixteenhalf
{
	width: 30.43%;
	height: 53.22%
}

/* positions -- numbered according to chart */

#collage .pos-1
{
	left: 0;
	top: 19.35%;
}

#collage .pos-2
{
	left: 10.86%;
	top: 19.35%;
}

#collage .pos-3
{
	left: 32.59%;
	top: 0;
}

#collage .pos-4
{
	left: 52.15%;
	top: 0;
}

#collage .pos-5
{
	left: 52.15%;
	top: 20.96%;
}

#collage .pos-6
{
	left: 80.41%;
	top: 0;
}

#collage .pos-7
{
	left: 80.41%;
	top: 20.96%;
}

#collage .pos-8
{
	left: 0;
	top: 41.92%;
}

#collage .pos-9
{
	left: 32.6%;
	top: 41.92%;
}

#collage .pos-10
{
	left: 60.86%;
	top: 41.92%;
}

#collage .pos-11
{
	left: 60.86%;
	top: 61.34%;
}

#collage .pos-12
{
	left: 60.86%;
	top: 81.76%;
}

#collage .pos-13
{
	left: 80.41%;
	top: 41.92%;
}

/* images */

#collage .chatting-outside
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/chattingoutside.jpg');
}

#collage .classroom-smile
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/classroomsmile.jpg');
	background-position: 0% 50%;
}

#collage .graduate
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/graduate.jpg');
	background-position: 50% 25%;
}

#collage .hood
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/hood.jpg');
	background-position: 85% 0%;
}


#collage .lab
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/lab.jpg');
	background-position: 50% 10%;
}

#collage .looking-at-chart
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/lookingatchart.jpg');
}

#collage .pair
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/pair.jpg');
	background-position: 0 0;
}

#collage .pharmacy-hall
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/pharmacyhall.jpg');
	background-position: 50% 5%;
}

#collage .pharmacy-hall-interior
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/pharmacyhallinterior.jpg');
	background-position: 50% 50%;
}

#collage .pharmd
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/pharmd.jpg');
	background-position: 50% 50%;
}

#collage .red-scarf
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/redscarf.jpg');
	background-position: 50% 50%;
}

#collage .strolling
{
	background-image: url('http://catalog.pharmacy.umaryland.edu/img/cover/strolling.jpg');
}

@keyframes rise
{
	from
	{
		transform: translateZ(-250px);
		opacity: 0;
	}

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

@-webkit-keyframes rise
{
	from
	{
		-webkit-transform: translateZ(-250px);
		opacity: 0;
	}

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

html.no-csstransforms3d #collage
{
	top: 20vw;
	left: 0;
	bottom: 0;
	width: 100vw;
}

html.no-csstransforms3d #collage .pharmacy-hall,
html.no-csstransforms3d #collage .pharmacy-hall-interior,
html.no-csstransforms3d #collage .strolling,
html.no-csstransforms3d #collage .pair
{
	display: none;
}


@media screen and (max-width:768px)
{
	#collage
	{
		top: 50px;
		left: -100px;
	}

	#greeting
	{
		top: 50px;
		left: 25px;
	}

	#greeting img
	{
		float: none;
		height: 75px;
	}

	#greeting .text
	{
		display: block;
		float: none;
		margin-left: 0;
		padding-left: 0;
		border-left: none;
	}

	#greeting h1
	{
		font-size: 4vw;
	}

	#greeting a
	{
		margin-left: 0;
		font-size: 2.5vw;
	}
}

@media screen and (max-width:740px)
{
	body.cover:before
	{
		display: none;
	}

	#collage
	{
		top: 0;
		left: 0;
		width: 50%;
		height: 100%;
		transform: none;
		-webkit-transform: none;
	}

	#collage > div
	{
		display: none;
	}

	#collage div.rise
	{
		animation: none;
		-webkit-animation: none;
	}

	#collage > .pharmacy-hall-interior
	{
		display: block;
		opacity: 1 !important;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#disclaimer
	{
		display: none;
	}

	#greeting
	{
		left: 50%;
		top: 18vh;
		padding-left: 25px;
	}

	#greeting img
	{
		height: 60px;
	}

	#skip
	{
		left: 50%;
		padding-left: 25px;
		text-align: left;
	}
}

@media screen and (max-width: 600px)
{
	#collage
	{
		width: 100%;
		height: 55%;
	}

	#collage > .pharmacy-hall-interior
	{
		right: 0;
		height: 100%;
	}

	#greeting
	{
		top: 55%;
		left: 0;
		right: 0;
		padding-top: 25px;
		padding-left: 0;
		text-align: center;
	}

	#greeting img
	{
		height: 70px;
	}

	#greeting h1
	{
		font-size: 5vw;
	}

	#greeting a
	{
		font-size: 4vw;
	}

	#skip
	{
		left: 0;
		font-size: 80%;
		text-align: center;
	}
}

@media screen and (max-width: 320px)
{
	#greeting img
	{
		height: 50px;
	}
}

@media screen and (min-width: 2500px)
{
	body.cover:before
	{
		height: 425px;
	}

	#greeting h1
	{
		font-size: 72px;
	}

	#greeting a
	{
		font-size: 48px;
	}
}

@media print
{
	body.cover:before
	{
		display: none;
	}

	#greeting img
	{
		float: none;
		height: 60pt;
	}

	#greeting .text
	{
		float: none;
		margin-left: 0;
		border-left: 0;
		padding-left: 0;
	}

	#greeting h1
	{
		font-size: 14pt;
	}

	#greeting a
	{
		margin-left: 0;
		font-size: 13pt;
	}
}