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

.content
{
	position: absolute;
	top: 62%;
	right: calc((30/768) * ((100vw + 100vh) / 2));

	text-align: right;
	color: #ffffff;
}

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

	font-size: calc((45/768) * ((100vw + 100vh) / 2));
	font-family: 'Montserrat', sans-serif;
}

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

	font-size: calc((30/768) * ((100vw + 100vh) / 2));
	line-height: calc((40/768) * ((100vw + 100vh) / 2));
	font-family: 'Comfortaa', cursive;
}

.sociallinks
{
	position: relative;
	top: calc((10/768) * ((100vw + 100vh) / 2));

	height: calc((30/768) * ((100vw + 100vh) / 2));
}

.sociallinks .link
{
	height: calc((30/768) * ((100vw + 100vh) / 2));
	width: calc((30/768) * ((100vw + 100vh) / 2));

	float: right;

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

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

.sociallinks .link a
{
	text-decoration: none;
	color: #ffffff;
}

.sociallinks .link a:hover
{
	color: #e0871e;
}

.buttonlink
{
	position: relative;
	top: calc((20/768) * ((100vw + 100vh) / 2));

	margin: 0px calc((5/768) * ((100vw + 100vh) / 2));
	border: calc((1.5/768) * ((100vw + 100vh) / 2)) solid #ffffff;
	border-radius: calc((10/768) * ((100vw + 100vh) / 2));
	padding: calc((10/768) * ((100vw + 100vh) / 2)) calc((20/768) * ((100vw + 100vh) / 2));

	font-family: 'Raleway', sans-serif;
	font-size: calc((15/768) * ((100vw + 100vh) / 2));
	text-align: right;
	text-decoration: none;
	color: #ffffff;

	align-self: flex-end;
	align-items: flex-end;
}

.buttonlink:hover
{
	background-color: #eeeeee;
	color: #000000;
}

.contactboard, .centerboard
{
	position: absolute;
	top: 19%;
	left: calc((20/768) * ((100vw + 100vh) / 2));

	background-color: #222222;
	overflow: hidden;
	border-radius: calc((20/768) * ((100vw + 100vh) / 2));
}

.contactboard
{
	width: 62%;
	height: auto;
}


@media only screen and (max-width:475px) {
	.centerboard
	{
		width: calc(100% - ((40/768) * ((100vw + 100vh) / 2)));
		height: 40%;
	}

	.content
	{
		max-width: 80%;
	}
}

@media only screen and (min-aspect-ratio:3/2) and (min-width:475px) {
	.centerboard
	{
		width: 62%;
		height: 62%;
	}

	.content
	{
		max-width: 50%;
	}
}

@media only screen and (max-aspect-ratio:3/2) and (min-width:475px) {
	.centerboard
	{
		width: calc(100% - ((40/768) * ((100vw + 100vh) / 2)));
		height: 62%;
	}

	.content
	{
		max-width: 62%;
	}
}

.centerboard .image
{
	position: absolute;
	top: 0px;
	left: 0px;

	width: 100%;
	height: 100%;

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#about .centerboard .image
{
	background-image: url('../content/images/team.jpg');
}

#projects .centerboard .image
{
	background-image: url('../content/images/projects.jpg');
}

#support .centerboard .image
{
	background-image: url('../content/images/support.jpg');
}

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

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

	margin: 0px;
	border: 0px;

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

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

	margin: calc((10/768) * ((100vw + 100vh) / 2)) calc((20/768) * ((100vw + 100vh) / 2));
	margin-bottom: 0px;
	font-size: calc((25/768) * ((100vw + 100vh) / 2));
}

.contact_form .formline
{
	position: relative;
	top: 0px;
	left: 0px;

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

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

.contact_form .formline input, .contact_form .formline textarea
{
	position: relative;
	top: 10px;
	left: 0px;

	width: 60%;

	color: #ffffff;
	font-size: calc((15/768) * ((100vw + 100vh) / 2));
	font-family: 'Muli', sans-serif;
	border: calc((1/768) * ((100vw + 100vh) / 2)) solid #c0c4c4;

	margin-bottom: calc((15/768) * ((100vw + 100vh) / 2));
	padding: calc((5/768) * ((100vw + 100vh) / 2)) calc((10/768) * ((100vw + 100vh) / 2));
	border-radius: calc((10/768) * ((100vw + 100vh) / 2));
	background-color: transparent;
}

.contact_form .formline input:focus, .contact_form .formline textarea:focus
{
	outline: none;
	border-color: #e0871e;
}

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

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

	margin-bottom: calc((10/768) * ((100vw + 100vh) / 2));
	padding: calc((6/768) * ((100vw + 100vh) / 2)) calc((20/768) * ((100vw + 100vh) / 2));
	border-radius: calc((10/768) * ((100vw + 100vh) / 2));
	background-color: transparent;
}

.submitbutton:hover
{
	background-color: #e0871e;
}

#message
{
	width: 100%;
}

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

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

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

.upbutton
{
	position: absolute;
	left: calc(50% - (20/768) * ((100vw + 100vh) / 2));
	bottom: calc((20/768) * ((100vw + 100vh) / 2));

	width: 0;
	height: 0;

	border-left: calc((20/768) * ((100vw + 100vh) / 2)) solid transparent;
	border-right: calc((20/768) * ((100vw + 100vh) / 2)) solid transparent;
	border-bottom: calc((10/768) * ((100vw + 100vh) / 2)) solid #ffffff;
}