.background
{
	background-image: url('../content/backgrounds/background_main.jpg');
}

.content
{
	position: relative;
	top: calc((150/768) * ((100vw + 100vh) / 2));
	right: 0px;

	width: 100%;
	height: auto;

	background-color: transparent;
}

.topsection
{
	position: relative;
	top: 0px;
	left: 0px;

	width: 100%;
	height: 32vh;
}

.topsection .title, .legacysection .title
{
	position: relative;
	top: 0px;
	left: 0px;

	width: calc(100% - ((100/768) * ((100vw + 100vh) / 2)));
	height: calc((40/768) * ((100vw + 100vh) / 2));

	text-align: right;
	font-family: 'Raleway', sans-serif;
	color: #ffffff;
	font-size: calc((40/768) * ((100vw + 100vh) / 2));
	margin: 0px calc((50/768) * ((100vw + 100vh) / 2));
}

.topsection .text, .legacysection .text
{
	position: absolute;
	top: calc((60/768) * ((100vw + 100vh) / 2));
	right: 0px;

	width: 62%;
	height: calc((20/768) * ((100vw + 100vh) / 2));

	text-align: right;
	font-family: 'Comfortaa', cursive;
	color: #ffffff;
	font-size: calc((20/768) * ((100vw + 100vh) / 2));
	margin: 0px calc((50/768) * ((100vw + 100vh) / 2));
}

.legacysection
{
	position: relative;
	top: calc((40/768) * ((100vw + 100vh) / 2) + 10vw);
	left: 0px;

	width: 100%;
	height: 32vh;
}

.year
{
	position: relative;
	top: 0px;
	left: 0px;

	width: auto;
	height: auto;

	display: table;
	margin-top: calc((20/768) * ((100vw + 100vh) / 2));
	margin-bottom: calc((20/768) * ((100vw + 100vh) / 2));
	padding-top: calc((50/768) * ((100vw + 100vh) / 2));
	padding-bottom: calc((50/768) * ((100vw + 100vh) / 2));
}

.cover
{
	position: absolute;
	top: 0px;
	left: 0px;

	width: 100%;
	height: 100%;

	background-color: #000000;
	opacity: 0.6;
}

.heading
{
	position: relative;
	top: 0px;
	left: 0px;

	width: calc(100% - ((24/768) * ((100vw + 100vh) / 2)));

	margin: 0px calc((12/768) * ((100vw + 100vh) / 2));
	margin-bottom: calc((15/768) * ((100vw + 100vh) / 2));

	font-size: calc((30/768) * ((100vw + 100vh) / 2));
	color: #ffffff;
	font-family: 'Raleway', sans-serif;
}

.membercard
{
	position: relative;
	top: 0px;
	left: 0px;

	width: calc((150/768) * ((100vw + 100vh) / 2));
	height: calc((230/768) * ((100vw + 100vh) / 2));

	margin: calc((15/768) * ((100vw + 100vh) / 2));
	overflow: hidden;
}

#juniors, #freshmen, #legacy_1
{
	padding-left: calc((40/768) * ((100vw + 100vh) / 2));
	margin-right: calc((80/768) * ((100vw + 100vh) / 2));
}

#juniors .membercard, #freshmen .membercard, #legacy_1 .membercard
{
	float: left;
}

#juniors .heading, #freshmen .heading, #legacy_1 .heading
{
	text-align: left;
}

#sophomores
{
	padding-right: calc((40/768) * ((100vw + 100vh) / 2));
	margin-left: calc((80/768) * ((100vw + 100vh) / 2));
}

#sophomores .membercard
{
	float: right;
}

#sophomores .heading
{
	text-align: right;
}

.membercard .image
{
	position: relative;
	top: 0px;
	left: 0px;

	width: 100%;
	height: calc(100% - ((35/768) * ((100vw + 100vh) / 2)));

	background-image: url('../content/userdata/defaultimage.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.membercard .name
{
	position: absolute;
	bottom: calc((12/768) * ((100vw + 100vh) / 2));
	left: 0px;

	width: 100%;

	font-family: 'Muli', sans-serif;
	font-size: calc((12/768) * ((100vw + 100vh) / 2));
	color: #ffffff;
}

.membercard .role
{
	position: absolute;
	bottom: 0px;
	left: 0px;

	width: 100%;

	font-family: 'Muli', sans-serif;
	font-size: calc((8/768) * ((100vw + 100vh) / 2));
	color: #cccccc;
}

.membercard .about
{
	position: absolute;
	top: 0px;
	left: 0px;

	width: 100%;
	height: calc(100% - ((35/768) * ((100vw + 100vh) / 2)));

	padding: calc((12/768) * ((100vw + 100vh) / 2)) calc((5/768) * ((100vw + 100vh) / 2));

	overflow: scroll;
	visibility: hidden;

	font-family: 'Comfortaa', cursive;
	font-size: calc((10/768) * ((100vw + 100vh) / 2));
	line-height: calc((12/768) * ((100vw + 100vh) / 2));
	text-align: center;
	color: #ffffff;

	z-index: 5;
}

.membercard .about a
{
	font-size: calc((30/768) * ((100vw + 100vh) / 2));
	text-decoration: none;
	color: #ffffff;
}

.membercard .about a:hover
{
	color: #ddb81e;
}

.membercard .about a i
{
	padding: calc((5/768) * ((100vw + 100vh) / 2));
}

.membercard .aboutoverlay
{
	position: absolute;
	top: 0px;
	left: 0px;

	width: 100%;
	height: calc(100% - ((35/768) * ((100vw + 100vh) / 2)));

	background-color: #0072ab;
	opacity: 0.8;
	visibility: hidden;

	z-index: 4;
}

.footer
{
	position: relative;
	top: calc((200/768) * ((100vw + 100vh) / 2));
	left: 0px;

	width: 100%;
	height: calc((200/768) * ((100vw + 100vh) / 2));

	background-color: #000000;
	opacity: 0.8;

	padding: calc((20/768) * ((100vw + 100vh) / 2)) calc((50/768) * ((100vw + 100vh) / 2));
}

.footer .footerlinks
{
	position: relative;
	top: 0px;
	left: 0px;

	width: 100%;
	height: calc((40/768) * ((100vw + 100vh) / 2));

	margin: calc((25/768) * ((100vw + 100vh) / 2)) 0px;

	text-align: center;
	font-size: calc((30/768) * ((100vw + 100vh) / 2));
}

.footer .footerlinks a
{
	position: relative;
	top: 0px;
	left: 0px;

	margin: calc((10/768) * ((100vw + 100vh) / 2));

	text-decoration: none;
	color: #ffffff;
}

.footer .footerlinks a:hover
{
	color: #e0871e;
}

.footer .copyrighttext
{
	position: relative;
	top: 0px;
	left: 0px;

	width: 100%;
	height: calc((40/768) * ((100vw + 100vh) / 2));

	margin: calc((20/768) * ((100vw + 100vh) / 2)) 0px;

	text-align: center;
	font-size: calc((15/768) * ((100vw + 100vh) / 2));
	font-family: 'Comfortaa', cursive;
	color: #ffffff;
}

.pad {
	padding-top: 100px;
}