@font-face {
	font-family: 'Verdana';
	src: url('/verdana.ttf') format('truetype');
}

body {
	font-family: 'Verdana', Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

.banner {
	z-index: 2;
	position: absolute;
	background: yellow;
	padding: 30px;
	left: 0; 
	right: 0; 
	margin-left: auto; 
	margin-right: auto;
	transform: rotate(350deg);
	text-align: center;
}

.portrait {
	margin: 0;
	padding: 0;
}

.header {
	background-image: url("/background.jpg");
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.headerimage {
	position: absolute;
}

.boxwide,
.box {
	display: inline-block;
	margin: 0;
	padding: 0;
}

.footer {
	background-image: url("/background.jpg");
	color: white;
	width: 100%;
	text-align: center;
	padding: 20px 0 20px 0;
}

@media (max-width: 369px)
{
	.portrait {
		width: 300px;
		height: 200px;
	}

	.header {
		height: 200px;
	}

	.content {
		padding-top: 200px;
	}
}

@media (min-width: 370px) and (max-width: 519px)
{
	.portrait {
		width: 400px;
		height: 266px;
	}

	.header {
		height: 266px;
	}

	.content {
		padding-top: 266px;
	}
}

@media (max-width: 519px)
{
	.banner {
		font-size: medium;
		top: 150px;
		width: 250px;
	}
}

@media (min-width: 520px)
{
	.portrait {
		width: 600px;
		height: 400px;
	}

	.header {
		height: 400px;
	}

	.content {
		padding-top: 400px;
	}
}

@media (min-width: 520px) and (max-width: 879px)
{
	.headerimage {
		right: 0;
	}

	.headertext {
	}

	.banner {
		font-size: large;
		top: 280px;
		width: 350px;
	}
}

@media (max-width: 879px)
{
	.headerimage {
		right: 0;
	}

	.headertext,
	.boxwide,
	.box {
		width: 100%;
	}

	li {
		padding: 4px 10px 4px 10px;
	}

	h1,
	h2 {
		padding-left: 10px;
	}
}

@media (min-width: 880px)
{
	.headerimage {
		width: 600px;
		top: 0;
	}

	.headertext {
		width: 600px;
		position: absolute;
		top: 120px;
		color: white;
	}

	.banner {
		font-size: xx-large;
		top: 280px;
		width: 550px;
	}
}

@media (min-width: 880px) and (max-width: 1199px)
{
	.headerimage {
		right: 0;
	}

	.headertext {
		left: 50px;
	}

	.boxwide,
	.box {
		width: 100%;
	}

	li {
		padding: 4px 10px 4px 10px;
	}

	h1 {
		padding-left: 0px;
	}

	h2 {
		padding-left: 10px;
	}
}

@media (min-width: 1200px)
{
	body {
		text-align: center;
	}

	.headerimage {
		left: 50%;
	}

	.headertext {
		right: 50%;
	}

	.content {
		width: 1200px;
		text-align: left;
		display: inline-block;
	}

	.boxwide {
		width: 1180px;
		vertical-align: text-top;
	}

	.box {
		width: 590px;
		vertical-align: text-top;
	}

	li {
		padding: 4px;
	}

	h1,
	h2 {
		padding-left: 4px;
	}
}

ul {
  list-style-type: none;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: inherit;
}

.supported {
	width: 100%;
	text-align: center;
	line-height: 64px;
	padding: 20px 0 30px 0;
}

.logo_container {
	height: 64px;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
}

.logo {
	height: 64px;
	padding: 10px;
	display: inline-block;
	vertical-align: middle;
}